assembler-institute · ParisArcos · Oct 7, 2021 · Oct 8, 2021 · Oct 8, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "bootstrap": "^4.6.0",
     "clsx": "^1.1.1",
     "prop-types": "^15.7.2",

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Rick y Morty React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,23 @@
 import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import Home from "./pages/Home";
+import Episode from "./pages/Episode";
+import Character from "./pages/Character";
+import Location from "./pages/Location";
 
 function App() {
-  return <Home />;
+  return (
+    <Router>
+      <Switch>
+        {/* add routes here */}
+        <Route path="/location/:locationId" component={Location} />
+        <Route path="/character/:id" component={Character} />
+        <Route path="/episode/:id" component={Episode} />
+        <Route exact path="/" component={Home} />
+      </Switch>
+    </Router>
+  );
 }
 
 export default App;
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
@@ -5,22 +5,24 @@ import "./CharacterCard.scss";
 
 import * as routes from "../../constants/routes";
 
-function CharacterCard({ id, name, image, species, status, origin, location }) {
+function CharacterCard({ id, name, image, species, status, origin }) {
+  const locationUrlArray = origin.url.split("/");
+  const locationId = locationUrlArray[locationUrlArray.length - 1];
   return (
-    <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
+    <div className="col col-6 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />
       <Link to={`${routes.CHARACTER}/${id}`}>
         <h3 className="CharacterCard__name h4">{name}</h3>
       </Link>
       <div className="CharacterCard__meta">
         <Link
           className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${id}`}
+          to={`${routes.LOCATION}/${locationId}`}
         >
           {origin.name}
         </Link>
-        <p className="CharacterCard__meta-item">|</p>
-        <p className="CharacterCard__meta-item">{status}</p>
+        <p className="CharacterCard__meta-item">{species} |</p>
+        <p className="CharacterCard__meta-item"> {status}</p>
       </div>
     </div>
   );

diff --git a/src/components/EpisodeCard/EpisodeCard.js b/src/components/EpisodeCard/EpisodeCard.js
@@ -8,7 +8,12 @@ import * as routes from "../../constants/routes";
 function EpisodeCard({ id, name, airDate, episode }) {
   return (
     <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
-      <Link to={`${routes.EPISODE}/${id}`}>
+      <Link
+        to={`${routes.EPISODE}/${id}`}
+        name={name}
+        airdate={airDate}
+        episode={episode}
+      >
         <h3 className="Episode__name h5">{name}</h3>
       </Link>
       <div className="Episode__meta">

diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
@@ -0,0 +1,102 @@
+/* eslint-disable no-console */
+
+import axios from "axios";
+import React, { Component } from "react";
+
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard";
+import EpisodeCard from "../../components/EpisodeCard";
+
+class Character extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      character: null,
+      episodes: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+  }
+
+  async componentDidMount() {
+    this.loadCharacter();
+  }
+
+  async loadCharacter() {
+    console.log(this);
+    // eslint-disable-next-line react/destructuring-assignment
+    const id = this.props.match.params.id;
+    const baseURL = `https://rickandmortyapi.com/api/character/ ${id}`;
+    try {
+      const APIcall = await axios.get(baseURL);
+
+      const episodeArray = APIcall.data.episode;
+      const episodes = await axios.all(
+        episodeArray.map((episodeURL) => axios.get(episodeURL)),
+      );
+
+      this.setState({
+        character: APIcall.data,
+        episodes: episodes,
+        hasLoaded: true,
+      });
+    } catch (err) {
+      this.setState({
+        hasError: false,
+        errorMessage: "Character not found!!",
+      });
+    }
+  }
+
+  render() {
+    const {
+      hasLoaded,
+      hasError,
+      errorMessage,
+      character,
+      episodes,
+    } = this.state;
+
+    return (
+      <Layout>
+        <section className="row">
+          <div className="col col-12">
+            {hasLoaded && !hasError ? (
+              <CharacterCard
+                key={character.id}
+                id={character.id}
+                name={character.name}
+                image={character.image}
+                species={character.species}
+                status={character.status}
+                origin={character.origin}
+                location={character.location}
+              />
+            ) : (
+              <h1>{errorMessage}</h1>
+            )}
+          </div>
+          <div className="col col-12">
+            <hr />
+          </div>
+          {episodes.map((episode) => (
+            <EpisodeCard
+              key={episode.data.id}
+              id={episode.data.id}
+              name={episode.data.name}
+              airDate={episode.data.air_date}
+              episode={episode.data.episode}
+            />
+          ))}
+          <div className="col col-12">
+            <hr />
+          </div>
+        </section>
+      </Layout>
+    );
+  }
+}
+
+export default Character;
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export { default } from "./Character";
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
@@ -1,37 +1,102 @@
+/* eslint-disable no-console */
+import axios from "axios";
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
 
 class Episode extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // episode: null,
-    // characters: [],
-    // hasLoaded: false,
-    // hasError: false,
-    // errorMessage: null,
+    this.state = {
+      episode: null,
+      name: "",
+      airDate: "",
+      characters: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+  }
+
+  async componentDidMount() {
+    this.loadEpisode();
+  }
+
+  async loadEpisode() {
+    console.log(this);
+    // eslint-disable-next-line react/destructuring-assignment
+    const id = this.props.match.params.id;
+    const baseURL = `https://rickandmortyapi.com/api/episode/ ${id}`;
+    try {
+      const APIcall = await axios.get(baseURL);
+      const charArray = APIcall.data.characters;
+      const chars = await axios.all(
+        charArray.map((charURL) => axios.get(charURL)),
+      );
+
+      this.setState({
+        episode: APIcall.data.episode,
+        characters: chars,
+        name: APIcall.data.name,
+        airDate: APIcall.data.air_date,
+        hasLoaded: true,
+      });
+    } catch (err) {
+      this.setState({
+        hasError: false,
+        errorMessage: "Episode not found!!",
+      });
+    }
   }
 
   render() {
+    const {
+      hasLoaded,
+      hasError,
+      errorMessage,
+      characters,
+      name,
+      airDate,
+      episode,
+    } = this.state;
+
     return (
       <Layout>
         <section className="row">
           <div className="col col-12">
-            {/* {characters.map((character) => (
-              <CharacterCard
-                key={character.id}
-                id={character.id}
-                name={character.name}
-                image={character.image}
-                species={character.species}
-                status={character.status}
-                origin={character.origin}
-                location={character.location}
-              />
-            ))} */}
+            {hasLoaded && !hasError ? (
+              <>
+                <h3 className="Episode__name h5">{name}</h3>
+                <div className="Episode__meta">
+                  <p className="Episode__meta-item">{airDate}</p>
+                  <p className="Episode__meta-item">|</p>
+                  <p className="Episode__meta-item">{episode}</p>
+                </div>
+              </>
+            ) : (
+              <h1>{errorMessage}</h1>
+            )}
+          </div>
+          <div className="col col-12">
+            <hr />
+          </div>
+
+          {characters.map((character) => (
+            <CharacterCard
+              key={character.data.id}
+              id={character.data.id}
+              name={character.data.name}
+              image={character.data.image}
+              species={character.data.species}
+              status={character.data.status}
+              origin={character.data.origin}
+            />
+          ))}
+
+          <div className="col col-12">
+            <hr />
           </div>
         </section>
       </Layout>