+
+ 
+
{name}
{origin.name}
@@ -26,4 +29,4 @@ function CharacterCard({ id, name, image, species, status, origin, location }) {
);
}
-export default CharacterCard;
+export default CharacterCard;
\ No newline at end of file
diff --git a/src/images/icons/rick-sanchez.svg b/src/images/icons/rick-sanchez.svg
new file mode 100644
index 0000000..7c5b48c
--- /dev/null
+++ b/src/images/icons/rick-sanchez.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index c4f7c38..8253bff 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
@@ -10,7 +10,12 @@ import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
-
+
,
document.getElementById("root"),
diff --git a/src/pages/Character/Character.js b/src/pages/Character/Character.js
new file mode 100644
index 0000000..24c25cb
--- /dev/null
+++ b/src/pages/Character/Character.js
@@ -0,0 +1,111 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { withRouter } from "react-router";
+import axios from "axios";
+
+import Layout from "../../components/Layout";
+import EpisodeCard from "../../components/EpisodeCard";
+
+import * as routes from "../../constants/routes";
+
+class Character extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ episodes: []
+ }
+ }
+
+ componentDidMount() {
+ this.loadCharacter()
+ this.loadEpisodes()
+ }
+
+ async loadCharacter() {
+ // let characterID = window.location.pathname.slice(11)
+ // const res = await axios.get(`https://rickandmortyapi.com/api/character/${characterID}`)
+ const res = await axios.get(`https://rickandmortyapi.com/api/${this.props.location.pathname}`)
+
+ this.setState({
+ id: res.data.id,
+ name: res.data.name,
+ image: res.data.image,
+ species: res.data.species,
+ status: res.data.status,
+ location: res.data.location.name,
+ origin: res.data.origin.name,
+ origin_url: res.data.origin.url,
+ })
+ }
+
+ async loadEpisodes() {
+ // let characterID = window.location.pathname.slice(11)
+ // const res = await axios.get(`https://rickandmortyapi.com/api/character/${characterID}`)
+ const res = await axios.get(`https://rickandmortyapi.com/api/${this.props.location.pathname}`)
+
+ const promiseArray = res.data.episode.map(episodeURL => axios.get(episodeURL))
+
+ try {
+ const episodesInfo = (await axios.all(promiseArray)).map(response => response.data)
+ this.setState({ episodes: episodesInfo })
+ } catch(error) {
+ console.error(error)
+ }
+
+ }
+
+ render() {
+ return (
+
+
+
+
+ )}
+}
+
+export default withRouter(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..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..6467969 100644
--- a/src/pages/Episode/Episode.js
+++ b/src/pages/Episode/Episode.js
@@ -1,26 +1,87 @@
import React, { Component } from "react";
+import { withRouter } from "react-router";
+import axios from "axios";
import Layout from "../../components/Layout";
-// import CharacterCard from "../../components/CharacterCard";
+import CharacterCard from "../../components/CharacterCard";
class Episode extends Component {
constructor(props) {
super(props);
- this.state = {};
- // episode: null,
- // characters: [],
- // hasLoaded: false,
- // hasError: false,
- // errorMessage: null,
+ this.state = {
+ name: null,
+ episode: null,
+ air_date: null,
+ characters: [],
+ hasLoaded: true,
+ hasError: false,
+ errorMessage: null,
+ };
+ }
+
+ componentDidMount() {
+ this.loadEpisode()
+ this.loadCharacters()
+ console.log(this.props);
+ }
+
+ async loadEpisode() {
+ // let episodeId = window.location.pathname.slice(9)
+ // const res = await axios.get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
+ const res = await axios.get(`https://rickandmortyapi.com/api/${this.props.location.pathname}`)
+
+ this.setState({
+ name: res.data.name,
+ episode: res.data.episode,
+ air_date: res.data.air_date,
+ })
+ }
+
+ // * JUST TESTING, WILL ERASE LATER
+ // async loadCharacters() {
+ // let episodeId = window.location.pathname.slice(9)
+ // const res = await axios.get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
+
+ // let newArray = []
+ // await res.data.characters.forEach(urlCharacter => {
+ // axios.get(urlCharacter)
+ // .then(response => newArray.push(response.data))
+ // })
+
+ // setTimeout(() => {
+ // this.setState({characters: newArray})
+ // }, 50)
+ // }
+
+ async loadCharacters() {
+ // let episodeId = window.location.pathname.slice(9)
+ // const res = await axios.get(`https://rickandmortyapi.com/api/episode/${episodeId}`)
+ const res = await axios.get(`https://rickandmortyapi.com/api/${this.props.location.pathname}`)
+
+ const promiseArray = res.data.characters.map(characterURL => axios.get(characterURL))
+
+ try {
+ const charactersInfo = (await axios.all(promiseArray)).map(response => response.data)
+ this.setState({ characters: charactersInfo })
+ } catch(error) {
+ console.error(error)
+ }
}
render() {
return (
-
+
+
+ 
+
+
+
+
+
+ {this.state.name}
+ +
+
+ CHARACTER
+ {this.state.species} + | + {this.state.status} +
+
+
+
+
+ ORIGIN
+ {this.state.origin} +
+
+ LOCATION
+ + {this.state.location} + +
+
+ Episodes
+
+ {this.state.episodes.map((episode) => (
+
+
- {/* {characters.map((character) => (
+
- {/* {hasLoaded && !hasError && (
+ {this.state.hasLoaded && !this.state.hasError && (
- )} */}
+ )}
- {/* {episodes.map((episode) => (
+ {this.state.episodes.map((episode) => (
+
+
);
}
}
-export default Home;
+export default withRouter(Home);
diff --git a/src/pages/Location/Location.js b/src/pages/Location/Location.js
new file mode 100644
index 0000000..875a974
--- /dev/null
+++ b/src/pages/Location/Location.js
@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import { withRouter } from "react-router";
+import axios from "axios";
+
+import Layout from "../../components/Layout";
+import CharacterCard from "../../components/CharacterCard";
+
+import rickImg from "../../images/icons/rick-sanchez.svg"
+
+class Location extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ residents: [],
+ }
+ }
+
+ componentDidMount() {
+ this.loadLocation()
+ }
+
+ async loadLocation() {
+ // let locationID = window.location.pathname.slice(10)
+ // const response = await axios.get(`https://rickandmortyapi.com/api/location/${locationID}`)
+ const response = await axios.get(`https://rickandmortyapi.com/api/${this.props.location.pathname}`)
+
+ this.setState({
+ name: response.data.name,
+ type: response.data.type,
+ dimension: response.data.dimension,
+ })
+ this.loadResidents(response)
+ }
+
+ async loadResidents(response) {
+
+ try {
+ const promiseArray = response.data.residents.map(residentURL => axios.get(residentURL))
+ const residentsInfo = (
+ await axios.all(promiseArray)
+ ).map(res => res.data)
+
+ this.setState({ residents: residentsInfo })
+
+ } catch(error) {
+ console.error(error)
+ }
+}
+
+ render() {
+ return (
+
+
+ { this.state.name !== undefined &&
+ <>
+
+
+ )
+ }
+}
+
+export default withRouter(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..d208f75
--- /dev/null
+++ b/src/pages/Location/index.js
@@ -0,0 +1 @@
+export { default } from "./Location"
\ No newline at end of file
+
+
+
+
+ {this.state.name}
+{this.state.episode} | {this.state.air_date}
+
+ {this.state.characters.map((character) => (
@@ -39,4 +100,4 @@ class Episode extends Component {
}
}
-export default Episode;
+export default withRouter(Episode);
\ No newline at end of file
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f86e93c..1acf570 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,42 +1,65 @@
import React, { Component } from "react";
+import { withRouter } from "react-router";
+import axios from "axios";
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: true,
+ hasError: false,
+ errorMessage: null,
+
+ morePages: true,
+ nextPage: 2,
+ };
+
+ this.handleNextPage = this.handleNextPage.bind(this)
+ }
+
+ componentDidMount() {
+ this.loadEpisodes(this.state.page);
}
- async componentDidMount() {
- // this.loadEpisodes();
+ async loadEpisodes(page) {
+ const res = await axios.get(`https://rickandmortyapi.com/api/episode?page=${page}`)
+ const newArray = res.data.results
+ this.setState({ episodes: newArray })
}
- async loadEpisodes() {
- console.log(this);
+ async handleNextPage(event) {
+ let currentPage = this.state.page
+ let movePage = parseInt(event.target.dataset.move)
+ let nextPage = currentPage+movePage
+
+ let requestTotalPagesAPI = await axios.get(`https://rickandmortyapi.com/api/episode?page=${currentPage}`)
+ let totalPagesAPI = requestTotalPagesAPI.data.info.pages
+
+ this.setState({ page: nextPage })
+ this.loadEpisodes(nextPage)
+ this.state.page == totalPagesAPI ? this.setState({ morePages: false }) : this.setState({ morePages: true })
}
render() {
return (
Episodes loaded!
+ {this.state.page > 1 && }
+ {this.state.morePages === true && }
+
+
+
+
+
+ {this.state.name}
+{this.state.type} | {this.state.dimension}
+
+ {this.state.residents.map((character) => (
+
+
+ }
+ {this.state.name === undefined &&
+
+ This location doesn't exist, Rick!
+
+ }
+