{"size": 3519, "ext": "js", "max_stars_repo_path": "rick_and_morty/src/App.js", "max_stars_repo_name": "kodemia/rick-and-morty", "max_stars_repo_stars_event_min_datetime": "2020-03-23T17:36:19.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-28T22:31:50.000Z", "max_issues_repo_path": "rick_and_morty/src/App.js", "max_issues_repo_name": "kodemia/rick-and-morty", "max_issues_repo_issues_event_min_datetime": "2021-03-10T10:44:21.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-18T22:37:42.000Z", "max_forks_repo_path": "rick_and_morty/src/App.js", "max_forks_repo_name": "kodemia/rick-and-morty", "max_forks_repo_forks_event_min_datetime": "2020-03-12T23:12:09.000Z", "max_forks_repo_forks_event_max_datetime": "2020-03-12T23:12:09.000Z"}
{"max_stars_count": 3, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 26.8625954198, "max_line_length": 80, "alphanum_fraction": 0.459789713}
import React, { Component } from "react";
import "./App.css";

import api from "./lib/api";
import pickle from "./images/pickle-rick.png";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      characters: [],
      activeCharacter: {},
      modalActive: false
    };
  }

  componentDidMount() {
    api.getAllCharacters().then(({ results }) => {
      const characters = results.map(({ id, name, image }) => {
        return { id, name, image };
      });
      this.setState({
        characters: characters
      });
    });
  }

  _setActiveCharacter(id) {
    api.getCharacterById(id).then(data => {
      console.log(data);
      this.setState({
        activeCharacter: data,
        modalActive: true
      });
    });
  }

  _unsetActiveCharacter() {
    this.setState({
      activeCharacter: {},
      modalActive: false
    });
  }

  _renderCards = ({ id, name, image }) => {
    return (
      <div
        key={id}
        id={id}
        className="Card"
        onClick={e => this._setActiveCharacter(id)}
      >
        <div className="Card-image">
          <figure>
            <img src={image} alt={name} />
          </figure>
        </div>
        <div className="Card-description">
          <div className="Card-name">
            <h3>{name}</h3>
          </div>
        </div>
      </div>
    );
  };

  render() {
    const { characters, modalActive, activeCharacter } = this.state;
    return (
      <div className="App">
        <div className="App-container">
          <h1>Rick and morty characters {this.state.count}</h1>
          <div className="Cards-container">
            {characters.map(c => this._renderCards(c))}
          </div>
        </div>

        {modalActive ? (
          <div className="Modal" onClick={e => this._unsetActiveCharacter()}>
            <div className="Pickle-container">
              <figure>
                <img src={pickle} alt="pickle-rick" />
              </figure>
            </div>

            <div className="Card-detail">
              <div className="Card-image">
                <figure>
                  <img src={activeCharacter.image} alt={activeCharacter.name} />
                </figure>
              </div>
              <div className="Card-detail-description">
                <div className="Card-name">
                  <h3>{activeCharacter.name}</h3>
                  <div className="Characteristic">
                    <p>Status</p>
                    <p className="Characteristic-value">
                      {activeCharacter.status}
                    </p>
                  </div>
                  <div className="Characteristic">
                    <p>Specie</p>
                    <p className="Characteristic-value">
                      {activeCharacter.species}
                    </p>
                  </div>
                  <div className="Characteristic">
                    <p>Gender</p>
                    <p className="Characteristic-value">
                      {activeCharacter.gender}
                    </p>
                  </div>
                  <div className="Characteristic">
                    <p>Origin</p>
                    <p className="Characteristic-value">
                      {activeCharacter.origin.name}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}

export default App;
