Solution : Jon Croatan - Einar

src/App.js

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

src/components/CharacterCard/CharacterCard.js

@@ -1,11 +1,14 @@
 import React from "react";
 import { Link } from "react-router-dom";
-
 import "./CharacterCard.scss";
-
+import { func } from "prop-types";
 import * as routes from "../../constants/routes";
 
+
+
+
 function CharacterCard({ id, name, image, species, status, origin, location }) {
+
   return (
     <div className="col col-12 col-sm-6 col-xl-3 CharacterCard">
       <img className="CharacterCard__img" src={image} alt="" />

src/components/EpisodeCard/EpisodeCard.js

@@ -2,7 +2,6 @@ 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 }) {

src/components/api/api.js

@@ -0,0 +1,33 @@
+import axios from "axios";
+import * as rout from "../../constants/routes";
+
+
+ function makeAPI() {
+    return axios.create({
+        baseURL:"https://rickandmortyapi.com/api",
+    });   
+}
+
+export function getEpisodesP(page =1, api=makeAPI()){
+
+    return  api.get(`${rout.EPISODE}?page=${page}`)
+}
+
+export function getEpisode(episodeId, api=makeAPI()){
+
+    return  api.get(`${rout.EPISODE}/${episodeId}`)
+}
+export function getUrls(url){
+
+    return  axios.get(`${url}`)
+}
+
+export function getCharacter(caracterId, api=makeAPI()){
+
+    return  api.get(`${rout.CHARACTER}/${caracterId}`)
+}
+
+export function getLocation(locationId, api=makeAPI()){
+
+    return  api.get(`${rout.LOCATION}/${locationId}`)
+}

src/components/api/index.js

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

src/pages/Character/Character.js

@@ -0,0 +1,143 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+// import { getEpisode, getCharacters } from "../../components/api/api";
+import Layout from "../../components/Layout";
+import { getCharacter, getUrls } from "../../components/api/api";
+import EpisodeCard from "../../components/EpisodeCard";
+import * as routes from "../../constants/routes";
+
+function makePromises(Urls=[]){
+  return Urls.map((Url) =>getUrls(Url) )
+}
+class Character extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        // episode: null,
+        id:null,
+        epi: [],
+       hasLoaded: false,
+       hasError: false,
+       errorMessage: null,
+       images:null,
+       origin:null, 
+       location:null, 
+       status:null, 
+       species:null,
+      };
+    this.loadEpisodes = this.loadEpisodes.bind(this);
+    }
+
+    componentDidMount(){
+     const{match} = this.props;
+     const{caracterId}=match.params;
+
+     console.log(match);
+     console.log(caracterId);
+     // const {episodeId} = match.params;
+      this.loadEpisodes(caracterId)
+
+    }
+
+    async loadEpisodes(caracter) { 
+    try{
+     const {data}= await getCharacter(caracter);
+     const {id,image,name, origin, location, status, species}= data;
+     const LocationName=location.name;
+     const originPlanet=origin.name;
+     const episodesCall=await Promise.all(makePromises(data.episode))
+     const dataEpisodes=episodesCall.map((episode) => episode.data)
+
+
+      console.log(dataEpisodes);
+      console.log(data);
+     this.setState(
+       {
+          id:id,
+          epi:dataEpisodes,
+          hasLoaded:true,
+          hasError:false,
+          images:image,
+          name: name,
+          origin:originPlanet, 
+          location:LocationName, 
+          status:status, 
+          species:species,
+        }
+     )
+    }catch{
+      this.setState({
+
+        hasError:true
+   })
+    }
+    }
+
+render() {
+    const { id,
+            epi,
+            hasLoaded,
+            hasError,
+            errorMessage,
+            images,
+            name,
+            origin,
+            location,
+            status,
+            species,
+          } = this.state;
+    return (
+      <Layout>
+        <section className="row">
+
+        {hasLoaded && !hasError && (
+          <>
+            <div className="container">
+              <div className="row">
+                <img src={images} alt="car image"className="col" />
+                <div className="col">
+                  <h2>{name}</h2> 
+                  <h4>{status}|{species}</h4>
+                  <h4>ORIGIN</h4>
+                  <h5>{origin} </h5>
+                  <h4>LOCATION</h4>
+                  <Link to={`${routes.LOCATION}/${id}`}>
+                  <h5>{location} </h5>
+                  </Link>
+                </div>
+              </div>
+            </div>
+
+            <h1>Episodes loaded!</h1>
+          </>
+          )} 
+           {!hasLoaded &&  (
+            <div className="col col-12">
+              <h1>Is loading , Wait!!</h1>
+            </div>
+          )} 
+          {hasError && (
+          <div className="col col-12"> 
+            <h1>{errorMessage}</h1>
+          </div>
+          )}
+          <div className="col col-12">
+          {epi.length >0 &&
+           epi.map((char) => (
+              <EpisodeCard
+                key={char.id}
+                id={char.id}
+                name={char.name}
+                airDate={char.air_date}
+                episode={char.episode}
+              /> 
+            ))}
+          </div>
+        </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,79 @@
 import React, { Component } from "react";
-
+import { getEpisode, getUrls } from "../../components/api/api";
 import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
+
+function makePromises(charactersUrls=[]){
+  return charactersUrls.map((characterUrl) =>getUrls(characterUrl) )
 
+
+}
 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,
+    };
+  this.loadEpisodes = this.loadEpisodes.bind(this);
+  }
+
+  componentDidMount(){
+   const{match} = this.props;
+   console.log(match)
+   const {episodeId} = match.params;
+   this.loadEpisodes(episodeId)
+  }
+
+  async loadEpisodes(episode) { 
+    try{
+   const {data}= await getEpisode(episode);
+   const chacactersCall=await Promise.all(makePromises(data.characters))
+   const dataCharacters=chacactersCall.map((caracter) => caracter.data)
+   console.log(dataCharacters)
+   this.setState({
+    characters:dataCharacters,
+    hasLoaded:true,
+    hasError:false
+    })
+    }catch{
+    this.setState({
+
+      hasError:true
+    })
+    }
   }
 
   render() {
+    const { characters,
+            hasLoaded,
+            hasError,
+            errorMessage
+          } = this.state;
     return (
       <Layout>
         <section className="row">
+        {hasLoaded && !hasError && (
+            <div className="col col-12">
+              <h1>Episodes loaded!</h1>
+            </div>
+          )} 
+           {!hasLoaded &&  (
+            <div className="col col-12">
+              <h1>Is loading , Wait!!</h1>
+            </div>
+          )} 
+          {hasError && (
+          <div className="col col-12"> 
+            <h1>{errorMessage}</h1>
+          </div>
+          )}
           <div className="col col-12">
-            {/* {characters.map((character) => (
+            {characters.map((character) => (
               <CharacterCard
                 key={character.id}
                 id={character.id}
@@ -31,7 +84,7 @@ class Episode extends Component {
                 origin={character.origin}
                 location={character.location}
               />
-            ))} */}
+            ))}
           </div>
         </section>
       </Layout>