Solution: Christian Herrero

package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "sass": "^1.32.11",
+    "url-search-params-polyfill": "^8.1.1",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {

src/App.js

@@ -1,9 +1,30 @@
 import React from "react";
-
+import { 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 (
+    <Switch>        
+      <Route path="/episode" render={(props) => (
+        <Episode {...props} />
+      )} />
+
+      <Route path="/character" render={(props) => (
+        <Character {...props} />
+      )} />
+
+      <Route path="/location" render={(props) => (
+        <Location {...props} />
+      )} />
+
+      <Route path="/" render={(props) => (
+        <Home {...props} />
+      )} />
+    </Switch>
+  );
 }
 
 export default App;

src/api/index.js

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+export async function makeRequest(url) {
+  try {
+    const response = await axios.get(url);
+    return [response , false];
+  } catch (error) {
+    return [null , error];
+  }
+}

src/components/CharacterCard/CharacterCard.js

@@ -5,23 +5,40 @@ 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, location, showMoreDetails = false }) {
   return (
-    <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
+    <div className="col col-12 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">
+        <p><strong>Origin: </strong>
         <Link
           className="CharacterCard__meta-item"
           to={`${routes.LOCATION}/${id}`}
         >
           {origin.name}
         </Link>
+        </p>
         <p className="CharacterCard__meta-item">|</p>
-        <p className="CharacterCard__meta-item">{status}</p>
+        <p className="CharacterCard__meta-item"><strong>Status: </strong>{status}</p>
       </div>
+
+      {showMoreDetails && (
+          <div className="CharacterCard__meta">
+            <p><strong>Location: </strong> 
+            <Link
+              className="CharacterCard__meta-item"
+              to={`${routes.LOCATION}/${id}`}
+            >
+              {location.name}
+            </Link>
+            </p>
+            <p className="CharacterCard__meta-item">|</p>
+            <p className="CharacterCard__meta-item"><strong>Specie: </strong> {species}</p>
+          </div>  
+        )}
     </div>
   );
 }

src/pages/Character/Character.js

@@ -0,0 +1,129 @@
+import React, { Component } from "react";
+import { Link } from 'react-router-dom';
+import * as routes from "../../constants/routes";
+
+import Layout from "../../components/Layout";
+import EpisodeCard from "../../components/EpisodeCard";
+import { makeRequest } from '../../api';
+
+class Character extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      character: {
+        image: null,
+        name: null,
+        species: null,
+        status: null,
+        origin: null,
+        location: null
+      },
+      episodes: [],
+      hasError: false,
+      hasLoaded: false
+    }
+  }
+
+  async componentDidMount() {
+    // Get episode ID by regex, best would be by query param in URL
+    const path = window.location.pathname
+    const id = path.match(/(\d.*$)/)[0]
+
+    const [response, error] = await makeRequest(`https://rickandmortyapi.com/api/character/${id}`)
+
+    if (!error) {
+      const {data} = response
+      const promises = data.episode.map(url => makeRequest(url))
+
+      const characterLocation = await makeRequest(data.location.url)
+
+      const character = {
+        image: data.image,
+        name: data.name,
+        species: data.species,
+        status: data.status,
+        origin: data.origin,
+        location: characterLocation[0].data 
+      }
+
+      Promise.all(promises)
+      .then(responses => ( 
+        this.setState({
+          character: character,
+          episodes: responses.map(res => res[0].data),
+          hasLoaded: true,
+          hasError: false
+        })
+      ))
+
+    } else {
+      this.setState({
+        hasLoaded: false,
+        hasError: true
+      })
+    }
+  }
+
+  render() {
+
+    const {character, episodes, hasError, hasLoaded} = this.state
+    return(
+      <Layout>
+        <section className="row">
+          <div className="col col-12">
+            {!hasLoaded && (<h1>Loading...</h1>)}
+            {hasError && (<h1>API error</h1>)}
+
+            {!hasError && hasLoaded && (
+              <div className="card justify-content-between flex-md-row">
+                  <img className="img-fluid" src={character.image} alt={character.name} />
+                  <div className="card-body">
+                      <h3 className="card-title">{character.name}</h3>
+                      <hr/>
+                      <div className="card-text">
+                        <h5 className="text-bold">Character</h5>
+                        <p>{character.species} | {character.status}</p>
+                      </div>
+                      <div className="card-text">
+                        <h5 className="text-bold">Origin</h5>
+                        <p>{character.origin.name}</p>
+                      </div>
+                      <div className="card-text">
+                        <h5 className="text-bold">Location</h5>
+                        <p><Link to={`${routes.LOCATION}/${character.location.id}`}>{character.location.name}</Link></p>
+                      </div>
+                  </div>
+              </div>
+            )}
+          </div>
+
+          <div className="col col-12">
+            <hr />
+          </div>
+
+          {episodes.length > 0 && (
+              <div className="col col-12">
+                <ul className="row list-group-flush pl-0">
+                {episodes.map(episode => (
+                  <li className="col-md-6 col-sm-12 list-group-item" key={episode.id}>
+                      <EpisodeCard
+                        key={episode.id}
+                        id={episode.id}
+                        name={episode.name}
+                        airDate={episode.air_date}
+                        episode={episode.episode}
+                        />
+                  </li>
+                ))}
+                </ul>
+              </div>
+          )}
+
+        </section>
+      </Layout>
+    )
+  }
+}
+
+export default Character

src/pages/Character/index.js

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

src/pages/Episode/Episode.js

@@ -1,26 +1,61 @@
 import React, { Component } from "react";
+import { makeRequest } from '../../api'
 
 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() {
+    // Get episode ID by regex, best would be by query param in URL
+    const path = window.location.pathname
+    const id = path.match(/(\d.*$)/)[0]
+
+    const [response, error] = await makeRequest(`https://rickandmortyapi.com/api/episode/${id}`)
+
+    if (!error) {
+      const {data} = response
+      const promises = data.characters.map(url => makeRequest(url))
+      Promise.all(promises)
+      .then(responses => (
+        this.setState({
+          episode: data.episode,
+          characters: responses.map(res => res[0].data),
+          hasLoaded: true,
+          hasError: false
+        })
+      ))
+    } else {
+      this.setState({
+        hasLoaded: false,
+        hasError: true
+      })
+    }
   }
 
   render() {
+
+    const {characters, episode, hasLoaded, hasError, errorMessage} = this.state
+
     return (
       <Layout>
         <section className="row">
           <div className="col col-12">
-            {/* {characters.map((character) => (
+            {!hasLoaded && (<h1>Loading...</h1>)}
+            {hasError && (<h1>API error</h1>)}
+
+            {characters.length > 0 && hasLoaded && characters.map((character) => (
               <CharacterCard
                 key={character.id}
                 id={character.id}
@@ -31,7 +66,7 @@ class Episode extends Component {
                 origin={character.origin}
                 location={character.location}
               />
-            ))} */}
+            ))}
           </div>
         </section>
       </Layout>