@@ -15,7 +17,7 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
{origin.name}
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
index 43bb386..56cd585 100644
--- a/src/components/Main/Main.js
+++ b/src/components/Main/Main.js
@@ -1,6 +1,7 @@
import React from "react";
function Main({ children, ...props }) {
+
return (
{children}
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
new file mode 100644
index 0000000..e675e5f
--- /dev/null
+++ b/src/pages/Character/Character.js
@@ -0,0 +1,108 @@
+import React from "react";
+import Layout from "../../components/Layout";
+import EpisodeCard from "../../components/EpisodeCard";
+
+class Character extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ episodes: [],
+ character: null,
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
+ };
+ }
+
+ async componentDidMount() {
+ const {
+ match: { params },
+ } = this.props;
+
+ try {
+ const response = await fetch(
+ `https://rickandmortyapi.com/api/character/${params.characterId}`,
+ );
+ const json = await response.json();
+
+ console.log(json);
+
+ this.setState({
+ character: json,
+ });
+
+ let episodes = await Promise.all(
+ json.episode.map(async (url) => {
+ const response = await fetch(url);
+ return response.json();
+ }),
+ );
+
+ console.log(episodes);
+
+ this.setState({
+ episodes: episodes,
+ hasLoaded: true,
+ });
+ } catch (error) {
+ this.setState({
+ hasError: true,
+ });
+ }
+ }
+
+ render() {
+ const { character, episodes, hasLoaded, hasError } = this.state;
+ return (
+
+ {hasLoaded && !hasError && (
+
+
+
+
+
+
+
+
{character.name}
+
+
+
+
+
CHARACTER
+ {character.species} | {character.status}
+
+
+
ORIGIN
+ {character.origin.name}
+
+
+
LOCATION
+ {character.location.name}
+
+
+
+
+
+
+ Episodes
+
+ {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..5d00d25 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,38 +1,80 @@
import React, { Component } from "react";
import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
+import { FaceRetouchingNatural } from "@mui/icons-material";
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,
+ };
+ }
+
+ async componentDidMount() {
+ const {
+ match: { params },
+ } = this.props;
+
+ try {
+ const response = await fetch(
+ `https://rickandmortyapi.com/api/episode/${params.episodeId}`,
+ );
+ const json = await response.json();
+
+ this.setState({
+ episode: json,
+ });
+
+ let characters = await Promise.all(
+ json.characters.map(async (url) => {
+ const response = await fetch(url);
+ return response.json();
+ }),
+ );
+
+ this.setState({
+ characters: characters,
+ hasLoaded: true,
+ });
+ } catch (error) {
+ console.log(error);
+ }
}
render() {
+ const { characters, episode } = this.state;
return (
- {/* {characters.map((character) => (
-
- ))} */}
+
{episode && episode.name}
+
+
+
+
+ {episode && episode.episode} | {episode && episode.air_date}
+
+
+ {characters.map((character) => (
+
+ ))}
);
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..3c135d0 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,52 +1,107 @@
import React, { Component } from "react";
import Layout from "../../components/Layout";
-// import EpisodeCard from "../../components/EpisodeCard";
+import EpisodeCard from "../../components/EpisodeCard";
+import Button from "@mui/material/Button";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
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,
+ currentPage: 1,
+ };
}
- async componentDidMount() {
- // this.loadEpisodes();
- }
+ componentDidMount = async () => {
+ const { page } = this.state;
+ this.componentDidUpdateloadEpisodes(page);
+ };
- async loadEpisodes() {
- console.log(this);
- }
+ loadEpisodes = () => {
+ const { page } = this.state;
+ this.setState({
+ page: page + 1,
+ });
+ };
+ lessEpisodes = () => {
+ const { page } = this.state;
+ this.setState({
+ page: page - 1,
+ });
+ };
+
+ componentDidUpdate = async () => {
+ const { page, currentPage } = this.state;
+ if (page !== currentPage) {
+ this.componentDidUpdateloadEpisodes(page);
+ }
+ };
+
+ componentDidUpdateloadEpisodes = async (page) => {
+ try {
+ const response = await fetch(
+ `https://rickandmortyapi.com/api/episode?page=${page}`,
+ );
+ const json = await response.json();
+
+ this.setState((prevState) => ({
+ episodes: json.results /* [...prevState.episodes, json.results] */,
+ hasLoaded: true,
+ page: page,
+ currentPage: page,
+ paginationInfo: json.info.next,
+ }));
+ } catch (error) {
+ this.setState({
+ hasError: true,
+ });
+ }
+ };
render() {
+ const { hasLoaded, hasError, episodes, page } = this.state;
return (
- {/* {hasLoaded && !hasError && (
+ {hasLoaded && !hasError && (
Episodes loaded!
- )} */}
+ )}
- {/* {episodes.map((episode) => (
-
- ))} */}
+ {episodes.map((episode) => (
+
+ ))}
+
+ {page > 1 && (
+
+ )}
+ {page < 3 && (
+
+ )}
+
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
new file mode 100644
index 0000000..6fa3fa5
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,94 @@
+import React from "react";
+import CharacterCard from "../../components/CharacterCard";
+import Layout from "../../components/Layout";
+
+class Location extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ location: {},
+ residents: [],
+ hasLoaded: false,
+ hasError: false,
+ errorMessage: null,
+ };
+ }
+
+ async componentDidMount() {
+ const {
+ match: { params },
+ } = this.props;
+
+ try {
+ const response = await fetch(
+ `https://rickandmortyapi.com/api/location/${params.locationId}`,
+ );
+ const json = await response.json();
+ console.log(json);
+
+ this.setState({
+ location: json,
+ });
+
+ let residents = await Promise.all(
+ json.residents.map(async (url) => {
+ const response = await fetch(url);
+ return response.json();
+ }),
+ );
+
+ this.setState({
+ residents: residents,
+ hasLoaded: true,
+ });
+ } catch (error) {
+ this.setState({
+ hasError: true,
+ });
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ /* console.log(prevProps, this.props); */
+ }
+ render() {
+ const { hasError, hasLoaded, residents, location } = this.state;
+ return (
+
+ {!hasError && hasLoaded && (
+
+
+
{location.name}
+
+
+
+
TYPE
+ {location.type}
+ DIMENSION
+ {location.dimension}
+
+
+
+ RESIDENTS
+
+ {residents.map((character) => (
+
+ ))}
+
+ )}
+
+ );
+ }
+}
+
+export default Location;
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