Solution: Paúl Molano

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";
+
+export default App;
 
 function App() {
-  return <Home />;
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/episode/:episodeId" component={Episode} />
+        <Route exact path="/character/:characterId" component={Character} />
+        <Route exact path="/location/:locationId" component={Location} />
+        <Route exact path="/" component={Home} />
+      </Switch>
+    </Router>
+  );
 }
-
-export default App;

src/components/CharacterCard/CharacterCard.js

@@ -5,7 +5,19 @@ 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,
+  locationUrl,
+}) {
+  const splitLocation = locationUrl.split("/");
+  const num = splitLocation[splitLocation.length - 1];
+
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />
@@ -15,9 +27,9 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
       <div className="CharacterCard__meta">
         <Link
           className="CharacterCard__meta-item"
-          to={`${routes.LOCATION}/${id}`}
+          to={`${routes.LOCATION}/${num}`}
         >
-          {origin.name}
+          {location}
         </Link>
         <p className="CharacterCard__meta-item">|</p>
         <p className="CharacterCard__meta-item">{status}</p>

src/components/CharacterCard2/CharacterCard2.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import "./CharacterCard2.scss";
+
+import * as routes from "../../constants/routes";
+
+function CharacterCard({
+  id,
+  name,
+  image,
+  species,
+  status,
+  origin,
+  location,
+  locationUrl,
+}) {
+  const splitLocation = locationUrl.split("/");
+  const num = splitLocation[splitLocation.length - 1];
+
+  return (
+    <div className="card mb-3">
+      <div className="row g-0">
+        <div className="col-md-4">
+          <img src={image} className="img-fluid rounded-start" alt="..." />
+        </div>
+        <div className="col-md-8">
+          <div className="card-body">
+            <h5 className="card-title">{name}</h5>
+            <Link
+              className="CharacterCard__meta-item"
+              to={`${routes.LOCATION}/${num}`}
+            >
+              Location - {location}
+            </Link>
+            <p className="card-text">Status - {status}</p>
+            <p className="card-text">Origin - {origin.name}</p>
+            <p className="card-text">
+              <small className="text-muted">Specie - {species}</small>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CharacterCard;

src/components/CharacterCard2/CharacterCard2.scss

@@ -0,0 +1,23 @@
+.CharacterCard {
+  margin-bottom: 1.5rem;
+
+  &__img {
+    display: block;
+    width: 100%;
+    border-radius: 3px;
+    height: auto;
+    max-height: 16rem;
+    object-fit: cover;
+  }
+
+  &__name {
+    margin: 0.75rem 0;
+  }
+
+  &__meta {
+    display: flex;
+    &-item {
+      margin-right: 0.5rem;
+    }
+  }
+}

src/components/CharacterCard2/index.js

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

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/constants/routes.js

@@ -3,3 +3,4 @@ export const EPISODES = "/episodes";
 export const EPISODE = "/episode";
 export const LOCATION = "/location";
 export const CHARACTER = "/character";
+export const API = "https://rickandmortyapi.com/api";

src/pages/Character/Character.js

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import axios from "axios";
+import * as Routes from "../../constants/routes";
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard2";
+import EpisodeCard from "../../components/EpisodeCard";
+
+class Character extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      character: [],
+      episodes: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+  }
+
+  async componentDidMount() {
+    await this.loadCharacter();
+  }
+
+  async loadCharacter() {
+    const { match } = this.props;
+    const num = match.params.characterId;
+
+    try {
+      const res = await axios.get(`${Routes.API}${Routes.CHARACTER}/${num}`);
+      const arr = await axios.all(res.data.episode.map((e) => axios.get(e)));
+      const arr2 = arr.map((e) => e.data);
+      this.setState({
+        character: res.data,
+        episodes: arr2,
+        hasLoaded: true,
+      });
+    } catch (e) {
+      this.setState({
+        hasError: true,
+        errorMessage: "Error, page not loaded",
+      });
+    }
+  }
+
+  render() {
+    const {
+      character,
+      episodes,
+      hasError,
+      errorMessage,
+      hasLoaded,
+    } = this.state;
+
+    return (
+      <Layout>
+        {hasLoaded && !hasError && (
+          <section className="row">
+            <div className="col col-12">
+              <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.name}
+                locationUrl={character.location.url}
+              />
+            </div>
+            {episodes.map((episode) => (
+              <EpisodeCard
+                key={episode.id}
+                episodeId={episode.id}
+                name={episode.name}
+                airDate={episode.air_date}
+                episode={episode.episode}
+              />
+            ))}
+          </section>
+        )}
+        {hasError && (
+          <div className="col col-12">
+            <h1>{errorMessage}</h1>
+          </div>
+        )}
+      </Layout>
+    );
+  }
+}
+
+export default Character;

src/pages/Character/index.js

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

src/pages/Episode/Episode.js

@@ -1,38 +1,82 @@
 import React, { Component } from "react";
-
+import axios from "axios";
+import * as Routes from "../../constants/routes";
 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 = {
+      characters: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+      episodeName: "",
+    };
+  }
+
+  async componentDidMount() {
+    await this.loadCharacters();
+  }
+
+  async loadCharacters() {
+    const { match } = this.props;
+    const num = match.params.episodeId;
+    try {
+      const res = await axios.get(`${Routes.API}${Routes.EPISODE}/${num}`);
+      const arr = await axios.all(res.data.characters.map((e) => axios.get(e)));
+      const arr2 = arr.map((e) => e.data);
+      this.setState({
+        characters: arr2,
+        hasLoaded: true,
+        episodeName: res.data.name,
+      });
+    } catch (e) {
+      this.setState({
+        hasError: true,
+        errorMessage: "Error, page not loaded",
+      });
+    }
   }
 
   render() {
+    const {
+      characters,
+      hasLoaded,
+      hasError,
+      errorMessage,
+      episodeName,
+    } = 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}
-              />
-            ))} */}
-          </div>
+          {hasLoaded && !hasError && (
+            <div>
+              <p className="h1 block text-center mb-4">{episodeName}</p>
+              <div className="row">
+                {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.name}
+                    locationUrl={character.location.url}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+          {hasError && (
+            <div className="row">
+              <h1>{errorMessage}</h1>
+            </div>
+          )}
         </section>
       </Layout>
     );