assembler-institute · badyalberto · Oct 1, 2021 · Oct 4, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,4 @@
-module.exports = {
+/* module.exports = {
   env: {
     browser: true,
     es2021: true,
@@ -61,3 +61,4 @@ module.exports = {
     "react/prop-types": "off",
   },
 };
+ */
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,10 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/material": "^5.0.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -21,6 +25,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "sass": "^1.32.11",
+    "styled-components": "^5.3.1",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,16 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <!--ROBOTO Font-->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <!---->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,32 @@
 import React from "react";
-
+import { Route, Switch } from "react-router-dom";
 import Home from "./pages/Home";
+import * as routes from "./constants/routes";
+
+import Episode from "./pages/Episode/Episode";
+import Character from "./pages/Character";
+import Location from "./pages/Location/Location";
 
 function App() {
-  return <Home />;
+  return (
+    <Switch>
+      <Route
+        exact
+        path={`${routes.LOCATION}/:locationId`}
+        component={Location}
+      />
+      <Route exact path={`${routes.EPISODE}/:episodeId`} component={Episode} />
+      <Route
+        exact
+        path={`${routes.CHARACTER}/:characterId`}
+        component={Character}
+      />
+      <Route exact path={routes.HOME} component={Home} />
+      <Route path="*" component={Home} />
+    </Switch>
+  );
+
+  /*   return <Home />; */
 }
 
 export default App;
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
@@ -6,6 +6,8 @@ import "./CharacterCard.scss";
 import * as routes from "../../constants/routes";
 
 function CharacterCard({ id, name, image, species, status, origin, location }) {
+  const url = origin.url.split("/");
+
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />
@@ -15,7 +17,7 @@ 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}/${url[url.length - 1]}`}
         >
           {origin.name}
         </Link>

diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
@@ -1,6 +1,7 @@
 import React from "react";
 
 function Main({ children, ...props }) {
+
   return (
     <main className="container" {...props}>
       {children}

diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
@@ -0,0 +1,108 @@
+import React from "react";
+import Layout from "../../components/Layout";
+import EpisodeCard from "../../components/EpisodeCard";
+
+class Character extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      episodes: [],
+      character: null,
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+  }
+
+  async componentDidMount() {
+    const {
+      match: { params },
+    } = this.props;
+
+    try {
+      const response = await fetch(
+        `https://rickandmortyapi.com/api/character/${params.characterId}`,
+      );
+      const json = await response.json();
+
+      console.log(json);
+
+      this.setState({
+        character: json,
+      });
+
+      let episodes = await Promise.all(
+        json.episode.map(async (url) => {
+          const response = await fetch(url);
+          return response.json();
+        }),
+      );
+
+      console.log(episodes);
+
+      this.setState({
+        episodes: episodes,
+        hasLoaded: true,
+      });
+    } catch (error) {
+      this.setState({
+        hasError: true,
+      });
+    }
+  }
+
+  render() {
+    const { character, episodes, hasLoaded, hasError } = this.state;
+    return (
+      <Layout>
+        {hasLoaded && !hasError && (
+          <section className="row">
+            <div className="col row">
+              <div className="col col-12 col-lg-3 mb-3">
+                <img className="CharacterCard__img" src={character.image} />
+              </div>
+              <div className="col col-12 col-lg-9">
+                <div className="col col-12">
+                  <h1>{character.name}</h1>
+                  <hr />
+                </div>
+                <div className="col col-12 ">
+                  <div className="mb-3">
+                    <h6>CHARACTER</h6>
+                    {character.species} | {character.status}
+                  </div>
+                  <div className="d-inline-block pr-3 pb-3">
+                    <h6>ORIGIN</h6>
+                    {character.origin.name}
+                  </div>
+                  <div className="d-inline-block">
+                    <h6>LOCATION</h6>
+                    {character.location.name}
+                  </div>
+                </div>
+              </div>
+              <hr />
+            </div>
+
+            <div className="col col-12 pb-3">
+              <hr />
+              <h5>Episodes</h5>
+            </div>
+            {episodes.map((episode) => (
+              <EpisodeCard
+                key={episode.id}
+                id={episode.id}
+                name={episode.name}
+                airDate={episode.air_date}
+                episode={episode.episode}
+                characters={episode.characters}
+              />
+            ))}
+          </section>
+        )}
+      </Layout>
+    );
+  }
+}
+
+export default Character;
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export { default } from "./Character";
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
@@ -1,38 +1,80 @@
 import React, { Component } from "react";
 
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
+import { FaceRetouchingNatural } from "@mui/icons-material";
 
 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() {
+    const {
+      match: { params },
+    } = this.props;
+
+    try {
+      const response = await fetch(
+        `https://rickandmortyapi.com/api/episode/${params.episodeId}`,
+      );
+      const json = await response.json();
+
+      this.setState({
+        episode: json,
+      });
+
+      let characters = await Promise.all(
+        json.characters.map(async (url) => {
+          const response = await fetch(url);
+          return response.json();
+        }),
+      );
+
+      this.setState({
+        characters: characters,
+        hasLoaded: true,
+      });
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   render() {
+    const { characters, episode } = 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}
-              />
-            ))} */}
+            <h1>{episode && episode.name}</h1>
+            <hr />
+          </div>
+          <div className="col col-12">
+            <h6>
+              {episode && episode.episode} | {episode && episode.air_date}
+            </h6>
+            <hr />
           </div>
+          {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}
+            />
+          ))}
         </section>
       </Layout>
     );