solution: jaime

package.json

@@ -18,7 +18,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "sass": "^1.32.11",
     "web-vitals": "^1.0.1"

src/App.js

@@ -1,9 +1,26 @@
 import React from "react";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
+import Character from "./pages/Character/Character";
+import Episode from "./pages/Episode/Episode";
+import Location from "./pages/Location/Location";
 
 import Home from "./pages/Home";
 
 function App() {
-  return <Home />;
+  return (
+    <Router>
+      <Switch>
+        <Route path="/location/:locationId" component = {Location} />
+        <Route path="/character/:characterId" component = {Character}/>
+        <Route path="/episode/:episodeId" component = {Episode}/>
+        <Route exact path="/" component = {Home}/>
+      </Switch>
+    </Router>
+  )
 }
 
 export default App;

src/components/CharacterCard/CharacterCard.js

@@ -1,21 +1,35 @@
+/* eslint-disable no-console */
 import React from "react";
 import { Link } from "react-router-dom";
 
 import "./CharacterCard.scss";
 
 import * as routes from "../../constants/routes";
 
-function CharacterCard({ id, name, image, species, status, origin, location }) {
+function CharacterCard({
+  characterId,
+  name,
+  image,
+  species,
+  status,
+  origin,
+  location,
+}) {
+  console.log(location);
+  let locationId = location.split("/");
+  locationId = locationId[locationId.length -1];
+  console.log(locationId);
+
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />
-      <Link to={`${routes.CHARACTER}/${id}`}>
+      <Link to={`${routes.CHARACTER}/${characterId}`}>
         <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}`} // locationId
         >
           {origin.name}
         </Link>

src/components/EpisodeCard/EpisodeCard.js

@@ -1,11 +1,13 @@
-import React from "react";
+import React, {} from "react";
 import { Link } from "react-router-dom";
 
 import "./EpisodeCard.scss";
 
 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}`}>

src/components/Footer/Footer.js

@@ -8,6 +8,7 @@ function Footer() {
           <p className="m-0">
             Assembler School &copy; {new Date().getFullYear()}
           </p>
+
         </div>
       </div>
     </footer>

src/components/Layout/Layout.js

@@ -9,6 +9,7 @@ function Layout({ children }) {
     <>
       <AppHeader />
       <Main>{children}</Main>
+
       <Footer />
     </>
   );

src/components/Main/Main.js

@@ -4,6 +4,7 @@ function Main({ children, ...props }) {
   return (
     <main className="container" {...props}>
       {children}
+
     </main>
   );
 }

src/pages/Character/Character.js

@@ -0,0 +1,106 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-console */
+/* eslint-disable react/no-unused-state */
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from "react";
+import axios from "axios";
+import CharacterCard from "../../components/CharacterCard";
+import EpisodeCard from "../../components/EpisodeCard";
+
+export default class Character extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      character: "",
+      episodeList: [],
+      id: "",
+      name: "",
+      image: "",
+      species: "",
+      status: "",
+      origin: "",
+      location: "",
+    };
+  }
+
+  async componentDidMount() {
+    await this.loadCharacter();
+    await this.loadEpisodeCharacter();
+  }
+
+  async loadCharacter() {
+    console.log(this);
+    const characterId = this.props.match.params.characterId;
+    const URL_CHARACTER = `https://rickandmortyapi.com/api/character/${characterId}`;
+    const llamada = await axios.get(URL_CHARACTER);
+    // console.log(llamada.data.episode);
+    const arr = llamada.data.episode;
+    // console.log(arr);
+    const arr2 = await axios.all(arr.map((episode) => axios.get(episode)));
+    console.log(arr2);
+    this.setState({
+      episodeList: arr2,
+    });
+    // console.log(episodeList);
+  }
+
+  async loadEpisodeCharacter() {
+    console.log(this);
+    console.log(this.props.match.params.characterId);
+    const characterId = this.props.match.params.characterId;
+    const URL_CHARACTER = `https://rickandmortyapi.com/api/character/${characterId}`;
+    const llamada = await axios.get(URL_CHARACTER);
+    const arr = llamada.data;
+    console.log(arr);
+    this.setState({
+      character: arr,
+      id: arr.id,
+      name: arr.name,
+      image: arr.image,
+      species: arr.species,
+      status: arr.status,
+      origin: arr.origin,
+      location: arr.location.url,
+    });
+    console.log(arr.name);
+  }
+
+  render() {
+    const {
+      episodeList,
+      id,
+      name,
+      image,
+      species,
+      status,
+      origin,
+      location,
+    } = this.state;
+    return (
+      <div>
+        <CharacterCard
+          key={id}
+          id={id}
+          name={name}
+          image={image}
+          species={species}
+          status={status}
+          origin={origin}
+          location={location}
+        />
+        <div>
+          {episodeList.map((epi) => (
+            <EpisodeCard
+              key={epi.data.id}
+              id={epi.data.id}
+              name={epi.data.name}
+              airDate={epi.data.air_date}
+              episode={epi.data.episode}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}

src/pages/Character/index.js

@@ -0,0 +1 @@
+export {default} from './Character';

src/pages/Episode/Episode.js

@@ -1,37 +1,59 @@
+/* eslint-disable react/destructuring-assignment */
+/* 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,
+      characters: [],
+      // hasLoaded: false,
+      // hasError: false,
+      // errorMessage: null,
+    };
+  }
+
+  async componentDidMount(){
+    await this.loadCharacters();
+  }
+
+  async loadCharacters(){
+    // console.log(this.props.match.params.episodeId);
+    const episodeId= this.props.match.params.episodeId;
+    const URL_EPISODE = `https://rickandmortyapi.com/api/episode/${episodeId}`
+    const llamada = await axios.get(URL_EPISODE);
+    const arr = llamada.data.characters;
+    const arr2 = await axios.all(arr.map((character) => axios.get(character)))
+    console.log(arr2);
+    this.setState({
+      characters: arr2
+    })
   }
 
   render() {
+    const { characters } = this.state;
     return (
       <Layout>
         <section className="row">
           <div className="col col-12">
-            {/* {characters.map((character) => (
+            {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}
+                key={character.data.id}
+                characterId={character.data.id}
+                name={character.data.name}
+                image={character.data.image}
+                species={character.data.species}
+                status={character.data.status}
+                origin={character.data.origin}
+                location={character.data.location.url}
               />
-            ))} */}
+            ))}
           </div>
         </section>
       </Layout>