@@ -13,12 +15,15 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
{name}
-
- {origin.name}
-
+ {locationId && (
+
+ {origin.name}
+
+ )}
+ {!locationId &&
Unknown
}
|
{status}
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 8c7af62..53c68b1 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -3,3 +3,4 @@ export const EPISODES = "/episodes";
export const EPISODE = "/episode";
export const LOCATION = "/location";
export const CHARACTER = "/character";
+export const API = "https://rickandmortyapi.com/api";
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
new file mode 100644
index 0000000..f7bcff5
--- /dev/null
+++ b/src/pages/Character/Character.js
@@ -0,0 +1,103 @@
+import axios from "axios";
+import React, { Component } from "react";
+import EpisodeCard from "../../components/EpisodeCard";
+import Layout from "../../components/Layout";
+import { API, CHARACTER } from "../../constants/routes";
+
+class Character extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isLoaded: false,
+ character: {},
+ episodes: [],
+ };
+ }
+
+ componentDidMount() {
+ this.loadCharacterEpisodes();
+ }
+
+ loadCharacterEpisodes() {
+ const { match } = this.props;
+ const characterId = match.params.characterId;
+ axios.get(`${API}${CHARACTER}/${characterId}`).then((data) => {
+ this.setState({ character: data.data });
+ const episodeUrls = data.data.episode;
+ axios
+ .all(episodeUrls.map((episodeUrl) => axios.get(episodeUrl)))
+ .then((dataCollection) => {
+ const episodes = dataCollection.map(
+ (collectionData) => collectionData.data,
+ );
+ this.setState({ episodes: episodes, isLoaded: true });
+ });
+ });
+ }
+
+ render() {
+ const { character, isLoaded, episodes } = this.state;
+
+ return (
+ <>
+
+ {isLoaded && (
+
+
+
+
+
+
+
{character.name}
+
+
CHARACTER
+
+
+ {character.origin.name} | {character.status}
+
+
+
+
+
ORIGIN
+
+
+ {character.origin.name}
+
+
+
+
+
LOCATION
+
+
+ {character.location.name}
+
+
+
+
+
+
+
+
+ {episodes.map((episode) => (
+
+ ))}
+
+
+
+ );
+ }
+}
+
+export default Character;
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
new file mode 100644
index 0000000..f267ceb
--- /dev/null
+++ b/src/pages/Character/index.js
@@ -0,0 +1 @@
+export { default } from "./Character";
diff --git a/src/pages/Episode/Episode.js b/src/pages/Episode/Episode.js
index 8255df5..c95a922 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,40 +1,127 @@
+import axios from "axios";
import React, { Component } from "react";
import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
+import { API, EPISODE } from "../../constants/routes";
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,
+ };
+ }
+
+ componentDidMount() {
+ this.loadCharacters();
+ }
+
+ loadCharacters() {
+ const { match } = this.props;
+ const { episodeId } = match.params;
+ const charactersUrl = `${API}${EPISODE}/${episodeId}`;
+ this.fetchEpisodeCharacters(charactersUrl);
+ }
+
+ fetchEpisodeCharacters(charactersUrl) {
+ axios
+ .get(charactersUrl)
+ .then((apiEpisode) => {
+ this.setState({
+ episode: {
+ id: apiEpisode.data.id,
+ name: apiEpisode.data.name,
+ episode: apiEpisode.data.episode,
+ air_date: apiEpisode.data.air_date,
+ },
+ });
+
+ const characterUrls = apiEpisode.data.characters;
+ this.fetchCharacters(characterUrls);
+ })
+ .catch((error) => {
+ this.setState({
+ hasLoaded: false,
+ hasError: true,
+ errorMessage: error,
+ });
+ });
+ }
+
+ fetchCharacters(characterUrls) {
+ axios
+ .all(
+ characterUrls.map((char) => {
+ return axios.get(char);
+ }),
+ )
+ .then((data) => {
+ const charactersArr = data.map((characterData) => {
+ return characterData.data;
+ });
+ this.setState({
+ characters: charactersArr,
+ hasLoaded: true,
+ hasError: false,
+ });
+ })
+ .catch((error) => {
+ this.setState({
+ hasLoaded: false,
+ hasError: true,
+ errorMessage: error,
+ });
+ });
}
render() {
+ const {
+ episode,
+ characters,
+ hasLoaded,
+ hasError,
+ errorMessage,
+ } = this.state;
+
return (
-
-
-
- {/* {characters.map((character) => (
-
- ))} */}
-
-
-
+ <>
+
+
+ {hasError && {errorMessage}
}
+ {hasLoaded && (
+
+
+
{episode.name}
+
+
{episode.episode}
+
|
+
{episode.air_date}
+
+
+
+
);
}
}
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..79df553 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,42 +1,81 @@
import React, { Component } from "react";
+import axios from "axios";
import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
+import { API, EPISODE } from "../../constants/routes";
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: { prev: null, next: null },
+ episodes: [],
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
+ };
}
- async componentDidMount() {
- // this.loadEpisodes();
+ componentDidMount() {
+ this.loadEpisodes();
}
- async loadEpisodes() {
- console.log(this);
+ componentDidUpdate() {
+ this.loadEpisodes();
+ }
+
+ loadEpisodes() {
+ const { page } = this.state;
+ axios
+ .get(`${API}${EPISODE}?page=${page}`)
+ .then((data) => {
+ const newInfo = data.data.results;
+ this.setState({
+ episodes: newInfo,
+ hasLoaded: true,
+ hasError: false,
+ paginationInfo: {
+ next: data.data.info.next,
+ prev: data.data.info.prev,
+ },
+ });
+ })
+ .catch((error) => {
+ this.setState({
+ hasLoaded: false,
+ hasError: true,
+ errorMessage: error,
+ });
+ });
}
render() {
+ const {
+ page,
+ paginationInfo,
+ episodes,
+ hasLoaded,
+ hasError,
+ errorMessage,
+ } = this.state;
+
return (
-
-
- {/* {hasLoaded && !hasError && (
+ <>
+
+
+ {hasError && !hasLoaded && {errorMessage}
}
+ {hasLoaded && !hasError && (
+
+
Episodes loaded!
+
+ )}
-
Episodes loaded!
+
- )} */}
-
-
-
- {/* {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..0cba968
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,77 @@
+import axios from "axios";
+import React, { Component } from "react";
+import CharacterCard from "../../components/CharacterCard";
+import Layout from "../../components/Layout";
+import { API, LOCATION } from "../../constants/routes";
+
+export default class Location extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ residents: [],
+ isLoaded: false,
+ };
+ }
+
+ componentDidMount() {
+ this.loadLocationResidents();
+ }
+
+ loadLocationResidents() {
+ const { match } = this.props;
+ const locationId = match.params.locationId;
+ axios.get(`${API}${LOCATION}/${locationId}`).then((location) => {
+ this.setState({ location: location.data });
+ const residentUrls = location.data.residents;
+ axios
+ .all(
+ residentUrls.map((residentUrl) => {
+ return axios.get(residentUrl);
+ }),
+ )
+ .then((res) => {
+ const residents = res.map((resident) => {
+ return resident.data;
+ });
+ this.setState({ residents: residents, isLoaded: true });
+ });
+ });
+ }
+
+ render() {
+ const { residents, isLoaded, location } = this.state;
+ return (
+ <>
+
+
+ {isLoaded && (
+
+
+
{location.name}
+
+
{location.type}
+
|
+
{location.dimension}
+
+
+
+
+ );
+ }
+}
diff --git a/src/pages/Location/index.js b/src/pages/Location/index.js
new file mode 100644
index 0000000..7625c87
--- /dev/null
+++ b/src/pages/Location/index.js
@@ -0,0 +1 @@
+export { default } from "./Location";