Solution: Yaiser Avila Rodriguez

.eslintignore

@@ -1 +1,2 @@
 package-lock.json
+src/*

package.json

@@ -19,7 +19,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^1.1.5",
     "sass": "^1.32.11",
     "web-vitals": "^1.0.1"
   },

src/App.js

@@ -1,9 +1,23 @@
 import React from "react";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
 
-import Home from "./pages/Home";
+import Home from "./pages/Home/Home";
+import Episode from "./pages/Episode/Episode";
+import Character from "./pages/Characters/Character";
+import * as routes from "../src/constants/routes";
+import Location from "./pages/Location/Location";
 
 function App() {
-  return <Home />;
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route path={`${routes.EPISODE}/:id`} component={Episode} />
+        <Route path={`${routes.CHARACTER}/:id`} component={Character} />
+        <Route path={`${routes.LOCATION}/:id`} component={Location} />
+        <Route exact path={`${routes.HOME}`} component={Home} />
+      </Switch>
+    </BrowserRouter>
+  );
 }
 
 export default App;

src/components/AppHeader/AppHeader.js

@@ -19,6 +19,24 @@ function AppHeader({ ...props }) {
                   Home
                 </NavLink>
               </li>
+              <li className="nav-item">
+                <NavLink
+                  className="nav-link"
+                  activeClassName="active"
+                  to={`${routes.CHARACTER}`}
+                >
+                  Characters
+                </NavLink>
+              </li>
+              <li className="nav-item">
+                <NavLink
+                  className="nav-link"
+                  activeClassName="active"
+                  to={`${routes.LOCATION}`}
+                >
+                  Location
+                </NavLink>
+              </li>
             </ul>
           </nav>
         </div>

src/components/CharacterCard/CharacterCard.js

@@ -6,21 +6,50 @@ import "./CharacterCard.scss";
 import * as routes from "../../constants/routes";
 
 function CharacterCard({ id, name, image, species, status, origin, location }) {
+  let locationId = location.url
+    ? location.url.split("/")[location.url.split("/").length - 1]
+    : null;
+  console.log(locationId);
+
+  let originId = origin.url
+    ? origin.url.split("/")[origin.url.split("/").length - 1]
+    : null;
+  console.log(originId);
+
   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}`}>
         <h3 className="CharacterCard__name h4">{name}</h3>
       </Link>
       <div className="CharacterCard__meta">
-        <Link
-          className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${id}`}
-        >
-          {origin.name}
-        </Link>
+        {originId && (
+          <Link
+            className="CharacterCard__meta-item"
+            to={`${routes.LOCATION}/${originId}`}
+          >
+            <strong>Origin: </strong>
+            {origin.name}
+          </Link>
+        )}
         <p className="CharacterCard__meta-item">|</p>
-        <p className="CharacterCard__meta-item">{status}</p>
+        <p className="CharacterCard__meta-item">
+          <strong>Status: </strong>
+          {status}
+        </p>
+        <p className="CharacterCard__meta-item">
+          <strong>Species: </strong>
+          {species}
+        </p>
+        {locationId && (
+          <Link
+            className="CharacterCard__meta-item"
+            to={`${routes.LOCATION}/${locationId}`}
+          >
+            <strong>Location: </strong>
+            {location.name}
+          </Link>
+        )}
       </div>
     </div>
   );

src/components/EpisodeCard/EpisodeCard.js

@@ -5,10 +5,10 @@ import "./EpisodeCard.scss";
 
 import * as routes from "../../constants/routes";
 
-function EpisodeCard({ id, name, airDate, episode }) {
+function EpisodeCard({ episodeId, 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}/${episodeId}`}>
         <h3 className="Episode__name h5">{name}</h3>
       </Link>
       <div className="Episode__meta">

src/components/Layout/Layout.js

@@ -6,11 +6,11 @@ import Footer from "../Footer";
 
 function Layout({ children }) {
   return (
-    <>
+    <React.Fragment>
       <AppHeader />
       <Main>{children}</Main>
       <Footer />
-    </>
+    </React.Fragment>
   );
 }
 

src/components/LocationCard/LocationCard.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function LocationCard({ name, type, dimension }) {
+  return (
+    <React.Fragment>
+      <div className="col col-12 col-sm-6 col-xl-4 LocationCard">
+        <p>
+          <strong>Planet name: </strong> {name}
+        </p>
+        <p>
+          <strong>Planet type: </strong> {type}
+        </p>
+        <p>
+          <strong>Dimension: </strong> {dimension}
+        </p>
+      </div>
+    </React.Fragment>
+  );
+}

src/components/LocationCard/index.js

@@ -0,0 +1 @@
+export { default } from "./LocationCard";

src/pages/Characters/Character.js

@@ -0,0 +1,80 @@
+import axios from "axios";
+import React, { Component } from "react";
+import CharacterCard from "../../components/CharacterCard";
+import EpisodeCard from "../../components/EpisodeCard/EpisodeCard";
+import Layout from "../../components/Layout";
+import { axiosId, urlArr } from "../../utils/axiosRequest";
+
+export default class Character extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      character: [],
+      episodes: [],
+      hasLoaded: false,
+      hasError: false,
+    };
+    this.loadCharacter = this.loadCharacter.bind(this);
+  }
+  async componentDidMount() {
+    this.loadCharacter();
+  }
+
+  async loadCharacter() {
+    let charId = this.props.match.params.id;
+    console.log(this.props);
+    await axiosId(urlArr[2], charId).then((res) => {
+      const currentCharacter = res.data;
+      this.setState({
+        character: currentCharacter,
+        hasLoaded: true,
+        hasError: false,
+      });
+      axios
+        .all(currentCharacter.episode.map((url) => axios.get(url)))
+        .then((res) => {
+          const episodeList = res.map((epi) => {
+            return epi.data;
+          });
+          this.setState({
+            episodes: episodeList,
+          });
+        });
+    });
+  }
+
+  render() {
+    const { character, hasLoaded, hasError, episodes } = this.state;
+    return (
+      <Layout>
+        {hasLoaded && !hasError && (
+          <section className="row">
+            <div className="col col-12">
+              <h2>Hello!!! {character.name}</h2>
+              <CharacterCard
+                characterId={character.id}
+                image={character.image}
+                name={character.name}
+                species={character.species}
+                status={character.status}
+                origin={character.origin.name}
+                location={character.location.name}
+              />
+            </div>
+            <div className="col col-12">
+              {episodes.map((episode) => (
+                <EpisodeCard
+                  key={episode.id}
+                  episodeId={episode.id}
+                  name={episode.name}
+                  airDate={episode.air_date}
+                  episode={episode.episode}
+                />
+              ))}
+            </div>
+          </section>
+        )}
+      </Layout>
+    );
+  }
+}

src/pages/Characters/index.js

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

src/pages/Episode/Episode.js

@@ -1,26 +1,65 @@
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+// import axiosGet, { urlArr } from "../../utils/axiosRequest";
+import CharacterCard from "../../components/CharacterCard";
+import axios from "axios";
+import EpisodeCard from "../../components/EpisodeCard";
 
 class Episode extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // episode: null,
-    // characters: [],
-    // hasLoaded: false,
-    // hasError: false,
-    // errorMessage: null,
+    this.state = {
+      episode: [],
+      characters: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+
+    this.loadCharacters = this.loadCharacters.bind(this);
+  }
+
+  async componentDidMount() {
+    this.loadCharacters();
+  }
+
+  loadCharacters() {
+    const episodeId = this.props.match.params.id;
+    axios
+      .get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
+      .then((res) => {
+        const currentEpisode = res.data;
+        this.setState({
+          episode: currentEpisode,
+        });
+        axios
+          .all(currentEpisode.characters.map((url) => axios.get(url)))
+          .then((data) => {
+            const mapCharacter = data.map((character) => character.data);
+            this.setState({
+              characters: mapCharacter,
+              hasLoaded: true,
+              hasError: false,
+            });
+          });
+      });
   }
 
   render() {
+    const { episode, characters } = this.state;
     return (
       <Layout>
         <section className="row">
           <div className="col col-12">
-            {/* {characters.map((character) => (
+            <EpisodeCard
+              episodeId={episode.id}
+              name={episode.name}
+              episode={episode.episode}
+              airDate={episode.air_date}
+            />
+            {characters.map((character) => (
               <CharacterCard
                 key={character.id}
                 id={character.id}
@@ -31,7 +70,7 @@ class Episode extends Component {
                 origin={character.origin}
                 location={character.location}
               />
-            ))} */}
+            ))}
           </div>
         </section>
       </Layout>