Solution: Erick Noiztbander

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
     },
   ],
   rules: {
+    // "prettier/prettier": ["error", { endOfLine: "auto", },],
     "react/jsx-filename-extension": "off",
     "import/prefer-default-export": "off",
     "prefer-destructuring": "off",
@@ -59,5 +60,6 @@ module.exports = {
     "no-underscore-dangle": "off",
     "react/forbid-prop-types": "off",
     "react/prop-types": "off",
+    "no-console":"off",
   },
 };

package.json

@@ -44,7 +44,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.2.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-markdown": "^2.2.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",

src/App.js

@@ -1,9 +1,38 @@
 import React from "react";
 
+import { Switch, Route } from "react-router-dom";
+
+import {
+  CHARACTER,
+  EPISODE,
+  // EPISODES,
+  HOME,
+  LOCATION,
+} from "./constants/routes";
+
 import Home from "./pages/Home";
+import Episode from "./pages/Episode";
+import CharacterPage from "./pages/Character";
+import LocationPage from "./pages/LocationPage";
 
 function App() {
-  return <Home />;
+  return (
+    <Switch>
+      <Route
+        path={`${EPISODE}/:episodeId`}
+        render={(routeProps) => <Episode {...routeProps} />}
+      />
+      <Route
+        path={`${CHARACTER}/:characterId`}
+        render={(routeProps) => <CharacterPage {...routeProps} />}
+      />
+      <Route
+        path={`${LOCATION}/:locationId`}
+        render={(routeProps) => <LocationPage {...routeProps} />}
+      />
+      <Route path={HOME} render={(routeProps) => <Home {...routeProps} />} />
+    </Switch>
+  );
 }
 
 export default App;

src/api/api.js

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+export function makeApi() {
+  return axios.create({
+    baseURL: "https://rickandmortyapi.com/api",
+    timeout: 1000,
+  });
+}
+
+export function getEpisodes(page = 1, api = makeApi()) {
+  return api.get(`/episode?page=${page}`);
+}
+
+export function getEpisode(episodeId, api = makeApi()) {
+  return api.get(`/episode/${episodeId}`);
+}
+export function getCharacters(characterId, api = makeApi()) {
+  return api.get(`/character/${characterId}`);
+}
+export function getLocation(locationId, api = makeApi()) {
+  return api.get(`/location/${locationId}`);
+}
+
+export function getUrl(url, api = makeApi()) {
+	return api.get(url);
+}

src/api/index.js

@@ -0,0 +1 @@
+export * from "./api";

src/components/EpisodeCard/EpisodeCard.js

@@ -1,6 +1,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
+// import { axios } from "axios";
+
+// import { getCharacters } from "../../api";
+
 import "./EpisodeCard.scss";
 
 import * as routes from "../../constants/routes";

src/pages/Character/characterPage.js

@@ -0,0 +1,159 @@
+import React, { Component } from "react";
+
+import Layout from "../../components/Layout";
+
+import { getCharacters, getUrl } from "../../api";
+
+import "../../components/CharacterCard/CharacterCard.scss";
+
+import EpisodeCard from "../../components/EpisodeCard";
+
+import * as routes from "../../constants/routes";
+
+function makePromises(urls = []) {
+  const myArray = urls.map((url) => getUrl(url));
+  // console.log(myArray);
+  return myArray;
+}
+
+class CharacterPage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      episodes: [],
+      name: "",
+      image: "",
+      species: "",
+      status: "",
+      origin: "",
+      location: "",
+      hasLoaded: false,
+      hasError: false,
+      errorMessage: null,
+    };
+    this.loadCharacters = this.loadCharacters.bind(this);
+  }
+
+  componentDidMount() {
+    // console.log(this);
+
+    const { match } = this.props;
+    const { characterId } = match.params;
+
+    // console.log(characterId);
+    this.loadCharacters(characterId);
+  }
+
+  async loadCharacters(characterId) {
+    // console.log(this);
+    try {
+      const { data } = await getCharacters(characterId);
+
+      // eslint-disable-next-line compat/compat
+      const characterEpisodes = await Promise.all(
+        makePromises(data.episode),
+      );
+
+      const episodesFromCharacter = characterEpisodes.map((character) => character.data);
+
+      console.log(episodesFromCharacter);
+
+      this.setState({
+        episodes: episodesFromCharacter,
+        name: data.name,
+        image: data.image,
+        species: data.species,
+        status: data.status,
+        origin: data.origin.name,
+        location: data.location.name,
+        hasLoaded: true,
+        hasError: false,
+        errorMessage: null,
+
+      });
+
+      console.log(data);
+    } catch (error) {
+      this.setState({
+        hasLoaded: true,
+        hasError: true,
+        errorMessage: error.message,
+      });
+    }
+  }
+
+  render() {
+    const {
+      episodes,
+      name,
+      image,
+      species,
+      status,
+      origin,
+      location,
+      hasLoaded,
+      hasError,
+      errorMessage,
+    } = this.state;
+
+    return (
+      <Layout>
+        <section className="container">
+          {!hasLoaded && (
+            <section className="row">
+              <div className="col col-12">
+                <h1 className="h3">Loading data...</h1>
+              </div>
+            </section>
+          )}
+          {hasError && (
+            <section className="row">
+              <div className="col col-12">
+                <h1>Something went wrong...</h1>
+                <p>{errorMessage}</p>
+              </div>
+            </section>
+          )}
+            <section className="row row-12 row-sm-6 row-xl-3 CharacterCard">
+              <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
+                <img className="CharacterCard__img" src={image} alt="" />
+              </div>
+              <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
+                <h3 className="CharacterCard__name h4">{name}</h3>
+                <hr />
+                <div>
+                  <h6>CHARACTER</h6>
+                  <p className="CharacterCard__meta-item"> {species} | {status}</p>
+                </div>
+                <div className="CharacterCard__meta">
+                  <div className="CharacterCard">
+                    <h6>ORIGIN</h6>
+                    <p className="CharacterCard__meta-item">{origin}</p>
+                  </div>
+                  <div className="CharacterCard">
+                    <h6>LOCATION</h6>
+                    <p className="CharacterCard__meta-item">{location}</p>
+                  </div>
+                </div>
+              </div>
+            </section>
+            <hr />
+            <section className="row">
+              {episodes.length > 0 &&
+              episodes.map((episode) => (
+                <EpisodeCard
+                  key={episode.id}
+                  id={episode.id}
+                  name={episode.name}
+                  airDate={episode.air_date}
+                  episode={episode.episode}
+                />
+              ))}
+            </section>
+          </section>
+      </Layout>
+    );
+  }
+}
+export default CharacterPage;

src/pages/Character/index.js

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