SOLUTION: Arantza Beitia

.eslintignore

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

src/App.js

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

src/components/ButtonGoBack/ButtonGoBack.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function ButtonGoBack({ path }) {
+  return (
+    <button className="btn btn-outline-info btn-sm mb-1" onClick={path.goBack}>
+      back
+    </button>
+  );
+}
+
+export default ButtonGoBack;

src/components/ButtonGoBack/index.js

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

src/components/CharacterCard/CharacterCard.js

@@ -6,19 +6,27 @@ import "./CharacterCard.scss";
 import * as routes from "../../constants/routes";
 
 function CharacterCard({ id, name, image, species, status, origin, location }) {
+  let locationId = origin.url.split("/");
+  locationId = locationId[locationId.length - 1];
+
   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>
+        {locationId ? (
+          <Link
+            className="CharacterCard__meta-item"
+            to={`${routes.LOCATION}/${locationId}`}
+          >
+            {origin.name}
+          </Link>
+        ) : (
+          <p>Unknown</p>
+        )}
         <p className="CharacterCard__meta-item">|</p>
         <p className="CharacterCard__meta-item">{status}</p>
       </div>

src/components/LocationCard/LocationCard.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+function LocationCard({ name, type, dimension }) {
+  return (
+    <div className="col col-12 col-sm-6 col-xl-3">
+      <h3>{name}</h3>
+      <span>
+        {type} | {dimension}
+      </span>
+    </div>
+  );
+}
+
+export default LocationCard;

src/components/LocationCard/index.js

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

src/pages/Character/Character.js

@@ -0,0 +1,82 @@
+import React from "react";
+import * as routes from "../../constants/routes";
+import axios from "axios";
+
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard";
+import EpisodeCard from "../../components/EpisodeCard/EpisodeCard";
+import ButtonGoBack from "../../components/ButtonGoBack";
+
+class Character extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      character: [],
+      episodes: [],
+      hasLoaded: false,
+    };
+  }
+
+  async componentDidMount() {
+    this.loadCharacter();
+  }
+
+  async loadCharacter() {
+    const characterId = this.props.match.params.id;
+
+    axios
+      .get(`https://rickandmortyapi.com/api${routes.CHARACTER}/${characterId}`)
+      .then((result) => {
+        const newEpisode = result.data.episode;
+
+        axios.all(newEpisode.map((url) => axios.get(url))).then((request) => {
+          const res = request.map((i) => i.data);
+          this.setState({
+            character: result.data,
+            episodes: res,
+            hasLoaded: true,
+          });
+        });
+      })
+      .catch((error) => console.log(error));
+  }
+
+  render() {
+    const { character, episodes, hasLoaded } = this.state;
+    const { history } = this.props;
+    return (
+      <Layout>
+        <section className="row">
+          <div className="col col-12">
+            <ButtonGoBack path={history} />
+          </div>
+          {hasLoaded && (
+            <CharacterCard
+              id={character.id}
+              name={character.name}
+              image={character.image}
+              status={character.status}
+              location={character.location}
+              origin={character.origin}
+            />
+          )}
+          <div className="col col-12">
+            <h5>Episodes</h5>
+          </div>
+          {hasLoaded &&
+            episodes.map((episode) => (
+              <EpisodeCard
+                key={episode.id}
+                id={episode.id}
+                name={episode.name}
+                airDate={episode.air_date}
+                episode={episode.episode}
+              />
+            ))}
+        </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,64 @@
 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 EpisodeCard from "../../components/EpisodeCard";
+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: [],
+      characters: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+  }
+
+  async componentDidMount() {
+    this.loadCharacters();
+  }
+
+  async loadCharacters() {
+    let episodeId = this.props.match.params.id;
+    const EPISODE_URL = `https://rickandmortyapi.com/api${routes.EPISODE}/${episodeId}`;
+
+    axios
+      .get(EPISODE_URL)
+      .then((result) => {
+        const newCharacters = result.data.characters;
+        const newEpisode = result.data;
+
+        axios.all(newCharacters.map((url) => axios.get(url))).then((data) => {
+          const res = data.map((i) => i.data);
+
+          this.setState({
+            episode: newEpisode,
+            characters: res,
+            hasLoaded: true,
+          });
+        });
+      })
+      .catch((error) => console.log(error));
   }
 
   render() {
+    const { characters, episode, hasLoaded } = this.state;
     return (
       <Layout>
+        <EpisodeCard
+          id={episode.id}
+          name={episode.name}
+          airDate={episode.air_date}
+          episode={episode.episode}
+        />
         <section className="row">
-          <div className="col col-12">
-            {/* {characters.map((character) => (
+          {hasLoaded &&
+            characters.map((character) => (
               <CharacterCard
                 key={character.id}
                 id={character.id}
@@ -31,8 +69,7 @@ class Episode extends Component {
                 origin={character.origin}
                 location={character.location}
               />
-            ))} */}
-          </div>
+            ))}
         </section>
       </Layout>
     );

src/pages/Home/Home.js

@@ -1,52 +1,98 @@
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
+import axios from "axios";
+import * as routes from "../../constants/routes";
 
 class Home extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-    // page: 1,
-    // paginationInfo: null,
-    // episodes: [],
-    // hasLoaded: false,
-    // hasError: false,
-    // errorMessage: null,
+    this.state = {
+      page: 1,
+      paginationInfo: 1,
+      episodes: [],
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
   }
 
   async componentDidMount() {
-    // this.loadEpisodes();
+    const { page } = this.state;
+    this.loadEpisodes(page);
   }
 
-  async loadEpisodes() {
-    console.log(this);
+  async componentDidUpdate() {
+    const { page, paginationInfo } = this.state;
+
+    if (page !== paginationInfo) {
+      this.loadEpisodes(page);
+    }
+  }
+
+  async loadEpisodes(page) {
+    const EPISODES_URL = `https://rickandmortyapi.com/api${routes.EPISODE}?page=${page}`;
+    axios
+      .get(EPISODES_URL)
+      .then((response) => {
+        const newEpisodes = response.data.results;
+        this.setState({ episodes: newEpisodes, hasLoaded: true });
+      })
+      .catch((error) => {
+        this.setState({ hasError: true });
+        console.log(error);
+      });
   }
 
+  prevPage = () => {
+    this.setState({ page: this.state.page - 1 });
+  };
+
+  nextPage = () => {
+    this.setState({ page: this.state.page + 1 });
+  };
+
   render() {
+    const { episodes, hasLoaded, hasError, page } = this.state;
     return (
       <Layout>
         <section className="row">
-          {/* {hasLoaded && !hasError && (
+          {hasLoaded && !hasError && (
             <div className="col col-12">
               <h1>Episodes loaded!</h1>
             </div>
-          )} */}
+          )}
           <div className="col col-12">
             <hr />
           </div>
-          {/* {episodes.map((episode) => (
-              <EpisodeCard
-                key={episode.id}
-                id={episode.id}
-                name={episode.name}
-                airDate={episode.air_date}
-                episode={episode.episode}
-              />
-            ))} */}
+          {episodes.map((episode) => (
+            <EpisodeCard
+              key={episode.id}
+              id={episode.id}
+              name={episode.name}
+              airDate={episode.air_date}
+              episode={episode.episode}
+            />
+          ))}
           <div className="col col-12">
             <hr />
+            <div className="text-center">
+              {page > 1 && (
+                <button className="btn btn-primary" onClick={this.prevPage}>
+                  Prev
+                </button>
+              )}
+              {page < 3 && (
+                <button
+                  className="btn btn-primary ml-1"
+                  onClick={this.nextPage}
+                >
+                  Next
+                </button>
+              )}
+            </div>
           </div>
         </section>
       </Layout>