Episodes loaded!
-
+ )} + {hasError && ( +
From 3f79d43732fe85469984f427aee6ef0e491ab091 Mon Sep 17 00:00:00 2001
From: JonCroatan <43881219+jonCroatanUto@users.noreply.github.com>
Date: Wed, 26 May 2021 17:50:09 +0200
Subject: [PATCH 2/6] episodes
---
src/App.js | 15 +++++++-
src/pages/Episode/Episode.js | 16 ++++++---
src/pages/Home/Home.js | 67 ++++++++++++++++++++++++++----------
3 files changed, 74 insertions(+), 24 deletions(-)
diff --git a/src/App.js b/src/App.js
index 3a49c0e..7b417bc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,22 @@
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"
+
function App() {
return
+((
export default App;
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 75fb5da..b94c37b 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -8,15 +8,21 @@ class Episode extends Component {
super(props);
this.state = {
- episode: null,
+ // episode: null,
characters: [],
- hasLoaded: false,
- hasError: false,
- errorMessage: null,
+ // hasLoaded: false,
+ // hasError: false,
+ // errorMessage: null,
};
- }
+ }
+
+ componentDidMount(){
+ console.log(this.props)
+ }
+
render() {
+ const { characters } = this.state;
return (
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 8032e3a..d3e9078 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -8,39 +8,64 @@ class Home extends Component {
super(props);
this.state = {
- // page: 1,
- // paginationInfo: null,
+ page: 1,
+ paginationInfo: null,
episodes: [],
hasLoaded: false,
hasError: false,
- // errorMessage: true,
+ errorMessage: "You do shit",
};
+ this.loadNextPage=this.loadNextPage.bind(this)
}
- async componentDidMount() {
- this.loadEpisodes();
+ componentDidMount() {
+ const {page}=this.state
+ this.loadEpisodes(page);
}
- async loadEpisodes() {
+ componentDidUpdate(_prevProps, prevState){
+ const {page: prevPage} = prevState;
+ const {page} = this.state;
+ console.log({prevPage})
+ console.log({page})
+ if(prevPage !== page){
+ this.loadEpisodes(page);
+ }
+ }
+
+ async loadEpisodes(page) {
try{
- const {data} = await getEpisodesP();
- const {results} = data;
- this.setState({
- episodes:results,
+ const {data} = await getEpisodesP(page);
+ const {results,info} = data;
+
+ console.log(data)
+ this.setState((prevState)=>({
+ paginationInfo:info,
+ episodes:[...prevState.episodes,...results],
hasLoaded:true,
- })
+ }))
}catch{
this.setState({
hasError:true,
})
}
}
+
+ loadNextPage(){
+ this.setState((prevState)=>({
+ page:prevState.page +1,
+ }))
+ }
render() {
- const{hasLoaded}=this.state;
- const{hasError}=this.state;
- const{episodes}=this.state;
- // const{errorMessage}=this.state
+ const{
+ paginationInfo,
+ hasLoaded,
+ hasError,
+ episodes,
+ errorMessage
+ }=this.state;
+
return (
@@ -48,13 +73,19 @@ class Home extends Component {
+ )}
+ {!hasLoaded && (
+
From 6d9e964bfe7318a9f2f9c51cab5d539992cbd6de Mon Sep 17 00:00:00 2001
From: JonCroatan <43881219+jonCroatanUto@users.noreply.github.com>
Date: Wed, 26 May 2021 18:04:28 +0200
Subject: [PATCH 3/6] route
---
src/App.js | 5 +++--
src/components/api/api.js | 4 ++++
src/pages/Episode/Episode.js | 33 ++++++++++++++++++++++++++-------
3 files changed, 33 insertions(+), 9 deletions(-)
diff --git a/src/App.js b/src/App.js
index 7b417bc..013c21a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,8 +6,8 @@ import Episode from "./pages/Episode"
function App() {
- return
+ )}
export default App;
diff --git a/src/components/api/api.js b/src/components/api/api.js
index eab1235..9765eb5 100644
--- a/src/components/api/api.js
+++ b/src/components/api/api.js
@@ -13,3 +13,7 @@ export function getEpisodesP(page =1, api=makeAPI()){
return api.get(`${rout.EPISODE}?page=${page}`)
}
+// export function getEpisode(page =1, api=makeAPI()){
+
+// return api.get(`${rout.EPISODE}?page=${page}`)
+// }
\ No newline at end of file
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index b94c37b..0ab1a26 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -8,11 +8,11 @@ class Episode extends Component {
super(props);
this.state = {
- // episode: null,
- characters: [],
- // hasLoaded: false,
- // hasError: false,
- // errorMessage: null,
+ // episode: null,
+ characters: [],
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
};
}
@@ -20,12 +20,31 @@ class Episode extends Component {
componentDidMount(){
console.log(this.props)
}
-
+
render() {
- const { characters } = this.state;
+ const { characters,
+ hasLoaded,
+ hasError,
+ errorMessage
+ } = this.state;
return (
+ {hasLoaded && !hasError && (
+
+ )} + {hasError && ( +
+
- {/* {episodes.map((episode) => (
+ )}
+ {episodes.map((episode) => (
ERrrrrroooooorr capullo
Episodes loaded!
+
)}
{hasError && (
Is loading , Wait!!
+
-
)}
- {episodes.map((episode) => (
+ {episodes.length >0 &&
+ episodes.map((episode) => (
ERrrrrroooooorr capullo
+{errorMessage}
-
+
+
+
+ )}
+ {!hasLoaded && (
+ Episodes loaded!
+
+
+ )}
+ {hasError && (
+ Is loading , Wait!!
+
+
+ )}
{errorMessage}
+
{characters.map((character) => (
Date: Thu, 27 May 2021 09:03:06 +0200
Subject: [PATCH 4/6] get episodes
---
src/components/api/api.js | 6 +++---
src/pages/Episode/Episode.js | 14 +++++++++++---
2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/components/api/api.js b/src/components/api/api.js
index 9765eb5..5bc55ca 100644
--- a/src/components/api/api.js
+++ b/src/components/api/api.js
@@ -13,7 +13,7 @@ export function getEpisodesP(page =1, api=makeAPI()){
return api.get(`${rout.EPISODE}?page=${page}`)
}
-// export function getEpisode(page =1, api=makeAPI()){
+export function getEpisode(episodeId, api=makeAPI()){
-// return api.get(`${rout.EPISODE}?page=${page}`)
-// }
\ No newline at end of file
+ return api.get(`${rout.EPISODE}/${episodeId}`)
+}
\ No newline at end of file
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 0ab1a26..f929502 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-
+import { getEpisode } from "../../components/api/api";
import Layout from "../../components/Layout";
import CharacterCard from "../../components/CharacterCard";
@@ -14,13 +14,21 @@ class Episode extends Component {
hasError: false,
errorMessage: null,
};
-
+ this.loadEpisodes = this.loadEpisodes.bind(this);
}
componentDidMount(){
- console.log(this.props)
+ const{match} = this.props;
+ const {episodeId} = match.params;
+ this.loadEpisodes(episodeId)
}
+ async loadEpisodes(episode) {
+ const {data}= await getEpisode(episode);
+ console.log(data);
+ console.log(this.props);
+ }
+
render() {
const { characters,
hasLoaded,
From 84ef10211766a269986bec46077adf9bcc7db0c5 Mon Sep 17 00:00:00 2001
From: JonCroatan <43881219+jonCroatanUto@users.noreply.github.com>
Date: Thu, 27 May 2021 16:20:00 +0200
Subject: [PATCH 5/6] location
---
src/App.js | 11 +-
src/components/CharacterCard/CharacterCard.js | 12 +-
src/components/EpisodeCard/EpisodeCard.js | 1 -
src/components/api/api.js | 14 ++
src/pages/Character/Character.js | 143 ++++++++++++++++++
src/pages/Character/index.js | 1 +
src/pages/Episode/Episode.js | 25 ++-
src/pages/location/index.js | 1 +
src/pages/location/location.js | 108 +++++++++++++
9 files changed, 309 insertions(+), 7 deletions(-)
create mode 100644 src/pages/Character/Character.js
create mode 100644 src/pages/Character/index.js
create mode 100644 src/pages/location/index.js
create mode 100644 src/pages/location/location.js
diff --git a/src/App.js b/src/App.js
index 013c21a..5a34210 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,12 +3,21 @@ 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 (
+(((
+ {/* 
+
+
+ {hasLoaded && !hasError && (
+ <>
+
+
+ );
+ }
+}
+
+export default Character;
\ No newline at end of file
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
new file mode 100644
index 0000000..4562dce
--- /dev/null
+++ b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export { default } from "./Character";
\ No newline at end of file
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index f929502..d9caa5f 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,8 +1,13 @@
import React, { Component } from "react";
-import { getEpisode } from "../../components/api/api";
+import { getEpisode, getUrls } from "../../components/api/api";
import Layout from "../../components/Layout";
import CharacterCard from "../../components/CharacterCard";
+function makePromises(charactersUrls=[]){
+ return charactersUrls.map((characterUrl) =>getUrls(characterUrl) )
+
+
+}
class Episode extends Component {
constructor(props) {
super(props);
@@ -19,14 +24,28 @@ class Episode extends Component {
componentDidMount(){
const{match} = this.props;
+ console.log(match)
const {episodeId} = match.params;
this.loadEpisodes(episodeId)
}
async loadEpisodes(episode) {
+ try{
const {data}= await getEpisode(episode);
- console.log(data);
- console.log(this.props);
+ 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() {
diff --git a/src/pages/location/index.js b/src/pages/location/index.js
new file mode 100644
index 0000000..63c16c2
--- /dev/null
+++ b/src/pages/location/index.js
@@ -0,0 +1 @@
+export { default } from "./location";
\ No newline at end of file
diff --git a/src/pages/location/location.js b/src/pages/location/location.js
new file mode 100644
index 0000000..5a764c5
--- /dev/null
+++ b/src/pages/location/location.js
@@ -0,0 +1,108 @@
+import React, { Component } from "react";
+// import { getEpisode, getCharacters } from "../../components/api/api";
+import Layout from "../../components/Layout";
+import { getUrls, getLocation } from "../../components/api/api";
+import CharacterCard from "../../components/CharacterCard";
+
+function makePromises(Urls=[]){
+ return Urls.map((Url) =>getUrls(Url) )
+ }
+
+class Location extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ locations:[],
+ // locationN:"",
+ // locationD:"",
+ // locationT:"",
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
+ };
+ this.loadEpisodes = this.loadEpisodes.bind(this);
+ }
+
+ componentDidMount(){
+ const{match} = this.props;
+ const {locationId} = match.params;
+
+ console.log(match);
+ console.log(locationId);
+ this.loadEpisodes(locationId)
+ }
+
+
+ async loadEpisodes(location) {
+ const {data}= await getLocation(location);
+ const { name, type,dimension } = data;
+ const residentsCall=await Promise.all(makePromises(data.residents))
+ const dataResident=residentsCall.map((resident) => resident.data)
+
+ console.log(data);
+ console.log(this);
+ this.setState({
+ locations:dataResident,
+ // locationN:name,
+ // locationD:type,
+ // locationT:dimension,
+
+ })
+
+ }
+
+render() {
+ const {
+ locations,
+ // locationN,
+ // locationD,
+ // locationT,
+ hasLoaded,
+ hasError,
+ errorMessage
+ } = this.state;
+ return (
+
+
+ {hasLoaded && !hasError && (
+
+
+ );
+ }
+}
+
+export default Location;
\ No newline at end of file
From 7a952ebd1fa0b1433d349723b406cb1b77aea2cf Mon Sep 17 00:00:00 2001
From: JonCroatan <43881219+jonCroatanUto@users.noreply.github.com>
Date: Thu, 27 May 2021 18:14:16 +0200
Subject: [PATCH 6/6] finish
---
src/components/CharacterCard/CharacterCard.js | 7 +-
src/pages/location/location.js | 70 +++++++++++--------
2 files changed, 40 insertions(+), 37 deletions(-)
diff --git a/src/components/CharacterCard/CharacterCard.js b/src/components/CharacterCard/CharacterCard.js
index b066493..2e01ca9 100644
--- a/src/components/CharacterCard/CharacterCard.js
+++ b/src/components/CharacterCard/CharacterCard.js
@@ -8,14 +8,9 @@ import * as routes from "../../constants/routes";
function CharacterCard({ id, name, image, species, status, origin, location }) {
-
+
return (
{species}
+{location}
+{locationN}
+{locationD}
+{locationT}
*/}{name}
diff --git a/src/components/EpisodeCard/EpisodeCard.js b/src/components/EpisodeCard/EpisodeCard.js index 13cb5cf..75d512b 100644 --- a/src/components/EpisodeCard/EpisodeCard.js +++ b/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 }) { diff --git a/src/components/api/api.js b/src/components/api/api.js index 5bc55ca..e04021e 100644 --- a/src/components/api/api.js +++ b/src/components/api/api.js @@ -16,4 +16,18 @@ export function getEpisodesP(page =1, api=makeAPI()){ 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}`) } \ No newline at end of file diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js new file mode 100644 index 0000000..0316e85 --- /dev/null +++ b/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 ( +
+
+
+
+ 
+
+
+
+ {name}
+{status}|{species}
+ORIGIN
+{origin}
+LOCATION
+ +{location}
+ +Episodes loaded!
+ + )} + {!hasLoaded && ( +
+
+ )}
+ {hasError && (
+ Is loading , Wait!!
+
+
+ )}
+ {errorMessage}
+
+ {epi.length >0 &&
+ epi.map((char) => (
+
+
+
+ )}
+ {!hasLoaded && (
+ Episodes loaded!
+
+
+ )}
+ {hasError && (
+ Is loading , Wait!!
+
+
+ )}
+ {errorMessage}
+
+
+ {locations.map((location) => (
+
+
- {/*
{hasLoaded && !hasError && (
{species}
-{location}
-{locationN}
-{locationD}
-{locationT}
*/}{name}
diff --git a/src/pages/location/location.js b/src/pages/location/location.js index 5a764c5..5a15472 100644 --- a/src/pages/location/location.js +++ b/src/pages/location/location.js @@ -13,10 +13,8 @@ class Location extends Component { super(props); this.state = { - locations:[], - // locationN:"", - // locationD:"", - // locationT:"", + residents:[], + location:null, hasLoaded: false, hasError: false, errorMessage: null, @@ -30,34 +28,41 @@ class Location extends Component { console.log(match); console.log(locationId); - this.loadEpisodes(locationId) + this.loadEpisodes(locationId) } - + componentDidUpdate(){ + + console.log(this.state) + } + async loadEpisodes(location) { + try{ const {data}= await getLocation(location); const { name, type,dimension } = data; const residentsCall=await Promise.all(makePromises(data.residents)) const dataResident=residentsCall.map((resident) => resident.data) - - console.log(data); - console.log(this); + console.log(name); + console.log(type); + console.log(dimension); + console.log(data); this.setState({ - locations:dataResident, - // locationN:name, - // locationD:type, - // locationT:dimension, - - }) - - } + residents:dataResident, + location:data, + hasLoaded: true, + + }) + }catch{ + this.setState({ + + hasError: true, + }) + } + } render() { - const { - locations, - // locationN, - // locationD, - // locationT, + const { location, + residents, hasLoaded, hasError, errorMessage @@ -67,6 +72,9 @@ render() {
+
)}
@@ -82,16 +90,16 @@ render() {
)}
{location.name}
+{location.type}
+{location.dimension}
Episodes loaded!
- {locations.map((location) => (
+ {residents.map((resident) => (