- {origin.name}
+ {location.name}
+
+ {!hasLoaded && (
+
+
+ );
+ }
+}
+
+export default Character;
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 8255df5..30c7ac5 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,26 +1,88 @@
import React, { Component } from "react";
+import axios from "axios";
import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
+
+import { getEpisode } from "../../Api";
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.loadEpisode = this.loadEpisode.bind(this)
+ }
+
+ componentDidMount() {
+ const { match } = this.props;
+ const { episodeId } = match.params;
+
+ this.loadEpisode(episodeId);
}
+ async loadEpisode(episodeId) {
+ try {
+ const { data } = await getEpisode(episodeId);
+
+ const promises = data.characters.map((character) => axios.get(character));
+
+ const charactersResponse = await Promise.all(promises);
+
+ const characters = charactersResponse.map((character) => character.data);
+
+ this.setState({
+ hasLoaded: true,
+ episode: data,
+ characters: characters,
+ });
+ } catch (e) {
+ this.setState({
+ hasLoaded: true,
+ hasError: true,
+ errorMessage: e.message,
+ });
+ }
+ }
render() {
+ const {
+ episode,
+ characters,
+ hasLoaded,
+ hasError,
+ errorMessage,
+ } = this.state;
return (
-
);
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..c2b6b06 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,42 +1,98 @@
import React, { Component } from "react";
+import { getEpisodes } from "../../Api";
+
import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
class Home extends Component {
constructor(props) {
super(props);
- this.state = {};
- // page: 1,
- // paginationInfo: null,
- // episodes: [],
- // hasLoaded: false,
- // hasError: false,
- // errorMessage: null,
+ this.state = {
+ page: 1,
+ paginationInfo: null,
+ episodes: [],
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
}
+ this.loadEpisodes = this.loadEpisodes.bind(this);
+ this.loadNextPage = this.loadNextPage.bind(this);
+ this.loadPrevPage = this.loadPrevPage.bind(this);
+}
async componentDidMount() {
- // this.loadEpisodes();
+ const { page } = this.state;
+ this.loadEpisodes(page);
+ }
+
+ componentDidUpdate(_prevProps, prevState) {
+ const { page: prevPage } = prevState;
+ const { page } = this.state;
+ if (prevPage !== page) {
+ this.loadEpisodes(page);
+ }
}
- async loadEpisodes() {
- console.log(this);
+ async loadEpisodes(page) {
+ try {
+ const { data } = await getEpisodes(page);
+ this.setState({
+ paginationInfo: data.info,
+ episodes: data.results,
+ hasLoaded: true,
+ });
+ } catch (e) {
+ this.setState({
+ hasLoaded: true,
+ hasError: true,
+ errorMessage: e.message,
+ });
+ }
+ }
+ loadPrevPage() {
+ this.setState((prevState) => ({
+ page: prevState.page - 1,
+ }));
}
+ loadNextPage() {
+ this.setState((prevState) => ({
+ page: prevState.page + 1,
+ }));
+ }
render() {
+ const {
+ paginationInfo,
+ episodes,
+ hasLoaded,
+ hasError,
+ errorMessage,
+ } = this.state;
return (
- {/* {hasLoaded && !hasError && (
+ {!hasLoaded && (
+
- )} */}
+ )}
+ {hasError && (
+
- {/* {episodes.map((episode) => (
+ {episodes.map((episode) => (
+
);
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
new file mode 100644
index 0000000..2c3167a
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,101 @@
+import React, { Component } from "react";
+import axios from "axios";
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard";
+
+import { getLocation } from "../../Api";
+
+class Location extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ location: null,
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
+ };
+ this.loadLocation = this.loadLocation.bind(this);
+ }
+
+ componentDidMount() {
+ const { match } = this.props;
+ const { locationId } = match.params;
+
+ this.loadLocation(locationId);
+ }
+
+ async loadLocation(locationId) {
+ try {
+ const { data } = await getLocation(locationId);
+
+ const promises = data.residents.map((resident) => axios.get(resident));
+
+ const residentsResponse = await Promise.all(promises);
+
+ const residents = residentsResponse.map((resident) => resident.data);
+
+ this.setState({
+ hasLoaded: true,
+ location: data,
+ residents: residents,
+ });
+ } catch (e) {
+ this.setState({
+ hasLoaded: true,
+ hasError: true,
+ errorMessage: e.message,
+ });
+ }
+ }
+
+ render() {
+ const { location, residents, hasLoaded, hasError, errorMessage } = this.state;
+ return (
+
+
+ {!hasLoaded && (
+
+
+ )}}
+
+export default Location;
\ No newline at end of file
diff --git a/src/pages/Location/index.js b/src/pages/Location/index.js
new file mode 100644
index 0000000..e267389
--- /dev/null
+++ b/src/pages/Location/index.js
@@ -0,0 +1 @@
+export { default } from "./Location";
\ No newline at end of file
|
{status}
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js new file mode 100644 index 0000000..43bc921 --- /dev/null +++ b/src/pages/Character/Character.js @@ -0,0 +1,122 @@ +import React, { Component } from "react"; +import axios from "axios"; + +import Layout from "../../components/Layout"; + +import { getCharacter } from "../../Api"; +import EpisodeCard from "../../components/EpisodeCard"; + +class Character extends Component { + constructor(props) { + super(props); + + this.state = { + character: null, + episodes: [], + hasLoaded: false, + hasError: false, + errorMessage: null, + }; + this.loadCharacter = this.loadCharacter.bind(this); + } + + componentDidMount() { + const { match } = this.props; + const { characterId } = match.params; + + this.loadCharacter(characterId); + } + + async loadCharacter(characterId) { + try { + const { data } = await getCharacter(characterId); + + const promises = data.episode.map((eachEpisode) => + axios.get(eachEpisode), + ); + + const episodesResponse = await Promise.all(promises); + + const episodes = episodesResponse.map((episode) => episode.data); + + this.setState({ + hasLoaded: true, + character: data, + episodes: episodes, + }); + } catch (e) { + this.setState({ + hasLoaded: true, + hasError: true, + errorMessage: e.message, + }); + } + } + + render() { + const { + character, + episodes, + hasLoaded, + hasError, + errorMessage, + } = this.state; + return ( +
+
+ )}
+ {hasLoaded && (
+ Character not loaded...
+
+
+
+
+ )}
+
+ {hasError && (
+
+ 
+
+
+
+
+ {character.name}
++
CHARACTER
+{`${character.species} | ${character.status}`}
+
+
+
+
+ ORIGIN
+{`${character.origin.name}`}
+
+
+ LOCATION
+{`${character.location.name}`}
++
Episodes
++
+
+ )}
+ {episodes.length > 0 &&
+ episodes.map((episode) => (
+ Character error...
+{errorMessage}
+
- {/* {characters.map((character) => (
+ {!hasLoaded && (
+
+ ))}
+
+ )}
+ {hasLoaded && (
+ Episode not loaded...
+
+
+
+
+ )}
+ {hasError && (
+ {episode.name}
++
{`${episode.episode} | ${episode.air_date}`}
++
+
+ )}
+ {characters.length > 0 &&
+ characters.map((character) => (
Episode error...
+{errorMessage}
+
+
+ )}
+ {hasLoaded && !hasError && (
Location not loaded...
+Episodes loaded!
+
+ )}
Location error...
+{errorMessage}
+
+
+
+
+
+ )}
+ {hasLoaded && !hasError && (
+ <>
+ Location not loaded...
+
+
+
+
+ { residents.map((resident) => (
+ + Location: + {` ${location.name}`} +
++
Residents
++
+
+ )}
+
+
+ Location error...
+{errorMessage}
+