The movie db

package.json

@@ -4,7 +4,10 @@
   "private": true,
   "dependencies": {
     "inspector": "^0.5.0",
+    "jquery": "^3.3.1",
+    "lodash.uniqueid": "^4.0.1",
     "npm": "^6.9.0",
+    "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-inspector": "^2.3.1",

src/components/Affiche.js

@@ -8,7 +8,7 @@ class Affiche extends Component {
     return(
       <div className="table" id="table">
         <TableOfFilmsHeader />
-        <AfficheList articles={articles} />
+        <AfficheList articles={articles}/>
       </div>
     );
   }

src/components/AfficheList.js

@@ -1,15 +1,59 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Article from './Article';
-import articles from './films';
-
-function AfficheList() {
-  return (
-    <div className="price-tags">
-      { 
-        articles.map(article => <Article article={article} key={article.id} />) 
-      }
-    </div>
-  );
+import $ from 'jquery';
+import uniqueId from 'lodash.uniqueid';
+
+class AfficheList extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {}
+
+    this.performSearch('avengers');
+  }
+
+  performSearch(searchWord) { 
+    console.log('Perform search using moviedb');
+    const urlString = 'https://api.themoviedb.org/3/search/movie?api_key=0db50d1e81184cc04e761a3e55b0ee62&query=' + searchWord;
+    $.ajax({ 
+        url: urlString,
+        success: searchResults => { 
+          console.log("success!");
+          const movies = searchResults.results;
+          var movieRows = [];
+          movies.forEach( movie => {
+            movie.poster_src = 'https://image.tmdb.org/t/p/w185' + movie.poster_path;
+            console.log(movie);
+            var movieRow = <Article key={ uniqueId('movie_') } movie={ movie }/>;
+            movieRows.push(movieRow);
+          })
+          this.setState({
+            rows: movieRows
+          })
+        }, 
+        error: (xhr, status, err) => { 
+            console.error('faild!'); 
+        } 
+    }) 
+  }
+
+  searchChangeHandler = e => {
+    console.log(e.target.value);
+    const searchWord = e.target.value;
+    this.performSearch(searchWord)
+  }
+
+  render() {
+    const { rows } = this.state
+    return (
+      <>
+        <input onChange={this.searchChangeHandler} placeholder="Search"/>
+        <div className="price-tags">
+          { rows }
+        </div>
+      </>
+    );
+  }
 }
 
 export default AfficheList;

src/components/Article.js

@@ -1,13 +1,12 @@
 import React from 'react';
 
 
-function Article({ article: { name, time, description } }) {
+function Article({ movie }) {
     return (
-      <div className="price-tag">
-        <img src="./img/dragon.jpg" alt="img"/>
-        <span>{ name }</span>
-        <h4>{ time }<sub>minutes</sub></h4>
-        <p>{ description }</p>
+      <div className="price-tag" key={movie.id}>
+        <img src={ movie.poster_src } alt="poster"/>
+        <h2>{ movie.title }</h2>
+        <h4>{ movie.release_date }<sub>release</sub></h4>
         <button className="price-btn">select a film</button>
       </div>
     );

src/components/Authorization.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
 class Authorization extends Component {
 
@@ -29,4 +30,8 @@ class Authorization extends Component {
   }
 }
 
+Authorization.propTypes = {
+  onTriggerModal: PropTypes.func
+}
+
 export default Authorization;

src/components/Footer.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import FooterTop from './FooterTop';
 import FooterBottom from './FooterBottom';
+import PropTypes from 'prop-types';
 
 class Footer extends Component {
   render(){
@@ -15,4 +16,8 @@ class Footer extends Component {
   }
 }
 
+Footer.propTypes = {
+  onHandleTriggerModal: PropTypes.func
+}
+
 export default Footer;

src/components/FooterNavigation.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 class FooterNavigation extends Component {
   render() {
@@ -18,4 +19,8 @@ class FooterNavigation extends Component {
   }
 }
 
+FooterNavigation.propTypes = {
+  onHandleTriggerModal: PropTypes.func
+}
+
 export default FooterNavigation;

src/components/FooterTop.js

@@ -1,25 +1,27 @@
 import React, {Component} from 'react';
 import logo from '../img/logomin.png';
 import FooterNavigation from './FooterNavigation';
+import PropTypes from 'prop-types';
 
 class FooterTop extends Component {
   render() {
     const { onHandleTriggerModal } = this.props;
 
     return (
-      <>
-        <div className="footer">
-          <div className="logo">
-            <a href="#"> <img src={logo} alt="logo" /> </a>
-          </div>
-          <div className="footer-menu">
-            <FooterNavigation onHandleTriggerModal={ onHandleTriggerModal }/>
-          </div>
+      <div className="footer">
+        <div className="logo">
+          <a href="#"> <img src={logo} alt="logo" /> </a>
         </div>
-        <hr />
-      </>
+        <div className="footer-menu">
+          <FooterNavigation onHandleTriggerModal={ onHandleTriggerModal }/>
+        </div>
+      </div>
     );
-    }
+  }
+}
+
+FooterTop.propTypes = {
+  onHandleTriggerModal: PropTypes.func
 }
 
 export default FooterTop;

src/components/Menu.js

@@ -3,12 +3,12 @@ import logo from '../img/logomin.png';
 import MiniMenu from './MiniMenu';
 import {Link} from 'react-router-dom';
 import SearchInput from './SearchInput';
+import PropTypes from 'prop-types';
 
 class Menu extends Component {
 
   state = {
     isOpenMiniMenu: false,
-    animatedClass: '',
     isOpenSearchInput: false
   }
 
@@ -36,11 +36,10 @@ class Menu extends Component {
   render(){
     const { onHandleTriggerModal } = this.props;
     const { isOpenMiniMenu, isOpenSearchInput } =  this.state;
-    const animatedClass = isOpenMiniMenu ? 'animated' : '';
 
     return (
       <>
-        { isOpenMiniMenu && <MiniMenu onHandleTriggerModal={ onHandleTriggerModal } handleRemoveMiniMenu={ this.handleRemoveMiniMenu } onAnimatedClass={ animatedClass } handleTriggerSearch={ this.handleTriggerSearch } isOpenSearchInput={ isOpenSearchInput } /> }
+        { isOpenMiniMenu && <MiniMenu onHandleTriggerModal={ onHandleTriggerModal } handleRemoveMiniMenu={ this.handleRemoveMiniMenu } handleTriggerSearch={ this.handleTriggerSearch } isOpenSearchInput={ isOpenSearchInput } /> }
         <div className="header">
           <div className="logo">
             <a href="#"><img src={logo} alt="logo" /> </a>
@@ -68,4 +67,8 @@ class Menu extends Component {
   }
 }
 
+Menu.propTypes = {
+  onHandleTriggerModal: PropTypes.func
+}
+
 export default Menu;

src/components/MiniMenu.js

@@ -1,15 +1,16 @@
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
 import SearchInput from './SearchInput';
+import PropTypes from 'prop-types';
 
 class MiniMenu extends Component {
 
   render(){
 
-    const { onHandleTriggerModal, onAnimatedClass, handleRemoveMiniMenu, handleTriggerSearch, isOpenSearchInput } = this.props;
+    const { onHandleTriggerModal, handleRemoveMiniMenu, handleTriggerSearch, isOpenSearchInput } = this.props;
 
     return (
-      <ul className={`m-menu ${onAnimatedClass}`} id="m-menu">
+      <ul className="m-menu" id="m-menu">
         <li className="close-menu" onClick={ handleRemoveMiniMenu }>&times;</li>
         <li><Link to="/" className="menu-link">Home</Link></li>
         <li><Link to="/affiche" className="menu-link">Affiche</Link></li>
@@ -26,4 +27,11 @@ class MiniMenu extends Component {
   }
 }
 
+MiniMenu.propTypes = {
+  onHandleTriggerModal: PropTypes.func,
+  handleRemoveMiniMenu: PropTypes.func,
+  handleTriggerSearch: PropTypes.func,
+  isOpenSearchInput: PropTypes.bool
+}
+
 export default MiniMenu;

src/components/PremiereList.js

@@ -1,15 +1,54 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Article from './Article';
-import articles from './films';
-
-function PremiereList() {
-  return (
-    <div className="price-tags">
-      <Article article={articles[0]} key={articles.id} />
-      <Article article={articles[1]} key={articles.id} />
-      <Article article={articles[2]} key={articles.id} />
-    </div>
-  );
+import $ from 'jquery';
+import uniqueId from 'lodash.uniqueid';
+
+class PremiereList extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {}
+
+    this.performSearch();
+  }
+
+  performSearch() { 
+    console.log('Perform search using moviedb');
+    const urlString = 'https://api.themoviedb.org/3/movie/popular?api_key=0db50d1e81184cc04e761a3e55b0ee62&language=en-US&page=1';
+    $.ajax({ 
+        url: urlString,
+        success: searchResults => { 
+          console.log("success!");
+          const movies = searchResults.results;
+          var movieRows = [];
+          movies.forEach( movie => {
+            movie.poster_src = 'https://image.tmdb.org/t/p/w185' + movie.poster_path;
+            var movieRow = <Article key={ uniqueId('movie_') } movie={ movie }/>;
+            movieRows.push(movieRow);
+            console.log(movieRows.length);
+            for (var i=0; i<3; i++) {
+              movieRows.splice(3, movieRows.length);
+            }
+          })
+          this.setState({
+            rows: movieRows
+          })
+        }, 
+        error: (xhr, status, err) => { 
+            console.error('faild!'); 
+        } 
+    }) 
+  }
+
+  render() {
+    const { rows } = this.state
+
+    return (
+      <div className="price-tags">
+        { rows }
+      </div>
+    );
+  }
 }
 
 export default PremiereList;

src/components/Registration.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
 class Registration extends Component {
 
@@ -34,4 +35,8 @@ class Registration extends Component {
   }
 }
 
+Registration.propTypes = {
+  onTriggerModal: PropTypes.func
+}
+
 export default Registration;