assembler-institute · Jose1i1o · Oct 7, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      rel="icon"
+      href="https://rickandmortyapi.com/favicon-32x32.png?v=1538abef51e33ef514e8fe1ab9aeab4e"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,31 @@
 import React from "react";
+import { Switch, Route } from "react-router-dom";
+
+import { EPISODE, HOME, CHARACTER, LOCATION } 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 (
+    <Switch>
+      <Route
+        path={`${LOCATION}/:locationId`}
+        render={(routeProps) => <Location {...routeProps} key={Date.now()} />}
+      />
+      <Route
+        path={`${CHARACTER}/:characterId`}
+        render={(routeProps) => <Character {...routeProps} />}
+      />
+      <Route
+        path={`${EPISODE}/:episodeId`}
+        render={(routeProps) => <Episode {...routeProps} />}
+      />
+      <Route path={HOME} render={(routeProps) => <Home {...routeProps} />} />
+    </Switch>
+  );
 }
 
 export default App;
diff --git a/src/AppHeader/AppHeader.js b/src/AppHeader/AppHeader.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import * as routes from "../../constants/routes";
+
+function AppHeader({ ...props }) {
+  return (
+    <header className="bg-primary mb-4" {...props}>
+      <div className="container">
+        <div className="row">
+          <nav className="navbar navbar-expand navbar-dark">
+            <ul className="navbar-nav mr-auto">
+              <li className="nav-item">
+                <NavLink
+                  className="nav-link"
+                  activeClassName="active"
+                  to={routes.HOME}
+                >
+                  Home
+                </NavLink>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default AppHeader;
diff --git a/src/AppHeader/index.js b/src/AppHeader/index.js
@@ -0,0 +1 @@
+export { default } from "./AppHeader";
diff --git a/src/CharacterCard/CharacterCard.js b/src/CharacterCard/CharacterCard.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import "./CharacterCard.scss";
+
+import * as routes from "../../constants/routes";
+
+function CharacterCard({
+  id,
+  name,
+  image,
+  species,
+  status,
+  origin,
+  location,
+  extraInfo,
+}) {
+  function locationEndPoint(data) {
+    const endPoint = data.split("/");
+    return endPoint[endPoint.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}/${locationEndPoint(origin.url)}`}
+        >
+          {origin.name}
+        </Link>
+        <p className="CharacterCard__meta-item">|</p>
+        <p className="CharacterCard__meta-item">{species}</p>
+      </div>
+      {extraInfo && (
+        <div className="CharacterCard__meta">
+          <p className="CharacterCard__meta-item">{status}</p>
+          <p className="CharacterCard__meta-item">|</p>
+          <p className="CharacterCard__meta-item">{location.name}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CharacterCard;
diff --git a/src/CharacterCard/CharacterCard.scss b/src/CharacterCard/CharacterCard.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;
+    }
+  }
+}
diff --git a/src/CharacterCard/index.js b/src/CharacterCard/index.js
@@ -0,0 +1 @@
+export { default } from "./CharacterCard";
diff --git a/src/EpisodeCard/EpisodeCard.js b/src/EpisodeCard/EpisodeCard.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import "./EpisodeCard.scss";
+
+import * as routes from "../../constants/routes";
+
+function EpisodeCard({ id, name, airDate, episode }) {
+  return (
+    <div className="col col-12 col-sm-6 col-xl-4 EpisodeCard">
+      <Link to={`${routes.EPISODE}/${id}`}>
+        <h3 className="Episode__name h5">{name}</h3>
+      </Link>
+      <div className="Episode__meta">
+        <p className="Episode__meta-item">{airDate}</p>
+        <p className="Episode__meta-item">|</p>
+        <p className="Episode__meta-item">{episode}</p>
+      </div>
+    </div>
+  );
+}
+
+export default EpisodeCard;
diff --git a/src/EpisodeCard/EpisodeCard.scss b/src/EpisodeCard/EpisodeCard.scss
@@ -0,0 +1,21 @@
+.Episode {
+  &__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;
+    }
+  }
+}
diff --git a/src/EpisodeCard/index.js b/src/EpisodeCard/index.js
@@ -0,0 +1 @@
+export { default } from "./EpisodeCard";
diff --git a/src/Footer/Footer.js b/src/Footer/Footer.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+function Footer() {
+  return (
+    <footer className="py-5 mt-5 bg-dark text-white container-fluid">
+      <div className="row">
+        <div className="col col-12 text-center">
+          <p className="m-0">
+            Assembler School &copy; {new Date().getFullYear()}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/src/Footer/index.js b/src/Footer/index.js
@@ -0,0 +1 @@
+export { default } from "./Footer";
diff --git a/src/Layout/Layout.js b/src/Layout/Layout.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+import AppHeader from "../AppHeader";
+import Main from "../Main";
+import Footer from "../Footer";
+
+function Layout({ children }) {
+  return (
+    <>
+      <AppHeader />
+      <Main>{children}</Main>
+      <Footer />
+    </>
+  );
+}
+
+export default Layout;
diff --git a/src/Layout/index.js b/src/Layout/index.js
@@ -0,0 +1 @@
+export { default } from "./Layout";
diff --git a/src/Main/Main.js b/src/Main/Main.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Main({ children, ...props }) {
+  return (
+    <main className="container" {...props}>
+      {children}
+    </main>
+  );
+}
+
+export default Main;
diff --git a/src/Main/index.js b/src/Main/index.js
@@ -0,0 +1 @@
+export { default } from "./Main";
diff --git a/src/SingleCharacter/SingleCharacter.js b/src/SingleCharacter/SingleCharacter.js
@@ -0,0 +1,35 @@
+import React from "react";
+
+import "./SingleCharacter.scss";
+
+function SingleCharacter({ image, name, species, status, origin, location }) {
+  return (
+    <>
+      <div className="col col-12 col-sm-6 col-xl-3">
+        <img className="CharacterCard__img" src={image} alt="" />
+      </div>
+      <div className="col">
+        <h3 className="CharacterCard__name h4">{name}</h3>
+        <hr />
+        <div>
+          <h4 className="CharacterCard__name h6 mb-0 bold">CHARACTER</h4>
+          <p>
+            {species} | {status}
+          </p>
+        </div>
+        <div className="d-flex">
+          <div className="me-2">
+            <h4 className="CharacterCard__name h6 mb-0">ORIGIN</h4>
+            <p>{origin}</p>
+          </div>
+          <div>
+            <h4 className="CharacterCard__name h6 mb-0">LOCATION</h4>
+            <p>{location}</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SingleCharacter;
diff --git a/src/SingleCharacter/SingleCharacter.scss b/src/SingleCharacter/SingleCharacter.scss
@@ -0,0 +1,3 @@
+.me-2 {
+  margin-right: 20px;
+}
diff --git a/src/SingleCharacter/index.js b/src/SingleCharacter/index.js
@@ -0,0 +1 @@
+export { default } from "./SingleCharacter";
diff --git a/src/api/api.js b/src/api/api.js
@@ -0,0 +1,27 @@
+import axios from "axios";
+
+export function makeApi() {
+  return axios.create({
+    baseURL: "https://rickandmortyapi.com/api/",
+  });
+}
+
+export function getEpisodes(page = 1, api = makeApi()) {
+  return api.get(`/episode?page=${page}`);
+}
+
+export function getEpisode(episodeId = 1, api = makeApi()) {
+  return api.get(`/episode/${episodeId}`);
+}
+
+export function getCharacter(characterId = 1, api = makeApi()) {
+  return api.get(`/character/${characterId}`);
+}
+
+export function getLocation(locationId = 1, api = makeApi()) {
+  return api.get(`/location/${locationId}`);
+}
+
+export function getUrl(url, api = makeApi()) {
+  return api.get(url);
+}
diff --git a/src/api/index.js b/src/api/index.js
@@ -0,0 +1 @@
+export * from "./api";