Sorry! There was an error loading the this page. Please try again later!
+ ) + } + + if (isLoading) { + return ( +
+ 
+
+ )
+ }
+
+ return (
+ This may take a few seconds...
+
+
+ {
+ film &&
+
+ )
+ }
+}
+
+const MapDispatchToProps = (dispatch) => ({
+ FetchFilmById: (filmId) => dispatch(FetchFilmById(filmId))
+})
+
+const MapStateToProps = (state) => ({
+ film: state.FilmsApi.film,
+ hasErrored: state.FilmsApi.hasErrored,
+ isLoading: state.FilmsApi.isLoading
+})
+
+export default connect(MapStateToProps, MapDispatchToProps)(FilmDetails)
diff --git a/client/src/containers/film/FilmList.jsx b/client/src/containers/film/FilmList.jsx
new file mode 100644
index 0000000..60d82e6
--- /dev/null
+++ b/client/src/containers/film/FilmList.jsx
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+//actions
+import { FetchAllFilms, GetWatchList } from '../../store/actions/FilmsApiActions'
+
+//components
+import SingleFilm from './SingleFilm'
+
+class FilmList extends Component {
+
+ componentDidMount() {
+ this.props.FetchAllFilms()
+ this.props.GetWatchList()
+ }
+
+ render() {
+ const { allFilms, isLoading, hasErrored, watchList } = this.props
+
+ if (hasErrored) {
+ return (
+ <>
+
+
+ }
+ {film.title}
+
+
+
+ 
+
+
+
+
+
+
+
+ Release Date: {film.release_date}
+Director: {film.director}
+Producer: {film.producer}
+Rotten Tomatoes Score: {film.rt_score}/100
+Description:{film.description}
+
+
+ Trailer
+ +Sorry! There was an error loading the this page. Please try again later!
+ + ) + } + + if (isLoading) { + return ( +
+
+
+ )
+ }
+
+ return (
+
+
+ {window.location.pathname === '/watchlist' ?
+ (
+ )
+ }
+
+}
+
+const mapDispatchToProps = (dispatch) => ({
+ FetchAllFilms: () => dispatch(FetchAllFilms()),
+ GetWatchList: () => dispatch(GetWatchList())
+})
+
+const mapStateToProps = (state) => ({
+ allFilms: state.FilmsApi.allFilms,
+ watchList: state.FilmsApi.watchList,
+ isLoading: state.FilmsApi.isLoading,
+ hasErrored: state.FilmsApi.hasErrored
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(FilmList)
\ No newline at end of file
diff --git a/client/src/containers/film/SingleFilm.jsx b/client/src/containers/film/SingleFilm.jsx
new file mode 100644
index 0000000..53df8bb
--- /dev/null
+++ b/client/src/containers/film/SingleFilm.jsx
@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import { Link, withRouter } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+//actions
+import { AddToWatchList, RemoveFromWatchList } from '../../store/actions/FilmsApiActions'
+
+class SingleFilm extends Component {
+ constructor(props) {
+ super(props)
+ this.handleWatchList = this.handleWatchList.bind(this)
+ this.handleRemoveWatchList = this.handleRemoveWatchList.bind(this)
+ }
+
+ handleWatchList() {
+ if (localStorage.getItem('token')) {
+ this.props.AddToWatchList(this.props.film)
+ } else {
+ this.props.history.push("/login")
+ }
+ }
+
+ handleRemoveWatchList() {
+ if (localStorage.getItem('token')) {
+ this.props.RemoveFromWatchList(this.props.film)
+ } else {
+ this.props.history.push("/login")
+ }
+ }
+
+ render() {
+ const { film, watchList, isLoggedIn } = this.props
+
+ return (
+ Your WatchList
): + (Studio Ghibli Film Database
) + } +
+ {window.location.pathname !== '/watchlist' ? allFilms.map(film =>
+
+
+
+
+ )
+ }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+ AddToWatchList: (film) => dispatch(AddToWatchList(film)),
+ RemoveFromWatchList: (film) => dispatch(RemoveFromWatchList(film))
+})
+
+const mapStateToProps = (state) => ({
+ isLoggedIn: state.Users.isLoggedIn
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(SingleFilm))
diff --git a/client/src/index.css b/client/src/index.css
new file mode 100755
index 0000000..40e52d2
--- /dev/null
+++ b/client/src/index.css
@@ -0,0 +1,16 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
+}
+
+
diff --git a/client/src/index.js b/client/src/index.js
new file mode 100755
index 0000000..e9880a2
--- /dev/null
+++ b/client/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+ReactDOM.render(
+
+
+
+ {watchList.map(film => film.title).includes(film.title) && isLoggedIn?
+ () :
+ ()
+ }
+ {film.title}
+{film.description.slice(0, 120)}...
+