From 623ace72c9d3ff86c9a33b73bec25f1324e5d881 Mon Sep 17 00:00:00 2001 From: mansour789 Date: Mon, 5 Aug 2019 22:18:08 +0300 Subject: [PATCH 1/9] finsh part 1+2 but the icon does not shown --- src/App.js | 31 ++++++++++----------- src/component/Fave.js | 34 +++++++++++++++++++++++ src/component/FilmDetails.js | 15 ++++++++++ src/component/FilmListing.js | 53 ++++++++++++++++++++++++++++++++++++ src/component/FilmPoster.js | 12 ++++++++ src/component/FilmRow.js | 32 ++++++++++++++++++++++ src/index.css | 5 ++++ src/index.js | 11 ++++---- 8 files changed, 170 insertions(+), 23 deletions(-) create mode 100644 src/component/Fave.js create mode 100644 src/component/FilmDetails.js create mode 100644 src/component/FilmListing.js create mode 100644 src/component/FilmPoster.js create mode 100644 src/component/FilmRow.js diff --git a/src/App.js b/src/App.js index ce9cbd2..16c3a38 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,22 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; - +import FilmListing from './component/FilmListing' +import FilmDetails from './component/FilmDetails' +import TMDB from './TMDB' function App() { + + return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ + + + + + +
+ ); } diff --git a/src/component/Fave.js b/src/component/Fave.js new file mode 100644 index 0000000..c92153c --- /dev/null +++ b/src/component/Fave.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +class Fave extends Component { + + + constructor(props){ + super(props); + this.state = { + isFave: false + } + } + + handleClick(e){ + e.stopPropagation() + + this.setState({ + isFave: !this.state.isFave + }) + console.log("handling Fave click!") + console.log(this.state.isFave) + } + + render() { + const isFave = (this.state.isFave) ? 'remove_from_queue' : 'add_to_queue' + const message = this.state.isFave ? "remove" : "Add" + return ( +
this.handleClick(e)} className={`film-row-fave ${isFave}`} > +

{message}

+
+ ); + } +} + +export default Fave; \ No newline at end of file diff --git a/src/component/FilmDetails.js b/src/component/FilmDetails.js new file mode 100644 index 0000000..ee1233a --- /dev/null +++ b/src/component/FilmDetails.js @@ -0,0 +1,15 @@ +import React, {Component} from 'react'; + +class FilmDetails extends Component { + + render(){ + const films = this.props.films + return( +
+

DETAILS

+
+ ); + } +} + +export default FilmDetails; \ No newline at end of file diff --git a/src/component/FilmListing.js b/src/component/FilmListing.js new file mode 100644 index 0000000..83ab3ba --- /dev/null +++ b/src/component/FilmListing.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import FilmRow from './FilmRow'; + +class FilmListing extends Component { + + constructor(props){ + super(props) + this.state = { + filters: "all" + } + } + + + handleFilterClick(filter){ + + this.setState({ + filters: filter + }) + + console.log(`Setting filter to ${filter}`) + + } + + render(){ + const allFilms = this.props.films + const filmsTitle = allFilms.films.map((film) => ) + const isActiv = this.state.filters === "all" && "is-active" + return( +
+

FILMS

+
+
this.handleFilterClick('all')} className={`film-list-filter ${this.state.filters === 'all' ? 'is-active' : ''}`}> + ALL + + {allFilms.films.length} +
+
this.handleFilterClick('faves')} className={`film-list-filter ${this.state.filters === 'faves' ? 'is-active' : ''}`}> + FAVES + 0 +
+
+ {filmsTitle} + {console.log(allFilms.films)} +
+ ); + } +} + + +export default FilmListing; + + + diff --git a/src/component/FilmPoster.js b/src/component/FilmPoster.js new file mode 100644 index 0000000..f05b442 --- /dev/null +++ b/src/component/FilmPoster.js @@ -0,0 +1,12 @@ +import React, { Component } from 'react'; + +class FilmPoster extends Component { + + render() { + return ( + + ); + } +} + +export default FilmPoster; \ No newline at end of file diff --git a/src/component/FilmRow.js b/src/component/FilmRow.js new file mode 100644 index 0000000..da0b780 --- /dev/null +++ b/src/component/FilmRow.js @@ -0,0 +1,32 @@ +import React, {Component} from 'react'; +import FilmPoster from './FilmPoster'; +import Fave from './Fave'; + +class FilmRow extends Component { + + + handleDetailsClick(film){ + console.log(`Fetching details for ${film.title}`) + } + + render() { + + const year = new Date(this.props.film.release_date); + return ( + +
this.handleDetailsClick(this.props.film)} className="film-row"> + +
+

{this.props.film.title}

+

{year.getFullYear()}

+
+
+ +
+
+ + ); + } +} + +export default FilmRow; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 23d4072..c1b0ac1 100644 --- a/src/index.css +++ b/src/index.css @@ -36,6 +36,7 @@ figure { .film-list { position: relative; + flex: 1 0 33.333333%; height: 100%; padding: 3.6em 0 0; @@ -89,10 +90,12 @@ figure { .film-summary { padding: 0.5em 1.5em; background-color: white; + } .film-summary > h1 { margin-bottom: 0.35em; + text-align: center; } .film-summary > p { @@ -100,6 +103,8 @@ figure { line-height: 1.35; font-weight: 200; margin-top: 0; + text-align: center; + } .section-title { diff --git a/src/index.js b/src/index.js index 3db093c..5fcc546 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,10 @@ import ReactDOM from 'react-dom'; import './normalize.css'; import './index.css'; import App from './App'; -import * as serviceWorker from './serviceWorker'; -ReactDOM.render(, document.getElementById('root')); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); +ReactDOM.render( +, +document.getElementById('root')); + + From e5f52b1764a4a637e38545cf7e99db6a4e3fb49f Mon Sep 17 00:00:00 2001 From: mansour789 Date: Tue, 6 Aug 2019 16:10:01 +0300 Subject: [PATCH 2/9] fix the icon and finshed part2 --- public/index.html | 1 + src/component/Fave.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index dd1ccfd..974ee01 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,7 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> + + diff --git a/src/App.js b/src/App.js index 2b63278..c83aa62 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import './App.css'; -import FilmListing from './component/FilmListing' -import FilmDetails from './component/FilmDetails' -import TMDB from './TMDB' +import FilmListing from './component/FilmListing'; +import FilmDetails from './component/FilmDetails'; +import TMDB from './TMDB'; +import axios from "axios"; class App extends Component { @@ -23,7 +24,7 @@ class App extends Component { const faves = [...this.state.faves]; const filmIndex = faves.indexOf(film) - if (filmIndex != -1){ + if (filmIndex !== -1){ faves.splice(filmIndex, 1); console.log(`Removing ${film.title}`) }else{ @@ -37,11 +38,20 @@ class App extends Component { handleDetailsClick(film){ + const url = `https://api.themoviedb.org/3/movie/${film.id}?api_key=${TMDB.api_key}&append_to_response=videos,images&language=en` - this.setState({ - current: film + axios({ + method: 'GET', + url: url + }).then(response => { + console.log(response.data) + this.setState({ current: response.data }) + console.log(`Fetching details for ${this.state.current}`) }) - console.log(`Fetching details for ${this.state.current.title}`) + .catch(e => { + console.log(`eeeeeeeeeee ${e}`) + }); + } diff --git a/src/TMDB.js b/src/TMDB.js index 1c37393..175985d 100644 --- a/src/TMDB.js +++ b/src/TMDB.js @@ -1,5 +1,10 @@ +import dotenv from 'dotenv'; + +dotenv.config(); + + const TMDB = { - api_key: '', + api_key: process.env.REACT_APP_TMDB_API_KEY, films: [ { "id": 346364, diff --git a/src/component/FilmDetails.js b/src/component/FilmDetails.js index d089985..b98b2b1 100644 --- a/src/component/FilmDetails.js +++ b/src/component/FilmDetails.js @@ -1,15 +1,48 @@ -import React, {Component} from 'react'; +import React from 'react'; -class FilmDetails extends Component { +function FilmDetails(props){ + const films = props.film - render(){ - const films = this.props.film - return( -
-

DETAILS

-
- ); + const backdropUrl = `https://image.tmdb.org/t/p/w1280/${films.backdrop_path}` + const posterUrl = `https://image.tmdb.org/t/p/w780/${films.poster_path}` + let details; + console.log(`id = ${films.id}`) + if(films.id){ + details =
+
+ +

{props.film.title}

+
+ +
+

{props.film.tagline}

+

+ {props.film.title} + {props.film.overview} +

+
+
+ + + }else{ + details =
+

+ subscriptions + No film selected +

+
} + return( +
+

DETAILS

+ {details} +
+ ); } -export default FilmDetails; \ No newline at end of file +export default FilmDetails; + + + + + \ No newline at end of file diff --git a/src/component/FilmListing.js b/src/component/FilmListing.js index a6e468f..b3cfead 100644 --- a/src/component/FilmListing.js +++ b/src/component/FilmListing.js @@ -27,7 +27,7 @@ class FilmListing extends Component { let showFilms = []; const allFilms = films.map((film) => this.props.onFaveToggle(film)} handleDetailsClick ={this.props.handleDetailsClick}/>) const favesFilms = faves.map((film) => this.props.onFaveToggle(film)} handleDetailsClick ={this.props.handleDetailsClick}/>) - this.state.filters == "all" ? showFilms = allFilms : showFilms = favesFilms + this.state.filters === "all" ? showFilms = allFilms : showFilms = favesFilms return(
@@ -45,7 +45,6 @@ class FilmListing extends Component {
{showFilms} - {console.log(films)}
); } diff --git a/src/component/FilmPoster.js b/src/component/FilmPoster.js index f05b442..886fe6b 100644 --- a/src/component/FilmPoster.js +++ b/src/component/FilmPoster.js @@ -1,12 +1,10 @@ -import React, { Component } from 'react'; +import React from 'react'; -class FilmPoster extends Component { +function FilmPoster(props) { - render() { - return ( - - ); - } + return ( + + ); } export default FilmPoster; \ No newline at end of file diff --git a/src/component/FilmRow.js b/src/component/FilmRow.js index 9acf077..626c18f 100644 --- a/src/component/FilmRow.js +++ b/src/component/FilmRow.js @@ -1,30 +1,25 @@ -import React, {Component} from 'react'; +import React from 'react'; import FilmPoster from './FilmPoster'; import Fave from './Fave'; -class FilmRow extends Component { +function FilmRow(props){ - - - - render() { - - const year = new Date(this.props.film.release_date); + const year = new Date(props.film.release_date); return ( -
this.props.handleDetailsClick(this.props.film)} className="film-row"> - +
props.handleDetailsClick(props.film)} className="film-row"> +
-

{this.props.film.title}

+

{props.film.title}

{year.getFullYear()}

- +
); - } + } export default FilmRow; \ No newline at end of file From 2fd21b01e47115d61782972e1b539c701a577c32 Mon Sep 17 00:00:00 2001 From: mansour789 Date: Tue, 6 Aug 2019 23:41:01 +0300 Subject: [PATCH 6/9] finsh all requirment --- public/index.html | 18 +++++++++--------- src/App.js | 4 ++-- src/component/Fave.js | 27 +++++++++------------------ src/component/FilmListing.js | 22 ++++++++++------------ 4 files changed, 30 insertions(+), 41 deletions(-) diff --git a/public/index.html b/public/index.html index 35e9667..58cee22 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,6 @@ - - - + + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. + --> + + + diff --git a/src/App.js b/src/App.js index c83aa62..5f2564c 100644 --- a/src/App.js +++ b/src/App.js @@ -57,12 +57,12 @@ class App extends Component { render(){ return ( -
+
-
+ ); } diff --git a/src/component/Fave.js b/src/component/Fave.js index 29f92a1..e190232 100644 --- a/src/component/Fave.js +++ b/src/component/Fave.js @@ -1,32 +1,23 @@ -import React, { Component } from 'react'; +import React from 'react'; -class Fave extends Component { +function Fave(props){ - constructor(props){ - super(props); - this.state = { - - } - } - - handleFaveClick = (e) => { + const handleFaveClick = (e) => { e.stopPropagation() - this.props.onFaveToggle() + props.onFaveToggle() console.log("handling Fave click!") - console.log(this.props.isFave) + console.log(props.isFave) } - - render() { - const isFave = (this.props.isFave) ? 'remove_from_queue' : 'add_to_queue' - const message = this.props.isFave ? "remove_from_queue" : "add_to_queue" + const isFave = props.isFave ? 'remove_from_queue' : 'add_to_queue' + const message = props.isFave ? "remove_from_queue" : "add_to_queue" return ( -
+

{message}

); - } + } export default Fave; \ No newline at end of file diff --git a/src/component/FilmListing.js b/src/component/FilmListing.js index b3cfead..e9e52db 100644 --- a/src/component/FilmListing.js +++ b/src/component/FilmListing.js @@ -30,22 +30,20 @@ class FilmListing extends Component { this.state.filters === "all" ? showFilms = allFilms : showFilms = favesFilms return( -
+

FILMS

-
-
this.handleFilterClick('all')} className={`film-list-filter ${this.state.filters === 'all' ? 'is-active' : ''}`}> - ALL - - {films.length} -
-
this.handleFilterClick('faves')} className={`film-list-filter ${this.state.filters === 'faves' ? 'is-active' : ''}`}> - FAVES +
+
this.handleFilterClick('all')} className={`film-list-filter ${this.state.filters === 'all' ? 'is-active' : ''}`}> + ALL + {films.length} +
+
this.handleFilterClick('faves')} className={`film-list-filter ${this.state.filters === 'faves' ? 'is-active' : ''}`}> + FAVES {faves.length} +
+ {showFilms}
- {showFilms} - -
); } } From 8a86b88eebd168cfc017a9ec4f5935bc507764eb Mon Sep 17 00:00:00 2001 From: mansour789 Date: Wed, 7 Aug 2019 00:19:32 +0300 Subject: [PATCH 7/9] make Fave functional --- src/component/FilmListing.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/component/FilmListing.js b/src/component/FilmListing.js index e9e52db..63dd66d 100644 --- a/src/component/FilmListing.js +++ b/src/component/FilmListing.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import FilmRow from './FilmRow'; + class FilmListing extends Component { constructor(props){ @@ -42,6 +43,7 @@ class FilmListing extends Component { {faves.length}
+ {showFilms}
); From bc937934d0a87cf63bc16984d68222414bbaba42 Mon Sep 17 00:00:00 2001 From: mansour789 Date: Wed, 7 Aug 2019 00:22:20 +0300 Subject: [PATCH 8/9] remove bind() from app.js --- src/App.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 5f2564c..c3e14af 100644 --- a/src/App.js +++ b/src/App.js @@ -15,11 +15,10 @@ class App extends Component { faves: [], current: {} } - this.handleFaveToggle = this.handleFaveToggle.bind(this); - this.handleDetailsClick = this.handleDetailsClick.bind(this); + } - handleFaveToggle(film){ + handleFaveToggle = (film) => { const faves = [...this.state.faves]; const filmIndex = faves.indexOf(film) @@ -36,7 +35,7 @@ class App extends Component { console.log("handleFav Toggle called") } - handleDetailsClick(film){ + handleDetailsClick = (film) => { const url = `https://api.themoviedb.org/3/movie/${film.id}?api_key=${TMDB.api_key}&append_to_response=videos,images&language=en` From 53fa87a2ead6797e31124115b11a4e5841c0bb94 Mon Sep 17 00:00:00 2001 From: mansour789 Date: Wed, 7 Aug 2019 00:51:19 +0300 Subject: [PATCH 9/9] orgnize the code make it readable --- src/App.js | 34 +++++++++---------------- src/component/Fave.js | 18 ++++++------- src/component/FilmDetails.js | 49 ++++++++++++++++++------------------ src/component/FilmListing.js | 36 +++++++++++--------------- src/component/FilmPoster.js | 5 +--- src/component/FilmRow.js | 22 ++++++++-------- 6 files changed, 70 insertions(+), 94 deletions(-) diff --git a/src/App.js b/src/App.js index c3e14af..9ccc22f 100644 --- a/src/App.js +++ b/src/App.js @@ -14,8 +14,7 @@ class App extends Component { films: TMDB.films, faves: [], current: {} - } - + } } handleFaveToggle = (film) => { @@ -25,14 +24,12 @@ class App extends Component { if (filmIndex !== -1){ faves.splice(filmIndex, 1); - console.log(`Removing ${film.title}`) + console.log(`Removing ${film.title} From Favors`) }else{ faves.push(film); - console.log(`Adding ${film.title}`) + console.log(`Adding ${film.title} To Favors`) } this.setState({faves}) - - console.log("handleFav Toggle called") } handleDetailsClick = (film) => { @@ -43,28 +40,21 @@ class App extends Component { method: 'GET', url: url }).then(response => { - console.log(response.data) this.setState({ current: response.data }) - console.log(`Fetching details for ${this.state.current}`) }) .catch(e => { - console.log(`eeeeeeeeeee ${e}`) - }); - - + console.log(`There is an Error With axios ${e}`) + }); } render(){ - return ( - -
- - -
- - - ); -} + return ( +
+ + +
+ ); + } } export default App; diff --git a/src/component/Fave.js b/src/component/Fave.js index e190232..72fc9db 100644 --- a/src/component/Fave.js +++ b/src/component/Fave.js @@ -2,21 +2,19 @@ import React from 'react'; function Fave(props){ - const handleFaveClick = (e) => { e.stopPropagation() props.onFaveToggle() - console.log("handling Fave click!") - console.log(props.isFave) } - const isFave = props.isFave ? 'remove_from_queue' : 'add_to_queue' - const message = props.isFave ? "remove_from_queue" : "add_to_queue" - return ( -
-

{message}

-
- ); + const isFave = props.isFave ? 'remove_from_queue' : 'add_to_queue' + const message = props.isFave ? "remove_from_queue" : "add_to_queue" + + return ( +
+

{message}

+
+ ); } diff --git a/src/component/FilmDetails.js b/src/component/FilmDetails.js index b98b2b1..eae8c2c 100644 --- a/src/component/FilmDetails.js +++ b/src/component/FilmDetails.js @@ -1,41 +1,40 @@ import React from 'react'; function FilmDetails(props){ - const films = props.film + const films = props.film const backdropUrl = `https://image.tmdb.org/t/p/w1280/${films.backdrop_path}` const posterUrl = `https://image.tmdb.org/t/p/w780/${films.poster_path}` let details; - console.log(`id = ${films.id}`) + if(films.id){ details =
-
- -

{props.film.title}

-
- -
-

{props.film.tagline}

-

- {props.film.title} - {props.film.overview} -

-
-
- - +
+ +

{props.film.title}

+
+ +
+

{props.film.tagline}

+

+ {props.film.title} + {props.film.overview} +

+
+
}else{ - details =
-

- subscriptions - No film selected -

-
+ + details =
+

+ subscriptions + No film selected +

+
} return(
-

DETAILS

- {details} +

DETAILS

+ {details}
); } diff --git a/src/component/FilmListing.js b/src/component/FilmListing.js index 63dd66d..dc2df3f 100644 --- a/src/component/FilmListing.js +++ b/src/component/FilmListing.js @@ -8,22 +8,17 @@ class FilmListing extends Component { super(props) this.state = { filters: "all" - } - + } } - handleFilterClick(filter){ - this.setState({ filters: filter - }) - - console.log(`Setting filter to ${filter}`) - + }); } render(){ + const { films, faves} = this.props; let showFilms = []; const allFilms = films.map((film) => this.props.onFaveToggle(film)} handleDetailsClick ={this.props.handleDetailsClick}/>) @@ -32,20 +27,19 @@ class FilmListing extends Component { return(
-

FILMS

-
-
this.handleFilterClick('all')} className={`film-list-filter ${this.state.filters === 'all' ? 'is-active' : ''}`}> - ALL - {films.length} +

FILMS

+
+
this.handleFilterClick('all')} className={`film-list-filter ${this.state.filters === 'all' ? 'is-active' : ''}`}> + ALL + {films.length} +
+
this.handleFilterClick('faves')} className={`film-list-filter ${this.state.filters === 'faves' ? 'is-active' : ''}`}> + FAVES + {faves.length} +
-
this.handleFilterClick('faves')} className={`film-list-filter ${this.state.filters === 'faves' ? 'is-active' : ''}`}> - FAVES - {faves.length} -
-
- - {showFilms} -
+ {showFilms} +
); } } diff --git a/src/component/FilmPoster.js b/src/component/FilmPoster.js index 886fe6b..99033db 100644 --- a/src/component/FilmPoster.js +++ b/src/component/FilmPoster.js @@ -1,10 +1,7 @@ import React from 'react'; function FilmPoster(props) { - - return ( - - ); + return ; } export default FilmPoster; \ No newline at end of file diff --git a/src/component/FilmRow.js b/src/component/FilmRow.js index 626c18f..6586f0d 100644 --- a/src/component/FilmRow.js +++ b/src/component/FilmRow.js @@ -5,21 +5,19 @@ import Fave from './Fave'; function FilmRow(props){ const year = new Date(props.film.release_date); + return ( -
props.handleDetailsClick(props.film)} className="film-row"> -
-

{props.film.title}

-

{year.getFullYear()}

-
-
- -
-
- - ); - +
+

{props.film.title}

+

{year.getFullYear()}

+
+
+ +
+ + ); } export default FilmRow; \ No newline at end of file