From 15675fa4e5f44150b9137442292672f36e09a20e Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Fri, 28 Sep 2018 14:22:02 +0100
Subject: [PATCH 01/14] initial set-up and complete get movie details function

---
 package-lock.json        |  5 +++
 package.json             |  1 +
 src/components/App.js    | 39 +++++++++++++++++++++++-
 src/components/Movie.js  | 66 ++++++++++++++++++++++++++++++++++++++++
 src/components/Movies.js | 28 +++++++++++++++++
 src/components/Search.js | 35 +++++++++++++++++++++
 6 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Movie.js
 create mode 100644 src/components/Movies.js
 create mode 100644 src/components/Search.js

diff --git a/package-lock.json b/package-lock.json
index 8ca987c..5905a1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1915,6 +1915,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
diff --git a/package.json b/package.json
index 26c045b..4c6f8e3 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
diff --git a/src/components/App.js b/src/components/App.js
index 9520f77..1499d88 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,14 +1,51 @@
+//`http://www.omdbapi.com/?s=${keyWord}&apikey=d2807699&page=${page}`
+
 import React from 'react';
+import cx from 'classnames'
+import Search from './Search';
+import Movies from './Movies';
+import Movie from './Movie';
 
 class App extends React.Component {
   constructor(){
     super();
+    this.state={
+      movies:[],
+      keyWord:""
+    }
+    this.fetchMovies = this.fetchMovies.bind(this);
+    this.receiveSearchInput = this.receiveSearchInput.bind(this);
+  }
+
+
+
+  receiveSearchInput(input){
+    this.setState({
+      keyWord:input
+    })
+  }
+
+  fetchMovies(){
+    //console.log(this.state.keyWord)
+    let moviesUrl=`http://www.omdbapi.com/?s=${this.state.keyWord}&apikey=d2807699`
+    fetch(moviesUrl)
+    .then(response => response.json())
+    .then(body => {
+
+      this.setState({
+        movies:body.Search
+      })
+
+    })
+
   }
 
   render(){
+    //console.log(this.state)
     return (
       <div>
-        React cinema app
+        <Search receiveSearchInput={this.receiveSearchInput} keyWord={this.state.keyWord} fetchMovies={this.fetchMovies}/>
+        <Movies movies={this.state.movies}/>
       </div>
     )
   }
diff --git a/src/components/Movie.js b/src/components/Movie.js
new file mode 100644
index 0000000..ad25bef
--- /dev/null
+++ b/src/components/Movie.js
@@ -0,0 +1,66 @@
+
+//url = `http://www.omdbapi.com/?i=${id}&plot=full&apikey=d2807699`
+
+import React from 'react';
+
+
+class Movie extends React.Component{
+  constructor(){
+    super();
+    this.state ={
+      movieDetails:{},
+      showDetails:false
+    }
+
+    this.handleClick = this.handleClick.bind(this);
+    this.fetchMovieDetails = this.fetchMovieDetails.bind(this);
+
+  }
+
+  handleClick(){
+    this.fetchMovieDetails();
+    this.setState({
+      showDetails:!this.state.showDetails
+    })
+  }
+
+  fetchMovieDetails(){
+    //console.log(this.state.keyWord)
+    let detailsUrl=`http://www.omdbapi.com/?i=${this.props.id}&plot=full&apikey=d2807699`
+    fetch(detailsUrl)
+    .then(response => response.json())
+    .then(body => {
+      //console.log(body)
+      this.setState({
+        movieDetails:body
+      })
+
+    })
+
+  }
+
+  render(){
+    return(
+      <div className='movie' onClick={this.handleClick} id={this.props.id}>
+        <h2>{this.props.title}</h2>
+        <h3>{this.props.year}</h3>
+        <img src={this.props.image}/>
+        {this.state.showDetails?
+          <ul>
+          <li>{this.state.movieDetails.Director}</li>
+          <li>{this.state.movieDetails.Actors}</li>
+          {this.state.movieDetails.Ratings == undefined?"":
+          <li>{this.state.movieDetails.Ratings.map(rating => {
+                return <p>{rating.Source}: {rating.Value}</p>
+                }
+              )}
+          </li>}
+
+          <li>{this.state.movieDetails.Plot}</li>
+        </ul> : ""}
+      </div>
+    )
+  }
+}
+
+export default Movie;
diff --git a/src/components/Movies.js b/src/components/Movies.js
new file mode 100644
index 0000000..5b169f6
--- /dev/null
+++ b/src/components/Movies.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import Movie from './Movie';
+
+class Movies extends React.Component{
+  constructor(){
+    super();
+  }
+
+  render(){
+    console.log(this.props.movies)
+    return(
+      <div className='movies' >
+      {this.props.movies.map(movie => {
+
+        return  <Movie
+          title={movie.Title}
+          year={movie.Year}
+          key={movie.imdbID}
+          id={movie.imdbID}
+          image={movie.Poster}
+          />
+      })}
+      </div>
+    )
+  }
+}
+
+export default Movies;
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..8f553d5
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+class Search extends React.Component{
+  constructor(){
+    super();
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this)
+    }
+
+
+  handleChange(event){
+    this.props.receiveSearchInput(event.target.value)
+    //console.log(event.target.value)
+    //receiveSearchInput(event.)
+  }
+
+  handleSubmit(event){
+    event.preventDefault();
+    this.props.fetchMovies();
+  }
+
+  render(){
+
+    return(
+      <form onSubmit={this.handleSubmit}>
+        <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
+        <button>Search</button>
+      </form>
+
+    )
+  }
+
+}
+
+export default Search;

From df9bc23fe08cb9541e6c1bb6ecc90c7473756858 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Fri, 28 Sep 2018 15:49:36 +0100
Subject: [PATCH 02/14] pagination done

---
 src/components/App.js    | 23 ++++++++++++++++++++---
 src/components/Movies.js |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 1499d88..b748c11 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,19 +5,33 @@ import cx from 'classnames'
 import Search from './Search';
 import Movies from './Movies';
 import Movie from './Movie';
+import Pagination from './Pagination';
+import FavList from './FavList';
 
 class App extends React.Component {
   constructor(){
     super();
     this.state={
       movies:[],
-      keyWord:""
+      keyWord:"",
+      page:1,
+      totalPages:""
     }
     this.fetchMovies = this.fetchMovies.bind(this);
     this.receiveSearchInput = this.receiveSearchInput.bind(this);
+    this.receivePageChange = this.receivePageChange.bind(this);
   }
 
+  receivePageChange(value){
+    const newPage=this.state.page+parseInt(value);
 
+      this.setState({
+        page:newPage
+      }, () => this.fetchMovies())
+
+
+
+  }
 
   receiveSearchInput(input){
     this.setState({
@@ -27,13 +41,14 @@ class App extends React.Component {
 
   fetchMovies(){
     //console.log(this.state.keyWord)
-    let moviesUrl=`http://www.omdbapi.com/?s=${this.state.keyWord}&apikey=d2807699`
+    let moviesUrl=`http://www.omdbapi.com/?s=${this.state.keyWord}&page=${this.state.page}&apikey=d2807699`
     fetch(moviesUrl)
     .then(response => response.json())
     .then(body => {
 
       this.setState({
-        movies:body.Search
+        movies:body.Search,
+        totalPages:Math.ceil(body.totalResults/10)
       })
 
     })
@@ -45,6 +60,8 @@ class App extends React.Component {
     return (
       <div>
         <Search receiveSearchInput={this.receiveSearchInput} keyWord={this.state.keyWord} fetchMovies={this.fetchMovies}/>
+        <Pagination receivePageChange={this.receivePageChange} page={this.state.page} totalPages={this.state.totalPages}/>
+        {/* <FavList/> */}
         <Movies movies={this.state.movies}/>
       </div>
     )
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 5b169f6..12891fc 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -7,7 +7,7 @@ class Movies extends React.Component{
   }
 
   render(){
-    console.log(this.props.movies)
+    
     return(
       <div className='movies' >
       {this.props.movies.map(movie => {

From 10814bf56ed232374045e71d8f19fe3a595f3011 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sat, 29 Sep 2018 14:29:17 +0100
Subject: [PATCH 03/14] add favorites to local storage

---
 package-lock.json            | 2736 ++++++++++++++++++++++++++++++++++
 package.json                 |    5 +
 src/components/App.js        |  107 +-
 src/components/FavList.js    |   21 +
 src/components/Movie.js      |   22 +-
 src/components/Movies.js     |   67 +-
 src/components/Pagination.js |   26 +
 7 files changed, 2923 insertions(+), 61 deletions(-)
 create mode 100644 src/components/FavList.js
 create mode 100644 src/components/Pagination.js

diff --git a/package-lock.json b/package-lock.json
index 5905a1f..e27cebf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,36 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.4.tgz",
+      "integrity": "sha512-0qbIVm+MzkxMwKDx8V0C7w/6Nk+ZfBseOn2R1YK0f2DQP5pBcOQbu9NmaVaLzbJK6VJb1TuyTf0ZF97rc6iWJQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.4.tgz",
+      "integrity": "sha512-oGtnwcdhJomoDxbJcy6S0JxK6ItDhJLNOujm+qILPqajJ2a0P/YRomzBbixFjAPquCoyPUlA9g9ejA22P7TKNA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.4"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.3.1.tgz",
+      "integrity": "sha512-NkiLBFoiHtJ89cPJdM+W6cLvTVKkLh3j9t3MxkXyip0ncdD3lhCunSuzvFcrTHWeETEyoClGd8ZIWrr3HFZ3BA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.4"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.3.tgz",
+      "integrity": "sha512-tc689l67rPZ7+ynZVUgOXY80rAt5KxvuH1qjPpJcbyJzJHzk5yhrD993BjsSEdPBLTtPqmvwynsO/XrAQqHbtg==",
+      "requires": {
+        "humps": "^2.0.1",
+        "prop-types": "^15.5.10"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -4057,6 +4087,16 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
+    },
+    "i": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/i/-/i-0.3.6.tgz",
+      "integrity": "sha1-2WyScyB28HJxG2sQ/X1PZa2O4j0="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -5519,6 +5559,2702 @@
         "remove-trailing-separator": "^1.0.1"
       }
     },
+    "npm": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-6.4.1.tgz",
+      "integrity": "sha512-mXJL1NTVU136PtuopXCUQaNWuHlXCTp4McwlSW8S9/Aj8OEPAlSBgo8og7kJ01MjCDrkmqFQTvN5tTEhBMhXQg==",
+      "requires": {
+        "JSONStream": "^1.3.4",
+        "abbrev": "~1.1.1",
+        "ansicolors": "~0.3.2",
+        "ansistyles": "~0.1.3",
+        "aproba": "~1.2.0",
+        "archy": "~1.0.0",
+        "bin-links": "^1.1.2",
+        "bluebird": "~3.5.1",
+        "byte-size": "^4.0.3",
+        "cacache": "^11.2.0",
+        "call-limit": "~1.1.0",
+        "chownr": "~1.0.1",
+        "ci-info": "^1.4.0",
+        "cli-columns": "^3.1.2",
+        "cli-table3": "^0.5.0",
+        "cmd-shim": "~2.0.2",
+        "columnify": "~1.5.4",
+        "config-chain": "~1.1.11",
+        "debuglog": "*",
+        "detect-indent": "~5.0.0",
+        "detect-newline": "^2.1.0",
+        "dezalgo": "~1.0.3",
+        "editor": "~1.0.0",
+        "figgy-pudding": "^3.4.1",
+        "find-npm-prefix": "^1.0.2",
+        "fs-vacuum": "~1.2.10",
+        "fs-write-stream-atomic": "~1.0.10",
+        "gentle-fs": "^2.0.1",
+        "glob": "~7.1.2",
+        "graceful-fs": "~4.1.11",
+        "has-unicode": "~2.0.1",
+        "hosted-git-info": "^2.7.1",
+        "iferr": "^1.0.2",
+        "imurmurhash": "*",
+        "inflight": "~1.0.6",
+        "inherits": "~2.0.3",
+        "ini": "^1.3.5",
+        "init-package-json": "^1.10.3",
+        "is-cidr": "^2.0.6",
+        "json-parse-better-errors": "^1.0.2",
+        "lazy-property": "~1.0.0",
+        "libcipm": "^2.0.2",
+        "libnpmhook": "^4.0.1",
+        "libnpx": "^10.2.0",
+        "lock-verify": "^2.0.2",
+        "lockfile": "^1.0.4",
+        "lodash._baseindexof": "*",
+        "lodash._baseuniq": "~4.6.0",
+        "lodash._bindcallback": "*",
+        "lodash._cacheindexof": "*",
+        "lodash._createcache": "*",
+        "lodash._getnative": "*",
+        "lodash.clonedeep": "~4.5.0",
+        "lodash.restparam": "*",
+        "lodash.union": "~4.6.0",
+        "lodash.uniq": "~4.5.0",
+        "lodash.without": "~4.4.0",
+        "lru-cache": "^4.1.3",
+        "meant": "~1.0.1",
+        "mississippi": "^3.0.0",
+        "mkdirp": "~0.5.1",
+        "move-concurrently": "^1.0.1",
+        "node-gyp": "^3.8.0",
+        "nopt": "~4.0.1",
+        "normalize-package-data": "~2.4.0",
+        "npm-audit-report": "^1.3.1",
+        "npm-cache-filename": "~1.0.2",
+        "npm-install-checks": "~3.0.0",
+        "npm-lifecycle": "^2.1.0",
+        "npm-package-arg": "^6.1.0",
+        "npm-packlist": "^1.1.11",
+        "npm-pick-manifest": "^2.1.0",
+        "npm-profile": "^3.0.2",
+        "npm-registry-client": "^8.6.0",
+        "npm-registry-fetch": "^1.1.0",
+        "npm-user-validate": "~1.0.0",
+        "npmlog": "~4.1.2",
+        "once": "~1.4.0",
+        "opener": "^1.5.0",
+        "osenv": "^0.1.5",
+        "pacote": "^8.1.6",
+        "path-is-inside": "~1.0.2",
+        "promise-inflight": "~1.0.1",
+        "qrcode-terminal": "^0.12.0",
+        "query-string": "^6.1.0",
+        "qw": "~1.0.1",
+        "read": "~1.0.7",
+        "read-cmd-shim": "~1.0.1",
+        "read-installed": "~4.0.3",
+        "read-package-json": "^2.0.13",
+        "read-package-tree": "^5.2.1",
+        "readable-stream": "^2.3.6",
+        "readdir-scoped-modules": "*",
+        "request": "^2.88.0",
+        "retry": "^0.12.0",
+        "rimraf": "~2.6.2",
+        "safe-buffer": "^5.1.2",
+        "semver": "^5.5.0",
+        "sha": "~2.0.1",
+        "slide": "~1.1.6",
+        "sorted-object": "~2.0.1",
+        "sorted-union-stream": "~2.1.3",
+        "ssri": "^6.0.0",
+        "stringify-package": "^1.0.0",
+        "tar": "^4.4.6",
+        "text-table": "~0.2.0",
+        "tiny-relative-date": "^1.3.0",
+        "uid-number": "0.0.6",
+        "umask": "~1.1.0",
+        "unique-filename": "~1.1.0",
+        "unpipe": "~1.0.0",
+        "update-notifier": "^2.5.0",
+        "uuid": "^3.3.2",
+        "validate-npm-package-license": "^3.0.4",
+        "validate-npm-package-name": "~3.0.0",
+        "which": "^1.3.1",
+        "worker-farm": "^1.6.0",
+        "write-file-atomic": "^2.3.0"
+      },
+      "dependencies": {
+        "JSONStream": {
+          "version": "1.3.4",
+          "bundled": true,
+          "requires": {
+            "jsonparse": "^1.2.0",
+            "through": ">=2.2.7 <3"
+          }
+        },
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true
+        },
+        "agent-base": {
+          "version": "4.2.0",
+          "bundled": true,
+          "requires": {
+            "es6-promisify": "^5.0.0"
+          }
+        },
+        "agentkeepalive": {
+          "version": "3.4.1",
+          "bundled": true,
+          "requires": {
+            "humanize-ms": "^1.2.1"
+          }
+        },
+        "ajv": {
+          "version": "5.5.2",
+          "bundled": true,
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
+        "ansi-align": {
+          "version": "2.0.0",
+          "bundled": true,
+          "requires": {
+            "string-width": "^2.0.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "bundled": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "ansicolors": {
+          "version": "0.3.2",
+          "bundled": true
+        },
+        "ansistyles": {
+          "version": "0.1.3",
+          "bundled": true
+        },
+        "aproba": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "archy": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "requires": {
+            "delegates": "^1.0.0",
+            "readable-stream": "^2.0.6"
+          }
+        },
+        "asap": {
+          "version": "2.0.6",
+          "bundled": true
+        },
+        "asn1": {
+          "version": "0.2.4",
+          "bundled": true,
+          "requires": {
+            "safer-buffer": "~2.1.0"
+          }
+        },
+        "assert-plus": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "bundled": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "bundled": true
+        },
+        "aws4": {
+          "version": "1.8.0",
+          "bundled": true
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "^0.14.3"
+          }
+        },
+        "bin-links": {
+          "version": "1.1.2",
+          "bundled": true,
+          "requires": {
+            "bluebird": "^3.5.0",
+            "cmd-shim": "^2.0.2",
+            "gentle-fs": "^2.0.0",
+            "graceful-fs": "^4.1.11",
+            "write-file-atomic": "^2.3.0"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "bundled": true,
+          "requires": {
+            "inherits": "~2.0.0"
+          }
+        },
+        "bluebird": {
+          "version": "3.5.1",
+          "bundled": true
+        },
+        "boxen": {
+          "version": "1.3.0",
+          "bundled": true,
+          "requires": {
+            "ansi-align": "^2.0.0",
+            "camelcase": "^4.0.0",
+            "chalk": "^2.0.1",
+            "cli-boxes": "^1.0.0",
+            "string-width": "^2.0.0",
+            "term-size": "^1.2.0",
+            "widest-line": "^2.0.0"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "bundled": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-from": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "builtin-modules": {
+          "version": "1.1.1",
+          "bundled": true
+        },
+        "builtins": {
+          "version": "1.0.3",
+          "bundled": true
+        },
+        "byline": {
+          "version": "5.0.0",
+          "bundled": true
+        },
+        "byte-size": {
+          "version": "4.0.3",
+          "bundled": true
+        },
+        "cacache": {
+          "version": "11.2.0",
+          "bundled": true,
+          "requires": {
+            "bluebird": "^3.5.1",
+            "chownr": "^1.0.1",
+            "figgy-pudding": "^3.1.0",
+            "glob": "^7.1.2",
+            "graceful-fs": "^4.1.11",
+            "lru-cache": "^4.1.3",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.6.2",
+            "ssri": "^6.0.0",
+            "unique-filename": "^1.1.0",
+            "y18n": "^4.0.0"
+          }
+        },
+        "call-limit": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "bundled": true
+        },
+        "capture-stack-trace": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "bundled": true
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "bundled": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "chownr": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "ci-info": {
+          "version": "1.4.0",
+          "bundled": true
+        },
+        "cidr-regex": {
+          "version": "2.0.9",
+          "bundled": true,
+          "requires": {
+            "ip-regex": "^2.1.0"
+          }
+        },
+        "cli-boxes": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "cli-columns": {
+          "version": "3.1.2",
+          "bundled": true,
+          "requires": {
+            "string-width": "^2.0.0",
+            "strip-ansi": "^3.0.1"
+          }
+        },
+        "cli-table3": {
+          "version": "0.5.0",
+          "bundled": true,
+          "requires": {
+            "colors": "^1.1.2",
+            "object-assign": "^4.1.0",
+            "string-width": "^2.1.1"
+          }
+        },
+        "cliui": {
+          "version": "4.1.0",
+          "bundled": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.0",
+              "bundled": true
+            },
+            "strip-ansi": {
+              "version": "4.0.0",
+              "bundled": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
+          }
+        },
+        "clone": {
+          "version": "1.0.4",
+          "bundled": true
+        },
+        "cmd-shim": {
+          "version": "2.0.2",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "mkdirp": "~0.5.0"
+          }
+        },
+        "co": {
+          "version": "4.6.0",
+          "bundled": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "color-convert": {
+          "version": "1.9.1",
+          "bundled": true,
+          "requires": {
+            "color-name": "^1.1.1"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "bundled": true
+        },
+        "colors": {
+          "version": "1.1.2",
+          "bundled": true,
+          "optional": true
+        },
+        "columnify": {
+          "version": "1.5.4",
+          "bundled": true,
+          "requires": {
+            "strip-ansi": "^3.0.0",
+            "wcwidth": "^1.0.0"
+          }
+        },
+        "combined-stream": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "delayed-stream": "~1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true
+        },
+        "concat-stream": {
+          "version": "1.6.2",
+          "bundled": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "inherits": "^2.0.3",
+            "readable-stream": "^2.2.2",
+            "typedarray": "^0.0.6"
+          }
+        },
+        "config-chain": {
+          "version": "1.1.11",
+          "bundled": true,
+          "requires": {
+            "ini": "^1.3.4",
+            "proto-list": "~1.2.1"
+          }
+        },
+        "configstore": {
+          "version": "3.1.2",
+          "bundled": true,
+          "requires": {
+            "dot-prop": "^4.1.0",
+            "graceful-fs": "^4.1.2",
+            "make-dir": "^1.0.0",
+            "unique-string": "^1.0.0",
+            "write-file-atomic": "^2.0.0",
+            "xdg-basedir": "^3.0.0"
+          }
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "copy-concurrently": {
+          "version": "1.0.5",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.1.1",
+            "fs-write-stream-atomic": "^1.0.8",
+            "iferr": "^0.1.5",
+            "mkdirp": "^0.5.1",
+            "rimraf": "^2.5.4",
+            "run-queue": "^1.0.0"
+          },
+          "dependencies": {
+            "iferr": {
+              "version": "0.1.5",
+              "bundled": true
+            }
+          }
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "create-error-class": {
+          "version": "3.0.2",
+          "bundled": true,
+          "requires": {
+            "capture-stack-trace": "^1.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "bundled": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "crypto-random-string": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "cyclist": {
+          "version": "0.2.2",
+          "bundled": true
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "^1.0.0"
+          }
+        },
+        "debug": {
+          "version": "3.1.0",
+          "bundled": true,
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "bundled": true
+            }
+          }
+        },
+        "debuglog": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "decamelize": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "decode-uri-component": {
+          "version": "0.2.0",
+          "bundled": true
+        },
+        "deep-extend": {
+          "version": "0.5.1",
+          "bundled": true
+        },
+        "defaults": {
+          "version": "1.0.3",
+          "bundled": true,
+          "requires": {
+            "clone": "^1.0.2"
+          }
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "detect-indent": {
+          "version": "5.0.0",
+          "bundled": true
+        },
+        "detect-newline": {
+          "version": "2.1.0",
+          "bundled": true
+        },
+        "dezalgo": {
+          "version": "1.0.3",
+          "bundled": true,
+          "requires": {
+            "asap": "^2.0.0",
+            "wrappy": "1"
+          }
+        },
+        "dot-prop": {
+          "version": "4.2.0",
+          "bundled": true,
+          "requires": {
+            "is-obj": "^1.0.0"
+          }
+        },
+        "dotenv": {
+          "version": "5.0.1",
+          "bundled": true
+        },
+        "duplexer3": {
+          "version": "0.1.4",
+          "bundled": true
+        },
+        "duplexify": {
+          "version": "3.6.0",
+          "bundled": true,
+          "requires": {
+            "end-of-stream": "^1.0.0",
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.0",
+            "stream-shift": "^1.0.0"
+          }
+        },
+        "ecc-jsbn": {
+          "version": "0.1.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "~0.1.0",
+            "safer-buffer": "^2.1.0"
+          }
+        },
+        "editor": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "encoding": {
+          "version": "0.1.12",
+          "bundled": true,
+          "requires": {
+            "iconv-lite": "~0.4.13"
+          }
+        },
+        "end-of-stream": {
+          "version": "1.4.1",
+          "bundled": true,
+          "requires": {
+            "once": "^1.4.0"
+          }
+        },
+        "err-code": {
+          "version": "1.1.2",
+          "bundled": true
+        },
+        "errno": {
+          "version": "0.1.7",
+          "bundled": true,
+          "requires": {
+            "prr": "~1.0.1"
+          }
+        },
+        "es6-promise": {
+          "version": "4.2.4",
+          "bundled": true
+        },
+        "es6-promisify": {
+          "version": "5.0.0",
+          "bundled": true,
+          "requires": {
+            "es6-promise": "^4.0.3"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "bundled": true
+        },
+        "execa": {
+          "version": "0.7.0",
+          "bundled": true,
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "extend": {
+          "version": "3.0.2",
+          "bundled": true
+        },
+        "extsprintf": {
+          "version": "1.3.0",
+          "bundled": true
+        },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "fast-json-stable-stringify": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "figgy-pudding": {
+          "version": "3.4.1",
+          "bundled": true
+        },
+        "find-npm-prefix": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "flush-write-stream": {
+          "version": "1.0.3",
+          "bundled": true,
+          "requires": {
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.4"
+          }
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "bundled": true
+        },
+        "form-data": {
+          "version": "2.3.2",
+          "bundled": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "1.0.6",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "from2": {
+          "version": "2.3.0",
+          "bundled": true,
+          "requires": {
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.0"
+          }
+        },
+        "fs-minipass": {
+          "version": "1.2.5",
+          "bundled": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
+        },
+        "fs-vacuum": {
+          "version": "1.2.10",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "path-is-inside": "^1.0.1",
+            "rimraf": "^2.5.2"
+          }
+        },
+        "fs-write-stream-atomic": {
+          "version": "1.0.10",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "iferr": "^0.1.5",
+            "imurmurhash": "^0.1.4",
+            "readable-stream": "1 || 2"
+          },
+          "dependencies": {
+            "iferr": {
+              "version": "0.1.5",
+              "bundled": true
+            }
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "fstream": {
+          "version": "1.0.11",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "inherits": "~2.0.0",
+            "mkdirp": ">=0.5 0",
+            "rimraf": "2"
+          }
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.0.3",
+            "console-control-strings": "^1.0.0",
+            "has-unicode": "^2.0.0",
+            "object-assign": "^4.1.0",
+            "signal-exit": "^3.0.0",
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wide-align": "^1.1.0"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "1.0.2",
+              "bundled": true,
+              "requires": {
+                "code-point-at": "^1.0.0",
+                "is-fullwidth-code-point": "^1.0.0",
+                "strip-ansi": "^3.0.0"
+              }
+            }
+          }
+        },
+        "genfun": {
+          "version": "4.0.1",
+          "bundled": true
+        },
+        "gentle-fs": {
+          "version": "2.0.1",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.1.2",
+            "fs-vacuum": "^1.2.10",
+            "graceful-fs": "^4.1.11",
+            "iferr": "^0.1.5",
+            "mkdirp": "^0.5.1",
+            "path-is-inside": "^1.0.2",
+            "read-cmd-shim": "^1.0.1",
+            "slide": "^1.1.6"
+          },
+          "dependencies": {
+            "iferr": {
+              "version": "0.1.5",
+              "bundled": true
+            }
+          }
+        },
+        "get-caller-file": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "bundled": true
+        },
+        "getpass": {
+          "version": "0.1.7",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "global-dirs": {
+          "version": "0.1.1",
+          "bundled": true,
+          "requires": {
+            "ini": "^1.3.4"
+          }
+        },
+        "got": {
+          "version": "6.7.1",
+          "bundled": true,
+          "requires": {
+            "create-error-class": "^3.0.0",
+            "duplexer3": "^0.1.4",
+            "get-stream": "^3.0.0",
+            "is-redirect": "^1.0.0",
+            "is-retry-allowed": "^1.0.0",
+            "is-stream": "^1.0.0",
+            "lowercase-keys": "^1.0.0",
+            "safe-buffer": "^5.0.1",
+            "timed-out": "^4.0.0",
+            "unzip-response": "^2.0.1",
+            "url-parse-lax": "^1.0.0"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "bundled": true
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "har-validator": {
+          "version": "5.1.0",
+          "bundled": true,
+          "requires": {
+            "ajv": "^5.3.0",
+            "har-schema": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "bundled": true
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "hosted-git-info": {
+          "version": "2.7.1",
+          "bundled": true
+        },
+        "http-cache-semantics": {
+          "version": "3.8.1",
+          "bundled": true
+        },
+        "http-proxy-agent": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "agent-base": "4",
+            "debug": "3.1.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "^1.0.0",
+            "jsprim": "^1.2.2",
+            "sshpk": "^1.7.0"
+          }
+        },
+        "https-proxy-agent": {
+          "version": "2.2.1",
+          "bundled": true,
+          "requires": {
+            "agent-base": "^4.1.0",
+            "debug": "^3.1.0"
+          }
+        },
+        "humanize-ms": {
+          "version": "1.2.1",
+          "bundled": true,
+          "requires": {
+            "ms": "^2.0.0"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.23",
+          "bundled": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
+        "iferr": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "ignore-walk": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "minimatch": "^3.0.4"
+          }
+        },
+        "import-lazy": {
+          "version": "2.1.0",
+          "bundled": true
+        },
+        "imurmurhash": {
+          "version": "0.1.4",
+          "bundled": true
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "once": "^1.3.0",
+            "wrappy": "1"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true
+        },
+        "ini": {
+          "version": "1.3.5",
+          "bundled": true
+        },
+        "init-package-json": {
+          "version": "1.10.3",
+          "bundled": true,
+          "requires": {
+            "glob": "^7.1.1",
+            "npm-package-arg": "^4.0.0 || ^5.0.0 || ^6.0.0",
+            "promzard": "^0.3.0",
+            "read": "~1.0.1",
+            "read-package-json": "1 || 2",
+            "semver": "2.x || 3.x || 4 || 5",
+            "validate-npm-package-license": "^3.0.1",
+            "validate-npm-package-name": "^3.0.0"
+          }
+        },
+        "invert-kv": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "ip": {
+          "version": "1.1.5",
+          "bundled": true
+        },
+        "ip-regex": {
+          "version": "2.1.0",
+          "bundled": true
+        },
+        "is-builtin-module": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "builtin-modules": "^1.0.0"
+          }
+        },
+        "is-ci": {
+          "version": "1.1.0",
+          "bundled": true,
+          "requires": {
+            "ci-info": "^1.0.0"
+          }
+        },
+        "is-cidr": {
+          "version": "2.0.6",
+          "bundled": true,
+          "requires": {
+            "cidr-regex": "^2.0.8"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "is-installed-globally": {
+          "version": "0.1.0",
+          "bundled": true,
+          "requires": {
+            "global-dirs": "^0.1.0",
+            "is-path-inside": "^1.0.0"
+          }
+        },
+        "is-npm": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "is-obj": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "is-path-inside": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "path-is-inside": "^1.0.1"
+          }
+        },
+        "is-redirect": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "is-retry-allowed": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "isexe": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "bundled": true
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "json-parse-better-errors": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "bundled": true
+        },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "bundled": true
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "bundled": true
+        },
+        "jsonparse": {
+          "version": "1.3.1",
+          "bundled": true
+        },
+        "jsprim": {
+          "version": "1.4.1",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "extsprintf": "1.3.0",
+            "json-schema": "0.2.3",
+            "verror": "1.10.0"
+          }
+        },
+        "latest-version": {
+          "version": "3.1.0",
+          "bundled": true,
+          "requires": {
+            "package-json": "^4.0.0"
+          }
+        },
+        "lazy-property": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "lcid": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "invert-kv": "^1.0.0"
+          }
+        },
+        "libcipm": {
+          "version": "2.0.2",
+          "bundled": true,
+          "requires": {
+            "bin-links": "^1.1.2",
+            "bluebird": "^3.5.1",
+            "find-npm-prefix": "^1.0.2",
+            "graceful-fs": "^4.1.11",
+            "lock-verify": "^2.0.2",
+            "mkdirp": "^0.5.1",
+            "npm-lifecycle": "^2.0.3",
+            "npm-logical-tree": "^1.2.1",
+            "npm-package-arg": "^6.1.0",
+            "pacote": "^8.1.6",
+            "protoduck": "^5.0.0",
+            "read-package-json": "^2.0.13",
+            "rimraf": "^2.6.2",
+            "worker-farm": "^1.6.0"
+          }
+        },
+        "libnpmhook": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "figgy-pudding": "^3.1.0",
+            "npm-registry-fetch": "^3.0.0"
+          },
+          "dependencies": {
+            "npm-registry-fetch": {
+              "version": "3.1.1",
+              "bundled": true,
+              "requires": {
+                "bluebird": "^3.5.1",
+                "figgy-pudding": "^3.1.0",
+                "lru-cache": "^4.1.2",
+                "make-fetch-happen": "^4.0.0",
+                "npm-package-arg": "^6.0.0"
+              }
+            }
+          }
+        },
+        "libnpx": {
+          "version": "10.2.0",
+          "bundled": true,
+          "requires": {
+            "dotenv": "^5.0.1",
+            "npm-package-arg": "^6.0.0",
+            "rimraf": "^2.6.2",
+            "safe-buffer": "^5.1.0",
+            "update-notifier": "^2.3.0",
+            "which": "^1.3.0",
+            "y18n": "^4.0.0",
+            "yargs": "^11.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "bundled": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "lock-verify": {
+          "version": "2.0.2",
+          "bundled": true,
+          "requires": {
+            "npm-package-arg": "^5.1.2 || 6",
+            "semver": "^5.4.1"
+          }
+        },
+        "lockfile": {
+          "version": "1.0.4",
+          "bundled": true,
+          "requires": {
+            "signal-exit": "^3.0.2"
+          }
+        },
+        "lodash._baseindexof": {
+          "version": "3.1.0",
+          "bundled": true
+        },
+        "lodash._baseuniq": {
+          "version": "4.6.0",
+          "bundled": true,
+          "requires": {
+            "lodash._createset": "~4.0.0",
+            "lodash._root": "~3.0.0"
+          }
+        },
+        "lodash._bindcallback": {
+          "version": "3.0.1",
+          "bundled": true
+        },
+        "lodash._cacheindexof": {
+          "version": "3.0.2",
+          "bundled": true
+        },
+        "lodash._createcache": {
+          "version": "3.1.2",
+          "bundled": true,
+          "requires": {
+            "lodash._getnative": "^3.0.0"
+          }
+        },
+        "lodash._createset": {
+          "version": "4.0.3",
+          "bundled": true
+        },
+        "lodash._getnative": {
+          "version": "3.9.1",
+          "bundled": true
+        },
+        "lodash._root": {
+          "version": "3.0.1",
+          "bundled": true
+        },
+        "lodash.clonedeep": {
+          "version": "4.5.0",
+          "bundled": true
+        },
+        "lodash.restparam": {
+          "version": "3.6.1",
+          "bundled": true
+        },
+        "lodash.union": {
+          "version": "4.6.0",
+          "bundled": true
+        },
+        "lodash.uniq": {
+          "version": "4.5.0",
+          "bundled": true
+        },
+        "lodash.without": {
+          "version": "4.4.0",
+          "bundled": true
+        },
+        "lowercase-keys": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "lru-cache": {
+          "version": "4.1.3",
+          "bundled": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "make-dir": {
+          "version": "1.3.0",
+          "bundled": true,
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "make-fetch-happen": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "agentkeepalive": "^3.4.1",
+            "cacache": "^11.0.1",
+            "http-cache-semantics": "^3.8.1",
+            "http-proxy-agent": "^2.1.0",
+            "https-proxy-agent": "^2.2.1",
+            "lru-cache": "^4.1.2",
+            "mississippi": "^3.0.0",
+            "node-fetch-npm": "^2.0.2",
+            "promise-retry": "^1.1.1",
+            "socks-proxy-agent": "^4.0.0",
+            "ssri": "^6.0.0"
+          }
+        },
+        "meant": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "mem": {
+          "version": "1.1.0",
+          "bundled": true,
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "mime-db": {
+          "version": "1.35.0",
+          "bundled": true
+        },
+        "mime-types": {
+          "version": "2.1.19",
+          "bundled": true,
+          "requires": {
+            "mime-db": "~1.35.0"
+          }
+        },
+        "mimic-fn": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true
+        },
+        "minipass": {
+          "version": "2.3.3",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.0"
+          },
+          "dependencies": {
+            "yallist": {
+              "version": "3.0.2",
+              "bundled": true
+            }
+          }
+        },
+        "minizlib": {
+          "version": "1.1.0",
+          "bundled": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
+        },
+        "mississippi": {
+          "version": "3.0.0",
+          "bundled": true,
+          "requires": {
+            "concat-stream": "^1.5.0",
+            "duplexify": "^3.4.2",
+            "end-of-stream": "^1.1.0",
+            "flush-write-stream": "^1.0.0",
+            "from2": "^2.1.0",
+            "parallel-transform": "^1.1.0",
+            "pump": "^3.0.0",
+            "pumpify": "^1.3.3",
+            "stream-each": "^1.1.0",
+            "through2": "^2.0.0"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "move-concurrently": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.1.1",
+            "copy-concurrently": "^1.0.0",
+            "fs-write-stream-atomic": "^1.0.8",
+            "mkdirp": "^0.5.1",
+            "rimraf": "^2.5.4",
+            "run-queue": "^1.0.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "mute-stream": {
+          "version": "0.0.7",
+          "bundled": true
+        },
+        "node-fetch-npm": {
+          "version": "2.0.2",
+          "bundled": true,
+          "requires": {
+            "encoding": "^0.1.11",
+            "json-parse-better-errors": "^1.0.0",
+            "safe-buffer": "^5.1.1"
+          }
+        },
+        "node-gyp": {
+          "version": "3.8.0",
+          "bundled": true,
+          "requires": {
+            "fstream": "^1.0.0",
+            "glob": "^7.0.3",
+            "graceful-fs": "^4.1.2",
+            "mkdirp": "^0.5.0",
+            "nopt": "2 || 3",
+            "npmlog": "0 || 1 || 2 || 3 || 4",
+            "osenv": "0",
+            "request": "^2.87.0",
+            "rimraf": "2",
+            "semver": "~5.3.0",
+            "tar": "^2.0.0",
+            "which": "1"
+          },
+          "dependencies": {
+            "nopt": {
+              "version": "3.0.6",
+              "bundled": true,
+              "requires": {
+                "abbrev": "1"
+              }
+            },
+            "semver": {
+              "version": "5.3.0",
+              "bundled": true
+            },
+            "tar": {
+              "version": "2.2.1",
+              "bundled": true,
+              "requires": {
+                "block-stream": "*",
+                "fstream": "^1.0.2",
+                "inherits": "2"
+              }
+            }
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "abbrev": "1",
+            "osenv": "^0.1.4"
+          }
+        },
+        "normalize-package-data": {
+          "version": "2.4.0",
+          "bundled": true,
+          "requires": {
+            "hosted-git-info": "^2.1.4",
+            "is-builtin-module": "^1.0.0",
+            "semver": "2 || 3 || 4 || 5",
+            "validate-npm-package-license": "^3.0.1"
+          }
+        },
+        "npm-audit-report": {
+          "version": "1.3.1",
+          "bundled": true,
+          "requires": {
+            "cli-table3": "^0.5.0",
+            "console-control-strings": "^1.1.0"
+          }
+        },
+        "npm-bundled": {
+          "version": "1.0.5",
+          "bundled": true
+        },
+        "npm-cache-filename": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "npm-install-checks": {
+          "version": "3.0.0",
+          "bundled": true,
+          "requires": {
+            "semver": "^2.3.0 || 3.x || 4 || 5"
+          }
+        },
+        "npm-lifecycle": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "byline": "^5.0.0",
+            "graceful-fs": "^4.1.11",
+            "node-gyp": "^3.8.0",
+            "resolve-from": "^4.0.0",
+            "slide": "^1.1.6",
+            "uid-number": "0.0.6",
+            "umask": "^1.1.0",
+            "which": "^1.3.1"
+          }
+        },
+        "npm-logical-tree": {
+          "version": "1.2.1",
+          "bundled": true
+        },
+        "npm-package-arg": {
+          "version": "6.1.0",
+          "bundled": true,
+          "requires": {
+            "hosted-git-info": "^2.6.0",
+            "osenv": "^0.1.5",
+            "semver": "^5.5.0",
+            "validate-npm-package-name": "^3.0.0"
+          }
+        },
+        "npm-packlist": {
+          "version": "1.1.11",
+          "bundled": true,
+          "requires": {
+            "ignore-walk": "^3.0.1",
+            "npm-bundled": "^1.0.1"
+          }
+        },
+        "npm-pick-manifest": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "npm-package-arg": "^6.0.0",
+            "semver": "^5.4.1"
+          }
+        },
+        "npm-profile": {
+          "version": "3.0.2",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.1.2 || 2",
+            "make-fetch-happen": "^2.5.0 || 3 || 4"
+          }
+        },
+        "npm-registry-client": {
+          "version": "8.6.0",
+          "bundled": true,
+          "requires": {
+            "concat-stream": "^1.5.2",
+            "graceful-fs": "^4.1.6",
+            "normalize-package-data": "~1.0.1 || ^2.0.0",
+            "npm-package-arg": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
+            "npmlog": "2 || ^3.1.0 || ^4.0.0",
+            "once": "^1.3.3",
+            "request": "^2.74.0",
+            "retry": "^0.10.0",
+            "safe-buffer": "^5.1.1",
+            "semver": "2 >=2.2.1 || 3.x || 4 || 5",
+            "slide": "^1.1.3",
+            "ssri": "^5.2.4"
+          },
+          "dependencies": {
+            "retry": {
+              "version": "0.10.1",
+              "bundled": true
+            },
+            "ssri": {
+              "version": "5.3.0",
+              "bundled": true,
+              "requires": {
+                "safe-buffer": "^5.1.1"
+              }
+            }
+          }
+        },
+        "npm-registry-fetch": {
+          "version": "1.1.0",
+          "bundled": true,
+          "requires": {
+            "bluebird": "^3.5.1",
+            "figgy-pudding": "^2.0.1",
+            "lru-cache": "^4.1.2",
+            "make-fetch-happen": "^3.0.0",
+            "npm-package-arg": "^6.0.0",
+            "safe-buffer": "^5.1.1"
+          },
+          "dependencies": {
+            "cacache": {
+              "version": "10.0.4",
+              "bundled": true,
+              "requires": {
+                "bluebird": "^3.5.1",
+                "chownr": "^1.0.1",
+                "glob": "^7.1.2",
+                "graceful-fs": "^4.1.11",
+                "lru-cache": "^4.1.1",
+                "mississippi": "^2.0.0",
+                "mkdirp": "^0.5.1",
+                "move-concurrently": "^1.0.1",
+                "promise-inflight": "^1.0.1",
+                "rimraf": "^2.6.2",
+                "ssri": "^5.2.4",
+                "unique-filename": "^1.1.0",
+                "y18n": "^4.0.0"
+              },
+              "dependencies": {
+                "mississippi": {
+                  "version": "2.0.0",
+                  "bundled": true,
+                  "requires": {
+                    "concat-stream": "^1.5.0",
+                    "duplexify": "^3.4.2",
+                    "end-of-stream": "^1.1.0",
+                    "flush-write-stream": "^1.0.0",
+                    "from2": "^2.1.0",
+                    "parallel-transform": "^1.1.0",
+                    "pump": "^2.0.1",
+                    "pumpify": "^1.3.3",
+                    "stream-each": "^1.1.0",
+                    "through2": "^2.0.0"
+                  }
+                }
+              }
+            },
+            "figgy-pudding": {
+              "version": "2.0.1",
+              "bundled": true
+            },
+            "make-fetch-happen": {
+              "version": "3.0.0",
+              "bundled": true,
+              "requires": {
+                "agentkeepalive": "^3.4.1",
+                "cacache": "^10.0.4",
+                "http-cache-semantics": "^3.8.1",
+                "http-proxy-agent": "^2.1.0",
+                "https-proxy-agent": "^2.2.0",
+                "lru-cache": "^4.1.2",
+                "mississippi": "^3.0.0",
+                "node-fetch-npm": "^2.0.2",
+                "promise-retry": "^1.1.1",
+                "socks-proxy-agent": "^3.0.1",
+                "ssri": "^5.2.4"
+              }
+            },
+            "pump": {
+              "version": "2.0.1",
+              "bundled": true,
+              "requires": {
+                "end-of-stream": "^1.1.0",
+                "once": "^1.3.1"
+              }
+            },
+            "smart-buffer": {
+              "version": "1.1.15",
+              "bundled": true
+            },
+            "socks": {
+              "version": "1.1.10",
+              "bundled": true,
+              "requires": {
+                "ip": "^1.1.4",
+                "smart-buffer": "^1.0.13"
+              }
+            },
+            "socks-proxy-agent": {
+              "version": "3.0.1",
+              "bundled": true,
+              "requires": {
+                "agent-base": "^4.1.0",
+                "socks": "^1.1.10"
+              }
+            },
+            "ssri": {
+              "version": "5.3.0",
+              "bundled": true,
+              "requires": {
+                "safe-buffer": "^5.1.1"
+              }
+            }
+          }
+        },
+        "npm-run-path": {
+          "version": "2.0.2",
+          "bundled": true,
+          "requires": {
+            "path-key": "^2.0.0"
+          }
+        },
+        "npm-user-validate": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "npmlog": {
+          "version": "4.1.2",
+          "bundled": true,
+          "requires": {
+            "are-we-there-yet": "~1.1.2",
+            "console-control-strings": "~1.1.0",
+            "gauge": "~2.7.3",
+            "set-blocking": "~2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "bundled": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        },
+        "opener": {
+          "version": "1.5.0",
+          "bundled": true
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "os-locale": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "execa": "^0.7.0",
+            "lcid": "^1.0.0",
+            "mem": "^1.1.0"
+          }
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "osenv": {
+          "version": "0.1.5",
+          "bundled": true,
+          "requires": {
+            "os-homedir": "^1.0.0",
+            "os-tmpdir": "^1.0.0"
+          }
+        },
+        "p-finally": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "p-limit": {
+          "version": "1.2.0",
+          "bundled": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "bundled": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "package-json": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "got": "^6.7.1",
+            "registry-auth-token": "^3.0.1",
+            "registry-url": "^3.0.3",
+            "semver": "^5.1.0"
+          }
+        },
+        "pacote": {
+          "version": "8.1.6",
+          "bundled": true,
+          "requires": {
+            "bluebird": "^3.5.1",
+            "cacache": "^11.0.2",
+            "get-stream": "^3.0.0",
+            "glob": "^7.1.2",
+            "lru-cache": "^4.1.3",
+            "make-fetch-happen": "^4.0.1",
+            "minimatch": "^3.0.4",
+            "minipass": "^2.3.3",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "normalize-package-data": "^2.4.0",
+            "npm-package-arg": "^6.1.0",
+            "npm-packlist": "^1.1.10",
+            "npm-pick-manifest": "^2.1.0",
+            "osenv": "^0.1.5",
+            "promise-inflight": "^1.0.1",
+            "promise-retry": "^1.1.1",
+            "protoduck": "^5.0.0",
+            "rimraf": "^2.6.2",
+            "safe-buffer": "^5.1.2",
+            "semver": "^5.5.0",
+            "ssri": "^6.0.0",
+            "tar": "^4.4.3",
+            "unique-filename": "^1.1.0",
+            "which": "^1.3.0"
+          }
+        },
+        "parallel-transform": {
+          "version": "1.1.0",
+          "bundled": true,
+          "requires": {
+            "cyclist": "~0.2.2",
+            "inherits": "^2.0.3",
+            "readable-stream": "^2.1.5"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "bundled": true
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "path-is-inside": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "path-key": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "bundled": true
+        },
+        "pify": {
+          "version": "3.0.0",
+          "bundled": true
+        },
+        "prepend-http": {
+          "version": "1.0.4",
+          "bundled": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "promise-inflight": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "promise-retry": {
+          "version": "1.1.1",
+          "bundled": true,
+          "requires": {
+            "err-code": "^1.0.0",
+            "retry": "^0.10.0"
+          },
+          "dependencies": {
+            "retry": {
+              "version": "0.10.1",
+              "bundled": true
+            }
+          }
+        },
+        "promzard": {
+          "version": "0.3.0",
+          "bundled": true,
+          "requires": {
+            "read": "1"
+          }
+        },
+        "proto-list": {
+          "version": "1.2.4",
+          "bundled": true
+        },
+        "protoduck": {
+          "version": "5.0.0",
+          "bundled": true,
+          "requires": {
+            "genfun": "^4.0.1"
+          }
+        },
+        "prr": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "pseudomap": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "psl": {
+          "version": "1.1.29",
+          "bundled": true
+        },
+        "pump": {
+          "version": "3.0.0",
+          "bundled": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "pumpify": {
+          "version": "1.5.1",
+          "bundled": true,
+          "requires": {
+            "duplexify": "^3.6.0",
+            "inherits": "^2.0.3",
+            "pump": "^2.0.0"
+          },
+          "dependencies": {
+            "pump": {
+              "version": "2.0.1",
+              "bundled": true,
+              "requires": {
+                "end-of-stream": "^1.1.0",
+                "once": "^1.3.1"
+              }
+            }
+          }
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "bundled": true
+        },
+        "qrcode-terminal": {
+          "version": "0.12.0",
+          "bundled": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "bundled": true
+        },
+        "query-string": {
+          "version": "6.1.0",
+          "bundled": true,
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "strict-uri-encode": "^2.0.0"
+          }
+        },
+        "qw": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "rc": {
+          "version": "1.2.7",
+          "bundled": true,
+          "requires": {
+            "deep-extend": "^0.5.1",
+            "ini": "~1.3.0",
+            "minimist": "^1.2.0",
+            "strip-json-comments": "~2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true
+            }
+          }
+        },
+        "read": {
+          "version": "1.0.7",
+          "bundled": true,
+          "requires": {
+            "mute-stream": "~0.0.4"
+          }
+        },
+        "read-cmd-shim": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.2"
+          }
+        },
+        "read-installed": {
+          "version": "4.0.3",
+          "bundled": true,
+          "requires": {
+            "debuglog": "^1.0.1",
+            "graceful-fs": "^4.1.2",
+            "read-package-json": "^2.0.0",
+            "readdir-scoped-modules": "^1.0.0",
+            "semver": "2 || 3 || 4 || 5",
+            "slide": "~1.1.3",
+            "util-extend": "^1.0.1"
+          }
+        },
+        "read-package-json": {
+          "version": "2.0.13",
+          "bundled": true,
+          "requires": {
+            "glob": "^7.1.1",
+            "graceful-fs": "^4.1.2",
+            "json-parse-better-errors": "^1.0.1",
+            "normalize-package-data": "^2.0.0",
+            "slash": "^1.0.0"
+          }
+        },
+        "read-package-tree": {
+          "version": "5.2.1",
+          "bundled": true,
+          "requires": {
+            "debuglog": "^1.0.1",
+            "dezalgo": "^1.0.0",
+            "once": "^1.3.0",
+            "read-package-json": "^2.0.0",
+            "readdir-scoped-modules": "^1.0.0"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "bundled": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "readdir-scoped-modules": {
+          "version": "1.0.2",
+          "bundled": true,
+          "requires": {
+            "debuglog": "^1.0.1",
+            "dezalgo": "^1.0.0",
+            "graceful-fs": "^4.1.2",
+            "once": "^1.3.0"
+          }
+        },
+        "registry-auth-token": {
+          "version": "3.3.2",
+          "bundled": true,
+          "requires": {
+            "rc": "^1.1.6",
+            "safe-buffer": "^5.0.1"
+          }
+        },
+        "registry-url": {
+          "version": "3.1.0",
+          "bundled": true,
+          "requires": {
+            "rc": "^1.0.1"
+          }
+        },
+        "request": {
+          "version": "2.88.0",
+          "bundled": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.0",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.4.3",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "require-directory": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "bundled": true
+        },
+        "retry": {
+          "version": "0.12.0",
+          "bundled": true
+        },
+        "rimraf": {
+          "version": "2.6.2",
+          "bundled": true,
+          "requires": {
+            "glob": "^7.0.5"
+          }
+        },
+        "run-queue": {
+          "version": "1.0.3",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.1.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "bundled": true
+        },
+        "safer-buffer": {
+          "version": "2.1.2",
+          "bundled": true
+        },
+        "semver": {
+          "version": "5.5.0",
+          "bundled": true
+        },
+        "semver-diff": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "semver": "^5.0.3"
+          }
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "sha": {
+          "version": "2.0.1",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "shebang-command": {
+          "version": "1.2.0",
+          "bundled": true,
+          "requires": {
+            "shebang-regex": "^1.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true
+        },
+        "slash": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "slide": {
+          "version": "1.1.6",
+          "bundled": true
+        },
+        "smart-buffer": {
+          "version": "4.0.1",
+          "bundled": true
+        },
+        "socks": {
+          "version": "2.2.0",
+          "bundled": true,
+          "requires": {
+            "ip": "^1.1.5",
+            "smart-buffer": "^4.0.1"
+          }
+        },
+        "socks-proxy-agent": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "agent-base": "~4.2.0",
+            "socks": "~2.2.0"
+          }
+        },
+        "sorted-object": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "sorted-union-stream": {
+          "version": "2.1.3",
+          "bundled": true,
+          "requires": {
+            "from2": "^1.3.0",
+            "stream-iterate": "^1.1.0"
+          },
+          "dependencies": {
+            "from2": {
+              "version": "1.3.0",
+              "bundled": true,
+              "requires": {
+                "inherits": "~2.0.1",
+                "readable-stream": "~1.1.10"
+              }
+            },
+            "isarray": {
+              "version": "0.0.1",
+              "bundled": true
+            },
+            "readable-stream": {
+              "version": "1.1.14",
+              "bundled": true,
+              "requires": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.1",
+                "isarray": "0.0.1",
+                "string_decoder": "~0.10.x"
+              }
+            },
+            "string_decoder": {
+              "version": "0.10.31",
+              "bundled": true
+            }
+          }
+        },
+        "spdx-correct": {
+          "version": "3.0.0",
+          "bundled": true,
+          "requires": {
+            "spdx-expression-parse": "^3.0.0",
+            "spdx-license-ids": "^3.0.0"
+          }
+        },
+        "spdx-exceptions": {
+          "version": "2.1.0",
+          "bundled": true
+        },
+        "spdx-expression-parse": {
+          "version": "3.0.0",
+          "bundled": true,
+          "requires": {
+            "spdx-exceptions": "^2.1.0",
+            "spdx-license-ids": "^3.0.0"
+          }
+        },
+        "spdx-license-ids": {
+          "version": "3.0.0",
+          "bundled": true
+        },
+        "sshpk": {
+          "version": "1.14.2",
+          "bundled": true,
+          "requires": {
+            "asn1": "~0.2.3",
+            "assert-plus": "^1.0.0",
+            "bcrypt-pbkdf": "^1.0.0",
+            "dashdash": "^1.12.0",
+            "ecc-jsbn": "~0.1.1",
+            "getpass": "^0.1.1",
+            "jsbn": "~0.1.0",
+            "safer-buffer": "^2.0.2",
+            "tweetnacl": "~0.14.0"
+          }
+        },
+        "ssri": {
+          "version": "6.0.0",
+          "bundled": true
+        },
+        "stream-each": {
+          "version": "1.2.2",
+          "bundled": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "stream-shift": "^1.0.0"
+          }
+        },
+        "stream-iterate": {
+          "version": "1.2.0",
+          "bundled": true,
+          "requires": {
+            "readable-stream": "^2.1.5",
+            "stream-shift": "^1.0.0"
+          }
+        },
+        "stream-shift": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "strict-uri-encode": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "bundled": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.0",
+              "bundled": true
+            },
+            "is-fullwidth-code-point": {
+              "version": "2.0.0",
+              "bundled": true
+            },
+            "strip-ansi": {
+              "version": "4.0.0",
+              "bundled": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "stringify-package": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "strip-eof": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "supports-color": {
+          "version": "5.4.0",
+          "bundled": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "tar": {
+          "version": "4.4.6",
+          "bundled": true,
+          "requires": {
+            "chownr": "^1.0.1",
+            "fs-minipass": "^1.2.5",
+            "minipass": "^2.3.3",
+            "minizlib": "^1.1.0",
+            "mkdirp": "^0.5.0",
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.2"
+          },
+          "dependencies": {
+            "yallist": {
+              "version": "3.0.2",
+              "bundled": true
+            }
+          }
+        },
+        "term-size": {
+          "version": "1.2.0",
+          "bundled": true,
+          "requires": {
+            "execa": "^0.7.0"
+          }
+        },
+        "text-table": {
+          "version": "0.2.0",
+          "bundled": true
+        },
+        "through": {
+          "version": "2.3.8",
+          "bundled": true
+        },
+        "through2": {
+          "version": "2.0.3",
+          "bundled": true,
+          "requires": {
+            "readable-stream": "^2.1.5",
+            "xtend": "~4.0.1"
+          }
+        },
+        "timed-out": {
+          "version": "4.0.1",
+          "bundled": true
+        },
+        "tiny-relative-date": {
+          "version": "1.3.0",
+          "bundled": true
+        },
+        "tough-cookie": {
+          "version": "2.4.3",
+          "bundled": true,
+          "requires": {
+            "psl": "^1.1.24",
+            "punycode": "^1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "^5.0.1"
+          }
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "bundled": true,
+          "optional": true
+        },
+        "typedarray": {
+          "version": "0.0.6",
+          "bundled": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "bundled": true
+        },
+        "umask": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "unique-filename": {
+          "version": "1.1.0",
+          "bundled": true,
+          "requires": {
+            "unique-slug": "^2.0.0"
+          }
+        },
+        "unique-slug": {
+          "version": "2.0.0",
+          "bundled": true,
+          "requires": {
+            "imurmurhash": "^0.1.4"
+          }
+        },
+        "unique-string": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "crypto-random-string": "^1.0.0"
+          }
+        },
+        "unpipe": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "unzip-response": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "update-notifier": {
+          "version": "2.5.0",
+          "bundled": true,
+          "requires": {
+            "boxen": "^1.2.1",
+            "chalk": "^2.0.1",
+            "configstore": "^3.0.0",
+            "import-lazy": "^2.1.0",
+            "is-ci": "^1.0.10",
+            "is-installed-globally": "^0.1.0",
+            "is-npm": "^1.0.0",
+            "latest-version": "^3.0.0",
+            "semver-diff": "^2.0.0",
+            "xdg-basedir": "^3.0.0"
+          }
+        },
+        "url-parse-lax": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "prepend-http": "^1.0.1"
+          }
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "util-extend": {
+          "version": "1.0.3",
+          "bundled": true
+        },
+        "uuid": {
+          "version": "3.3.2",
+          "bundled": true
+        },
+        "validate-npm-package-license": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "spdx-correct": "^3.0.0",
+            "spdx-expression-parse": "^3.0.0"
+          }
+        },
+        "validate-npm-package-name": {
+          "version": "3.0.0",
+          "bundled": true,
+          "requires": {
+            "builtins": "^1.0.3"
+          }
+        },
+        "verror": {
+          "version": "1.10.0",
+          "bundled": true,
+          "requires": {
+            "assert-plus": "^1.0.0",
+            "core-util-is": "1.0.2",
+            "extsprintf": "^1.2.0"
+          }
+        },
+        "wcwidth": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "defaults": "^1.0.3"
+          }
+        },
+        "which": {
+          "version": "1.3.1",
+          "bundled": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "requires": {
+            "string-width": "^1.0.2"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "1.0.2",
+              "bundled": true,
+              "requires": {
+                "code-point-at": "^1.0.0",
+                "is-fullwidth-code-point": "^1.0.0",
+                "strip-ansi": "^3.0.0"
+              }
+            }
+          }
+        },
+        "widest-line": {
+          "version": "2.0.0",
+          "bundled": true,
+          "requires": {
+            "string-width": "^2.1.1"
+          }
+        },
+        "worker-farm": {
+          "version": "1.6.0",
+          "bundled": true,
+          "requires": {
+            "errno": "~0.1.7"
+          }
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "bundled": true,
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "1.0.2",
+              "bundled": true,
+              "requires": {
+                "code-point-at": "^1.0.0",
+                "is-fullwidth-code-point": "^1.0.0",
+                "strip-ansi": "^3.0.0"
+              }
+            }
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "write-file-atomic": {
+          "version": "2.3.0",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "imurmurhash": "^0.1.4",
+            "signal-exit": "^3.0.2"
+          }
+        },
+        "xdg-basedir": {
+          "version": "3.0.0",
+          "bundled": true
+        },
+        "xtend": {
+          "version": "4.0.1",
+          "bundled": true
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "bundled": true
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "bundled": true
+        },
+        "yargs": {
+          "version": "11.0.0",
+          "bundled": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.1.1",
+            "find-up": "^2.1.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^9.0.2"
+          },
+          "dependencies": {
+            "y18n": {
+              "version": "3.2.1",
+              "bundled": true
+            }
+          }
+        },
+        "yargs-parser": {
+          "version": "9.0.2",
+          "bundled": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
diff --git a/package.json b/package.json
index 4c6f8e3..8ecf1df 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,12 @@
     ]
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
+    "@fortawesome/react-fontawesome": "^0.1.3",
     "classnames": "^2.2.6",
+    "i": "^0.3.6",
+    "npm": "^6.4.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
diff --git a/src/components/App.js b/src/components/App.js
index b748c11..b7525f7 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,70 +1,93 @@
 //`http://www.omdbapi.com/?s=${keyWord}&apikey=d2807699&page=${page}`
 
-import React from 'react';
-import cx from 'classnames'
-import Search from './Search';
-import Movies from './Movies';
-import Movie from './Movie';
-import Pagination from './Pagination';
-import FavList from './FavList';
+import React from "react";
+import cx from "classnames";
+import Search from "./Search";
+import Movies from "./Movies";
+import Movie from "./Movie";
+import Pagination from "./Pagination";
+import FavList from "./FavList";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faStar);
 
 class App extends React.Component {
-  constructor(){
+  constructor() {
     super();
-    this.state={
-      movies:[],
-      keyWord:"",
-      page:1,
-      totalPages:""
-    }
+    this.state = {
+      movies: [],
+      keyWord: "",
+      page: 1,
+      totalPages: ""
+      // favList:[]
+    };
     this.fetchMovies = this.fetchMovies.bind(this);
     this.receiveSearchInput = this.receiveSearchInput.bind(this);
     this.receivePageChange = this.receivePageChange.bind(this);
-  }
-
-  receivePageChange(value){
-    const newPage=this.state.page+parseInt(value);
-
-      this.setState({
-        page:newPage
-      }, () => this.fetchMovies())
 
+  }
 
+  receivePageChange(value) {
+    const newPage = this.state.page + parseInt(value);
 
+    this.setState(
+      {
+        page: newPage
+      },
+      () => this.fetchMovies()
+    );
   }
 
-  receiveSearchInput(input){
+  receiveSearchInput(input) {
     this.setState({
-      keyWord:input
-    })
+      keyWord: input
+    });
   }
 
+  // receiveFavClick(id) {
+  //   this.setState({
+  //
+  //   })
+
+  
   fetchMovies(){
     //console.log(this.state.keyWord)
-    let moviesUrl=`http://www.omdbapi.com/?s=${this.state.keyWord}&page=${this.state.page}&apikey=d2807699`
+    let moviesUrl = `http://www.omdbapi.com/?s=${this.state.keyWord}&page=${
+      this.state.page
+    }&apikey=d2807699`;
     fetch(moviesUrl)
-    .then(response => response.json())
-    .then(body => {
-
-      this.setState({
-        movies:body.Search,
-        totalPages:Math.ceil(body.totalResults/10)
-      })
-
-    })
-
+      .then(response => response.json())
+      .then(body => {
+        this.setState({
+          movies: body.Search,
+          totalPages: Math.ceil(body.totalResults / 10)
+        });
+      });
   }
 
-  render(){
+  render() {
     //console.log(this.state)
     return (
       <div>
-        <Search receiveSearchInput={this.receiveSearchInput} keyWord={this.state.keyWord} fetchMovies={this.fetchMovies}/>
-        <Pagination receivePageChange={this.receivePageChange} page={this.state.page} totalPages={this.state.totalPages}/>
-        {/* <FavList/> */}
-        <Movies movies={this.state.movies}/>
+        <Search
+          receiveSearchInput={this.receiveSearchInput}
+          keyWord={this.state.keyWord}
+          fetchMovies={this.fetchMovies}
+        />
+        <Pagination
+          receivePageChange={this.receivePageChange}
+          page={this.state.page}
+          totalPages={this.state.totalPages}
+        />
+        {/* <FavList
+          movies={this.state.movies}
+          // receiveFavClick={this.receiveFavClick}
+        /> */}
+        <Movies movies={this.state.movies} />
       </div>
-    )
+    );
   }
 }
 
diff --git a/src/components/FavList.js b/src/components/FavList.js
new file mode 100644
index 0000000..2e4564f
--- /dev/null
+++ b/src/components/FavList.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+class FavList extends React.Component {
+  constructor(){
+    super();
+    // this.state={
+    //   favorites:[]
+    // }
+  }
+
+
+
+render(){
+  return (
+    <li>{this.props.title} {this.props.year}</li>
+  )
+}
+
+}
+
+export default FavList;
diff --git a/src/components/Movie.js b/src/components/Movie.js
index ad25bef..83195cc 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -2,6 +2,7 @@
 //url = `http://www.omdbapi.com/?i=${id}&plot=full&apikey=d2807699`
 
 import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 
 class Movie extends React.Component{
@@ -14,6 +15,7 @@ class Movie extends React.Component{
 
     this.handleClick = this.handleClick.bind(this);
     this.fetchMovieDetails = this.fetchMovieDetails.bind(this);
+    this.handleFavClick = this.handleFavClick.bind(this);
 
   }
 
@@ -24,6 +26,10 @@ class Movie extends React.Component{
     })
   }
 
+  handleFavClick(){
+    this.props.receiveFavClick(this.props.id)
+  }
+
   fetchMovieDetails(){
     //console.log(this.state.keyWord)
     let detailsUrl=`http://www.omdbapi.com/?i=${this.props.id}&plot=full&apikey=d2807699`
@@ -41,22 +47,24 @@ class Movie extends React.Component{
 
   render(){
     return(
-      <div className='movie' onClick={this.handleClick} id={this.props.id}>
+      <div className='movie' id={this.props.id}>
         <h2>{this.props.title}</h2>
         <h3>{this.props.year}</h3>
-        <img src={this.props.image}/>
+        <div><FontAwesomeIcon icon="star" onClick={this.handleFavClick}/></div>
+        <img onClick={this.handleClick} src={this.props.image}/>
+
         {this.state.showDetails?
           <ul>
-          <li>{this.state.movieDetails.Director}</li>
-          <li>{this.state.movieDetails.Actors}</li>
+          <li>Director: {this.state.movieDetails.Director}</li>
+          <li>Actors: {this.state.movieDetails.Actors}</li>
           {this.state.movieDetails.Ratings == undefined?"":
-          <li>{this.state.movieDetails.Ratings.map(rating => {
-                return <p>{rating.Source}: {rating.Value}</p>
+          <li>Ratings: {this.state.movieDetails.Ratings.map(rating => {
+                return <p key={rating.Source}>{rating.Source}: {rating.Value}</p>
                 }
               )}
           </li>}
 
-          <li>{this.state.movieDetails.Plot}</li>
+          <li>Description: {this.state.movieDetails.Plot}</li>
         </ul> : ""}
       </div>
     )
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 12891fc..3f2c5df 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -1,25 +1,68 @@
 import React from 'react';
 import Movie from './Movie';
+import FavList from './FavList';
+
+
+
 
 class Movies extends React.Component{
   constructor(){
     super();
+    this.state={
+      favList:[],
+      displayFav:false
+    }
+    this.receiveFavClick = this.receiveFavClick.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  receiveFavClick(id){
+
+    if(this.state.favList.filter(movie => movie.imdbID==id).length == 0){
+        const newMovie=this.props.movies.filter(movie => movie.imdbID == id)
+        this.state.favList.length==0?this.setState({favList:newMovie}):
+        this.setState({
+          favList: this.state.favList.concat(newMovie)
+        },()=>localStorage.setItem("favList", JSON.stringify(this.state.favList))
+        )
+    } else {
+        this.setState({
+          favList: this.state.favList.filter(movie => movie.imdbID !== id)
+      }, ()=>localStorage.setItem('favList',JSON.stringify(this.state.favList))
+    )}
+  }
+
+
+  handleClick(event){
+    this.setState({
+      displayFav:!this.state.displayFav
+    })
   }
 
   render(){
-    
+
     return(
-      <div className='movies' >
-      {this.props.movies.map(movie => {
-
-        return  <Movie
-          title={movie.Title}
-          year={movie.Year}
-          key={movie.imdbID}
-          id={movie.imdbID}
-          image={movie.Poster}
-          />
-      })}
+      <div>
+        <button onClick={this.handleClick}>Show my favorites</button>
+        {this.state.displayFav?<ul className='favorites'>
+          {this.state.favList.map(fav => {
+            return  <FavList title={fav.Title}
+              year={fav.Year} key={fav.imdbID}/>
+            })}
+        </ul>:""}
+        <div className='movies' >
+        {this.props.movies.map(movie => {
+
+          return  <Movie
+            title={movie.Title}
+            year={movie.Year}
+            key={movie.imdbID}
+            id={movie.imdbID}
+            image={movie.Poster}
+            receiveFavClick={this.receiveFavClick}
+            />
+        })}
+        </div>
       </div>
     )
   }
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..b1b72a0
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+class Pagination extends React.Component{
+  constructor(){
+    super();
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(event){
+
+    this.props.receivePageChange(event.target.name)
+
+  }
+
+  render(){
+    return (
+      <div onClick={this.handleClick}>
+        {this.props.page>1?<button name="-1">Previous page</button>:""}
+        {this.props.page<this.props.totalPages?<button name="1">Next page</button>:""}
+      </div>
+    )
+  }
+}
+
+
+export default Pagination;

From 1ae649700c616e75c4491e1424a3115bfe8cf555 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sat, 29 Sep 2018 16:51:56 +0100
Subject: [PATCH 04/14] search preview function included

---
 src/components/App.js     | 37 ++++++++++++++++++++++++-------------
 src/components/FavList.js | 21 ---------------------
 src/components/Movies.js  |  9 +++++----
 src/components/Search.js  | 35 ++++++++++++++++++++++++++---------
 4 files changed, 55 insertions(+), 47 deletions(-)
 delete mode 100644 src/components/FavList.js

diff --git a/src/components/App.js b/src/components/App.js
index b7525f7..e4bda18 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,9 +4,8 @@ import React from "react";
 import cx from "classnames";
 import Search from "./Search";
 import Movies from "./Movies";
-import Movie from "./Movie";
 import Pagination from "./Pagination";
-import FavList from "./FavList";
+
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons";
@@ -20,12 +19,14 @@ class App extends React.Component {
       movies: [],
       keyWord: "",
       page: 1,
-      totalPages: ""
+      totalPages: "",
+      preview:[]
       // favList:[]
     };
     this.fetchMovies = this.fetchMovies.bind(this);
     this.receiveSearchInput = this.receiveSearchInput.bind(this);
     this.receivePageChange = this.receivePageChange.bind(this);
+    this.fetchPreview = this.fetchPreview.bind(this);
 
   }
 
@@ -46,12 +47,20 @@ class App extends React.Component {
     });
   }
 
-  // receiveFavClick(id) {
-  //   this.setState({
-  //
-  //   })
+  fetchPreview(input){
+    let moviesUrl = `http://www.omdbapi.com/?s=${input}&apikey=d2807699`;
+    this.setState({preview:[]})
+    fetch(moviesUrl)
+      .then(response => response.json())
+      .then(body => {
+        const previewTitles=body.Search.map(movie => movie.Title);
+        this.setState({
+          preview: previewTitles
+        },()=> console.log(this.state.preview));
+
+      });
+  }
 
-  
   fetchMovies(){
     //console.log(this.state.keyWord)
     let moviesUrl = `http://www.omdbapi.com/?s=${this.state.keyWord}&page=${
@@ -61,8 +70,10 @@ class App extends React.Component {
       .then(response => response.json())
       .then(body => {
         this.setState({
+          keyWord:"",
           movies: body.Search,
-          totalPages: Math.ceil(body.totalResults / 10)
+          totalPages: Math.ceil(body.totalResults / 10),
+          preview:[]
         });
       });
   }
@@ -72,20 +83,20 @@ class App extends React.Component {
     return (
       <div>
         <Search
+          fetchPreview={this.fetchPreview}
           receiveSearchInput={this.receiveSearchInput}
           keyWord={this.state.keyWord}
           fetchMovies={this.fetchMovies}
+          preview={this.state.preview}
         />
         <Pagination
           receivePageChange={this.receivePageChange}
           page={this.state.page}
           totalPages={this.state.totalPages}
         />
-        {/* <FavList
+        <Movies
           movies={this.state.movies}
-          // receiveFavClick={this.receiveFavClick}
-        /> */}
-        <Movies movies={this.state.movies} />
+        />
       </div>
     );
   }
diff --git a/src/components/FavList.js b/src/components/FavList.js
deleted file mode 100644
index 2e4564f..0000000
--- a/src/components/FavList.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-class FavList extends React.Component {
-  constructor(){
-    super();
-    // this.state={
-    //   favorites:[]
-    // }
-  }
-
-
-
-render(){
-  return (
-    <li>{this.props.title} {this.props.year}</li>
-  )
-}
-
-}
-
-export default FavList;
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 3f2c5df..c7aac04 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Movie from './Movie';
-import FavList from './FavList';
+import FavMovie from './FavMovie';
 
 
 
@@ -40,13 +40,14 @@ class Movies extends React.Component{
   }
 
   render(){
-
+    const storageString=localStorage.getItem('favList')
+    let localFavList=!storageString ? []: JSON.parse(storageString)
     return(
       <div>
         <button onClick={this.handleClick}>Show my favorites</button>
         {this.state.displayFav?<ul className='favorites'>
-          {this.state.favList.map(fav => {
-            return  <FavList title={fav.Title}
+          {localFavList.map(fav => {
+            return  <FavMovie title={fav.Title}
               year={fav.Year} key={fav.imdbID}/>
             })}
         </ul>:""}
diff --git a/src/components/Search.js b/src/components/Search.js
index 8f553d5..ae365c2 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -3,33 +3,50 @@ import React from 'react';
 class Search extends React.Component{
   constructor(){
     super();
+
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this)
+
     }
 
 
   handleChange(event){
-    this.props.receiveSearchInput(event.target.value)
-    //console.log(event.target.value)
-    //receiveSearchInput(event.)
+    this.props.receiveSearchInput(event.target.value);
+    if(event.target.value.length>2){
+
+      this.props.fetchPreview(event.target.value)
+    } ;
+
   }
 
   handleSubmit(event){
     event.preventDefault();
     this.props.fetchMovies();
+
   }
 
-  render(){
 
+
+  render(){
     return(
-      <form onSubmit={this.handleSubmit}>
-        <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
-        <button>Search</button>
-      </form>
+        <div>
+        <form onSubmit={this.handleSubmit}>
+          <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
+          <button>Search</button>
+        </form>
+        {this.props.preview==undefined ? []:
+          <ul className='previews' onChange={this.handleChange}>
+          {this.props.preview.map(item=>{
+            return <li key={item}>{item}</li>
+            })
+          }
+          </ul>}
+        </div>
 
     )
   }
-
 }
 
+
+
 export default Search;

From b8e6f5a84603f50637a17c72664f906aff491e80 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sat, 29 Sep 2018 17:16:18 +0100
Subject: [PATCH 05/14] debug

---
 src/components/App.js      |  5 +++--
 src/components/FavMovie.js | 17 +++++++++++++++++
 src/components/Movies.js   |  4 ++++
 src/components/Preview.js  | 20 ++++++++++++++++++++
 src/components/Search.js   |  4 ++--
 5 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/components/FavMovie.js
 create mode 100644 src/components/Preview.js

diff --git a/src/components/App.js b/src/components/App.js
index e4bda18..17845b2 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -56,7 +56,7 @@ class App extends React.Component {
         const previewTitles=body.Search.map(movie => movie.Title);
         this.setState({
           preview: previewTitles
-        },()=> console.log(this.state.preview));
+        });
 
       });
   }
@@ -74,7 +74,8 @@ class App extends React.Component {
           movies: body.Search,
           totalPages: Math.ceil(body.totalResults / 10),
           preview:[]
-        });
+        },()=>console.log(this.state.movies))
+
       });
   }
 
diff --git a/src/components/FavMovie.js b/src/components/FavMovie.js
new file mode 100644
index 0000000..b31fff3
--- /dev/null
+++ b/src/components/FavMovie.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+class FavMovie extends React.Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <li>
+        {this.props.title} {this.props.year}
+      </li>
+    );
+  }
+}
+
+export default FavMovie;
diff --git a/src/components/Movies.js b/src/components/Movies.js
index c7aac04..8382654 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -40,8 +40,11 @@ class Movies extends React.Component{
   }
 
   render(){
+      console.log(this.props.movies);
+
     const storageString=localStorage.getItem('favList')
     let localFavList=!storageString ? []: JSON.parse(storageString)
+
     return(
       <div>
         <button onClick={this.handleClick}>Show my favorites</button>
@@ -52,6 +55,7 @@ class Movies extends React.Component{
             })}
         </ul>:""}
         <div className='movies' >
+
         {this.props.movies.map(movie => {
 
           return  <Movie
diff --git a/src/components/Preview.js b/src/components/Preview.js
new file mode 100644
index 0000000..dc7ff7a
--- /dev/null
+++ b/src/components/Preview.js
@@ -0,0 +1,20 @@
+// import React from 'react';
+//
+// class Preview extends React.Component{
+//   constructor(){
+//     super();
+//
+//   }
+//
+//
+//
+//
+//   render(){
+//     return(
+//
+//
+//     )
+//   }
+// }
+//
+// export default Preview;
diff --git a/src/components/Search.js b/src/components/Search.js
index ae365c2..19e5265 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -34,13 +34,13 @@ class Search extends React.Component{
           <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
           <button>Search</button>
         </form>
-        {this.props.preview==undefined ? []:
+        {/* {this.props.preview==undefined ? []:
           <ul className='previews' onChange={this.handleChange}>
           {this.props.preview.map(item=>{
             return <li key={item}>{item}</li>
             })
           }
-          </ul>}
+          </ul>} */}
         </div>
 
     )

From 97cb47332b679b685333a3e9901290c15037cbaa Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sat, 29 Sep 2018 19:52:57 +0100
Subject: [PATCH 06/14] fixed bug

---
 src/components/App.js    | 2 +-
 src/components/Search.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 17845b2..86b3d13 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -70,7 +70,7 @@ class App extends React.Component {
       .then(response => response.json())
       .then(body => {
         this.setState({
-          keyWord:"",
+          
           movies: body.Search,
           totalPages: Math.ceil(body.totalResults / 10),
           preview:[]
diff --git a/src/components/Search.js b/src/components/Search.js
index 19e5265..ae365c2 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -34,13 +34,13 @@ class Search extends React.Component{
           <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
           <button>Search</button>
         </form>
-        {/* {this.props.preview==undefined ? []:
+        {this.props.preview==undefined ? []:
           <ul className='previews' onChange={this.handleChange}>
           {this.props.preview.map(item=>{
             return <li key={item}>{item}</li>
             })
           }
-          </ul>} */}
+          </ul>}
         </div>
 
     )

From ee20c60ca3a98c9bd1f27e012c8572e80c068dc8 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sat, 29 Sep 2018 20:23:04 +0100
Subject: [PATCH 07/14] preview display bug fixed

---
 src/components/App.js    | 12 +++++++++++-
 src/components/Movies.js |  2 --
 src/components/Search.js | 23 +++++++++++++++++------
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 86b3d13..dfbb982 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -18,6 +18,7 @@ class App extends React.Component {
     this.state = {
       movies: [],
       keyWord: "",
+
       page: 1,
       totalPages: "",
       preview:[]
@@ -27,6 +28,7 @@ class App extends React.Component {
     this.receiveSearchInput = this.receiveSearchInput.bind(this);
     this.receivePageChange = this.receivePageChange.bind(this);
     this.fetchPreview = this.fetchPreview.bind(this);
+    this.cleanPreview = this.cleanPreview.bind(this);
 
   }
 
@@ -44,6 +46,7 @@ class App extends React.Component {
   receiveSearchInput(input) {
     this.setState({
       keyWord: input
+
     });
   }
 
@@ -61,6 +64,12 @@ class App extends React.Component {
       });
   }
 
+  cleanPreview(){
+    this.setState({
+      preview:[]
+    })
+  }
+
   fetchMovies(){
     //console.log(this.state.keyWord)
     let moviesUrl = `http://www.omdbapi.com/?s=${this.state.keyWord}&page=${
@@ -70,7 +79,7 @@ class App extends React.Component {
       .then(response => response.json())
       .then(body => {
         this.setState({
-          
+    
           movies: body.Search,
           totalPages: Math.ceil(body.totalResults / 10),
           preview:[]
@@ -89,6 +98,7 @@ class App extends React.Component {
           keyWord={this.state.keyWord}
           fetchMovies={this.fetchMovies}
           preview={this.state.preview}
+          cleanPreview={this.cleanPreview}
         />
         <Pagination
           receivePageChange={this.receivePageChange}
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 8382654..735f6f5 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -40,8 +40,6 @@ class Movies extends React.Component{
   }
 
   render(){
-      console.log(this.props.movies);
-
     const storageString=localStorage.getItem('favList')
     let localFavList=!storageString ? []: JSON.parse(storageString)
 
diff --git a/src/components/Search.js b/src/components/Search.js
index ae365c2..7a4776f 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -3,7 +3,9 @@ import React from 'react';
 class Search extends React.Component{
   constructor(){
     super();
-
+    this.state={
+      previewDisplay:false
+    }
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this)
 
@@ -13,28 +15,37 @@ class Search extends React.Component{
   handleChange(event){
     this.props.receiveSearchInput(event.target.value);
     if(event.target.value.length>2){
-
+      this.setState({
+        previewDisplay:true
+      })
       this.props.fetchPreview(event.target.value)
-    } ;
+    } else{
+      this.props.cleanPreview()
+      this.setState({
+        previewDisplay:false
+      })
+    }
 
   }
 
   handleSubmit(event){
     event.preventDefault();
     this.props.fetchMovies();
+    this.setState({
+      previewDisplay:false
+    })
 
   }
 
-
-
   render(){
+    
     return(
         <div>
         <form onSubmit={this.handleSubmit}>
           <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
           <button>Search</button>
         </form>
-        {this.props.preview==undefined ? []:
+        {this.props.preview==undefined || !this.state.previewDisplay ? []:
           <ul className='previews' onChange={this.handleChange}>
           {this.props.preview.map(item=>{
             return <li key={item}>{item}</li>

From 248ee7f9fcbaaa494fbb66a10129a323fb1308f8 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sun, 30 Sep 2018 00:47:20 +0100
Subject: [PATCH 08/14] responsive design

---
 index.html                 |   5 +-
 package-lock.json          | 428 ++++++++++++++++++++++++++++++++++++-
 package.json               |   2 +
 src/components/App.js      |   2 +-
 src/components/FavMovie.js |   2 +-
 src/components/Movie.js    |   2 +-
 src/components/Movies.js   |   4 +-
 src/components/Preview.js  |  20 --
 src/components/Search.js   |   8 +-
 src/index.js               |   1 +
 style.css                  | 145 +++++++++++++
 11 files changed, 586 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/Preview.js

diff --git a/index.html b/index.html
index 5956140..2f466cc 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,13 @@
 <html>
   <head>
     <meta charset="UTF-8" />
+     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
-    <title>Hello World</title>
   </head>
   <body>
+    <h1>Movie Collector</h1>
     <div id="root"></div>
     <script src="dist/bundle.js"></script>
   </body>
diff --git a/package-lock.json b/package-lock.json
index e27cebf..aaf9fd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,21 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+      "requires": {
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.4.tgz",
@@ -34,6 +49,69 @@
         "prop-types": "^15.5.10"
       }
     },
+    "@material-ui/core": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.1.tgz",
+      "integrity": "sha512-AFAKrldoG8GrP6w+9uzHdbm9GQC+cuggKhv8yG2FcUcXoyAzyLZQww1tgTj+hXNMEuOs2l55oFBo2RNNFoGwWQ==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "@types/jss": "^9.5.3",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "csstype": "^2.5.2",
+        "debounce": "^1.1.0",
+        "deepmerge": "^2.0.1",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^2.5.0",
+        "is-plain-object": "^2.0.4",
+        "jss": "^9.3.3",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "keycode": "^2.1.9",
+        "normalize-scroll-left": "^0.1.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.2",
+        "react-jss": "^8.1.0",
+        "react-transition-group": "^2.2.1",
+        "recompose": "0.28.0 - 0.30.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-1kNcxYiIT1x8iDPEAlgmKrfRTIV8UyK6fLVcZ9kMHIKGWft9I451V5mvSrbCjbf7MX1TbLWzZjph0aVCRf9MqQ==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "recompose": "^0.29.0"
+      },
+      "dependencies": {
+        "recompose": {
+          "version": "0.29.0",
+          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.29.0.tgz",
+          "integrity": "sha512-J/qLXNU4W+AeHCDR70ajW8eMd1uroqZaECTj6qqDLPMILz3y0EzpYlvrnxKB9DnqcngWrtGwjXY9JeXaW9kS1A==",
+          "requires": {
+            "@babel/runtime": "^7.0.0",
+            "change-emitter": "^0.1.2",
+            "fbjs": "^0.8.1",
+            "hoist-non-react-statics": "^2.3.1",
+            "react-lifecycles-compat": "^3.0.2",
+            "symbol-observable": "^1.0.4"
+          }
+        },
+        "symbol-observable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -50,6 +128,37 @@
       "integrity": "sha512-yprFYuno9FtNsSHVlSWd+nRlmGoAbqbeCwOryP6sC/zoCjhpArcRMYp19EvpSUSizJAlsXEwJv+wcWS9XaXdMw==",
       "dev": true
     },
+    "@types/jss": {
+      "version": "9.5.6",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.6.tgz",
+      "integrity": "sha512-7TWmR5y1jYG4ka4wTZt65RR0kw4WgALFUWktQIWbLnDd6/z/0SQZ/4+UeH0rhdp+HEdIfmzPBH0VwE/4Z9Evzw==",
+      "requires": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.6.tgz",
+      "integrity": "sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ=="
+    },
+    "@types/react": {
+      "version": "16.4.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.14.tgz",
+      "integrity": "sha512-Gh8irag2dbZ2K6vPn+S8+LNrULuG3zlCgJjVUrvuiUK7waw9d9CFk2A/tZFyGhcMDUyO7tznbx1ZasqlAGjHxA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.14.tgz",
+      "integrity": "sha512-pa7qB0/mkhwWMBFoXhX8BcntK8G4eQl4sIfSrJCxnivTYRQWjOWf2ClR9bWdm0EUFBDHzMbKYS+QYfDtBzkY4w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.5.12",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.12.tgz",
@@ -1673,6 +1782,11 @@
         }
       }
     },
+    "brcast": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+      "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -1870,6 +1984,11 @@
         "supports-color": "^2.0.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -2305,6 +2424,19 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
+    "csstype": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz",
+      "integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw=="
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -2344,6 +2476,11 @@
       "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2380,6 +2517,11 @@
       "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
+      "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+    },
     "define-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
@@ -2490,6 +2632,11 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
+      "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
+    },
     "dom-walk": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
@@ -4045,6 +4192,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -4092,6 +4244,11 @@
       "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
       "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
+    },
     "i": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/i/-/i-0.3.6.tgz",
@@ -4138,6 +4295,21 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "indefinite-observable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.1.tgz",
+      "integrity": "sha1-CZFUI8yNb36xy3iCrRNGM8mm7cM=",
+      "requires": {
+        "symbol-observable": "1.0.4"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+          "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0="
+        }
+      }
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -4395,6 +4567,11 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
+    },
     "is-glob": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
@@ -4404,6 +4581,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -4440,7 +4622,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -4516,8 +4697,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
     "isomorphic-fetch": {
       "version": "2.2.1",
@@ -4764,6 +4944,161 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+        },
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-compose": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
+    },
+    "jss-expand": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
+      "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg=="
+    },
+    "jss-extend": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
+      "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-preset-default": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
+      "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
+      "requires": {
+        "jss-camel-case": "^6.1.0",
+        "jss-compose": "^5.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-expand": "^5.3.0",
+        "jss-extend": "^6.2.0",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-template": "^1.0.1",
+        "jss-vendor-prefixer": "^7.0.0"
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-template": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
+      "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "kind-of": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
@@ -5559,6 +5894,11 @@
         "remove-trailing-separator": "^1.0.1"
       }
     },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
     "npm": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/npm/-/npm-6.4.1.tgz",
@@ -8686,6 +9026,11 @@
         "find-up": "^2.1.0"
       }
     },
+    "popper.js": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz",
+      "integrity": "sha1-juwdj/AqWjoVLdQ0FKFce3n9abY="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -8893,6 +9238,44 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-event-listener": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.4.tgz",
+      "integrity": "sha512-t7VSjIuUFmN+GeyKb+wm025YLeojVB85kJL6sSs0wEBJddfmKBEQz+CNBZ2zBLKVWkPy/fZXM6U5yvojjYBVYQ==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "react-jss": {
+      "version": "8.6.1",
+      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
+      "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==",
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "jss": "^9.7.0",
+        "jss-preset-default": "^4.3.0",
+        "prop-types": "^15.6.0",
+        "theming": "^1.3.0"
+      }
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-transition-group": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.0.tgz",
+      "integrity": "sha512-qYB3JBF+9Y4sE4/Mg/9O6WFpdoYjeeYqx0AFb64PTazVy8RPMiE3A47CG9QmM4WJ/mzDiZYslV+Uly6O1Erlgw==",
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-chunk": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz",
@@ -8985,6 +9368,26 @@
         "resolve": "^1.1.6"
       }
     },
+    "recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9819,6 +10222,17 @@
       "integrity": "sha512-j5EMxnryTvKxwH2Cq+Pb43tsf6sdEgw6Pdwxk83mPaq0ToeFJt6WE4J3s5BqY7vmjlLgkgXvhtXUxo80FyBhCA==",
       "dev": true
     },
+    "theming": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
+      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
+      "requires": {
+        "brcast": "^3.0.1",
+        "is-function": "^1.0.1",
+        "is-plain-object": "^2.0.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -10323,6 +10737,14 @@
         "indexof": "0.0.1"
       }
     },
+    "warning": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+      "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 8ecf1df..6653b25 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^5.3.1",
     "@fortawesome/react-fontawesome": "^0.1.3",
+    "@material-ui/core": "^3.1.1",
+    "@material-ui/icons": "^3.0.1",
     "classnames": "^2.2.6",
     "i": "^0.3.6",
     "npm": "^6.4.1",
diff --git a/src/components/App.js b/src/components/App.js
index dfbb982..5bd4ace 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -79,7 +79,7 @@ class App extends React.Component {
       .then(response => response.json())
       .then(body => {
         this.setState({
-    
+
           movies: body.Search,
           totalPages: Math.ceil(body.totalResults / 10),
           preview:[]
diff --git a/src/components/FavMovie.js b/src/components/FavMovie.js
index b31fff3..ff9bd23 100644
--- a/src/components/FavMovie.js
+++ b/src/components/FavMovie.js
@@ -7,7 +7,7 @@ class FavMovie extends React.Component {
 
   render() {
     return (
-      <li>
+      <li className="favMovie">
         {this.props.title} {this.props.year}
       </li>
     );
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 83195cc..3220c95 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -54,7 +54,7 @@ class Movie extends React.Component{
         <img onClick={this.handleClick} src={this.props.image}/>
 
         {this.state.showDetails?
-          <ul>
+          <ul className='movie__details'>
           <li>Director: {this.state.movieDetails.Director}</li>
           <li>Actors: {this.state.movieDetails.Actors}</li>
           {this.state.movieDetails.Ratings == undefined?"":
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 735f6f5..1c03368 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -45,8 +45,8 @@ class Movies extends React.Component{
 
     return(
       <div>
-        <button onClick={this.handleClick}>Show my favorites</button>
-        {this.state.displayFav?<ul className='favorites'>
+        <button className="favorite__button" onClick={this.handleClick}>Show my favorites</button>
+        {this.state.displayFav?<ul className='favorite__list'>
           {localFavList.map(fav => {
             return  <FavMovie title={fav.Title}
               year={fav.Year} key={fav.imdbID}/>
diff --git a/src/components/Preview.js b/src/components/Preview.js
deleted file mode 100644
index dc7ff7a..0000000
--- a/src/components/Preview.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// import React from 'react';
-//
-// class Preview extends React.Component{
-//   constructor(){
-//     super();
-//
-//   }
-//
-//
-//
-//
-//   render(){
-//     return(
-//
-//
-//     )
-//   }
-// }
-//
-// export default Preview;
diff --git a/src/components/Search.js b/src/components/Search.js
index 7a4776f..2789261 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -38,15 +38,15 @@ class Search extends React.Component{
   }
 
   render(){
-    
+
     return(
         <div>
-        <form onSubmit={this.handleSubmit}>
-          <input type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
+        <form className="search" onSubmit={this.handleSubmit}>
+          <input placeholder="Try your luck" className="search__input" type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
           <button>Search</button>
         </form>
         {this.props.preview==undefined || !this.state.previewDisplay ? []:
-          <ul className='previews' onChange={this.handleChange}>
+          <ul className='search__preview' onChange={this.handleChange}>
           {this.props.preview.map(item=>{
             return <li key={item}>{item}</li>
             })
diff --git a/src/index.js b/src/index.js
index e0728fe..985a3fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
 
+
 ReactDOM.render(
   <App />,
   document.getElementById('root')
diff --git a/style.css b/style.css
index e69de29..44de2d4 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,145 @@
+*{
+
+  font-family: 'Open Sans', sans-serif;
+
+
+  color: #10110E;
+
+}
+
+body{
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 1em;
+
+
+}
+
+
+ul{
+  list-style: none;
+}
+
+h1{
+  font-size:2.618em;
+  height:5%;
+  padding: 0.5em 0.5em ;
+}
+
+.search{
+  display: grid;
+  grid-template-columns: 20% auto 20%;
+
+
+  /*justify-content: center;
+  align-items: center;*/
+}
+.search__input{
+  grid-column-start: span 3;
+  border-style: none;
+  border-bottom: #FFAC81 solid 1px;
+  font-size: 1.5em;
+  margin-bottom: 0.5em;
+
+}
+.favorite__button{
+  border:none;
+  padding: 0.5em;
+  display: grid;
+  grid-template-columns: 20% 60% 20%;
+  grid-column: 2/3;
+  text-align: center;
+  justify-self: center;
+  align-self: center;
+}
+.movies{
+  grid-template-columns: 99%;
+  grid-template-rows: repeat(minmax(200px,1fr));
+  grid-gap:2em;
+  justify-content: start;
+  align-items: start;
+}
+.movie{
+  background-color: #FDF3EB;
+  padding: 0.5em;
+  justify-content: flex-start;
+  margin-bottom: 0.5em;
+}
+
+h2,h3{
+  align-items: center;
+  font-size:1em;
+  font-weight: bold;
+  font-style: italic;
+  height:5%;
+  padding-bottom : 0.5em;
+}
+
+img{
+  padding-bottom: 0.5em;
+}
+
+
+/*form{
+  display: grid;
+  grid-template-columns: 40% 40% 20%;
+  grid-template-rows: 10% 10%;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 1em;
+
+}*/
+
+/*.text{
+  border-bottom: 2px solid #FDF4A0;
+  padding:5px 5px;
+
+  height: 40%;
+  font-size: 1.5em;
+  grid-column:1/3;
+
+}*/
+
+/*button{
+
+  border-radius: 100%;
+  background-color: #FDF4A0;
+}*/
+
+
+
+/*
+.movies{
+  display: grid;
+  grid-gap: 1em;
+  grid-template-columns: 99%;
+  grid-template-rows: repeat(minmax(200px,1fr));
+  justify-content: start;
+  align-items: start;
+
+}
+
+
+*/
+
+
+@media(min-width:768px) {
+  .movies{
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: repeat(3,auto);
+  }
+}
+
+@media(min-width:960px) {
+  .movies{
+    grid-template-columns: 33% 33% 33%;
+  }
+}
+
+@media(min-width:1200px) {
+  .movies{
+    grid-template-columns: repeat(4,auto);
+  }
+}

From 4deaddaedd3d331607b5116a2e606e35d2ff028e Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sun, 30 Sep 2018 13:49:56 +0100
Subject: [PATCH 09/14] styling

---
 style.css | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/style.css b/style.css
index 44de2d4..699178d 100644
--- a/style.css
+++ b/style.css
@@ -11,7 +11,7 @@ body{
   display: grid;
   align-items: center;
   justify-content: center;
-  padding-bottom: 1em;
+  padding-bottom: 0.5em;
 
 
 }
@@ -50,36 +50,49 @@ h1{
   grid-template-columns: 20% 60% 20%;
   grid-column: 2/3;
   text-align: center;
-  justify-self: center;
+
   align-self: center;
 }
 .movies{
+  display: grid;
   grid-template-columns: 99%;
   grid-template-rows: repeat(minmax(200px,1fr));
-  grid-gap:2em;
-  justify-content: start;
-  align-items: start;
+  grid-gap:1em;
+  justify-content: center;
+  align-items: center;
+
 }
 .movie{
+  display: flex;
+  flex-flow: column;
   background-color: #FDF3EB;
   padding: 0.5em;
-  justify-content: flex-start;
+justify-content:  center;
+align-items:  center;
   margin-bottom: 0.5em;
+  padding: 0.5em;
+}
+img{
+  justify-self: center;
+  align-self: center;
 }
-
 h2,h3{
+  margin: 0;
   align-items: center;
+  justify-content: center;
   font-size:1em;
   font-weight: bold;
   font-style: italic;
   height:5%;
-  padding-bottom : 0.5em;
-}
 
-img{
-  padding-bottom: 0.5em;
+}
+.movie__details{
+  padding:0.5em;
 }
 
+svg{
+  color: green;
+}
 
 /*form{
   display: grid;

From d29fc1882a687f90a2a294da5ec44e083532dadd Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sun, 30 Sep 2018 14:21:16 +0100
Subject: [PATCH 10/14] button styling

---
 package-lock.json        |  5 +++++
 package.json             |  1 +
 src/components/App.js    |  4 ----
 src/components/Movie.js  | 12 +++++++++---
 src/components/Movies.js |  4 +++-
 style.css                |  5 ++---
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aaf9fd7..3094aa3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5465,6 +5465,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "math-random": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
diff --git a/package.json b/package.json
index 6653b25..6e5a528 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@material-ui/icons": "^3.0.1",
     "classnames": "^2.2.6",
     "i": "^0.3.6",
+    "material-design-icons": "^3.0.1",
     "npm": "^6.4.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
diff --git a/src/components/App.js b/src/components/App.js
index 5bd4ace..6955c80 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -6,11 +6,7 @@ import Search from "./Search";
 import Movies from "./Movies";
 import Pagination from "./Pagination";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faStar } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faStar);
 
 class App extends React.Component {
   constructor() {
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 3220c95..50d46f8 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -2,7 +2,8 @@
 //url = `http://www.omdbapi.com/?i=${id}&plot=full&apikey=d2807699`
 
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import cx from 'classnames';
 
 
 class Movie extends React.Component{
@@ -10,7 +11,8 @@ class Movie extends React.Component{
     super();
     this.state ={
       movieDetails:{},
-      showDetails:false
+      showDetails:false,
+      on:false
     }
 
     this.handleClick = this.handleClick.bind(this);
@@ -28,6 +30,9 @@ class Movie extends React.Component{
 
   handleFavClick(){
     this.props.receiveFavClick(this.props.id)
+    this.setState({
+      on:!this.state.on
+    })
   }
 
   fetchMovieDetails(){
@@ -46,11 +51,12 @@ class Movie extends React.Component{
   }
 
   render(){
+    const classes=cx('material-icons md-24',{'fav_on':this.state.on});
     return(
       <div className='movie' id={this.props.id}>
         <h2>{this.props.title}</h2>
         <h3>{this.props.year}</h3>
-        <div><FontAwesomeIcon icon="star" onClick={this.handleFavClick}/></div>
+        <i onClick={this.handleFavClick} className={classes}>star_border</i>
         <img onClick={this.handleClick} src={this.props.image}/>
 
         {this.state.showDetails?
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 1c03368..637c560 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Movie from './Movie';
 import FavMovie from './FavMovie';
+import cx from 'classnames';
 
 
 
@@ -10,7 +11,8 @@ class Movies extends React.Component{
     super();
     this.state={
       favList:[],
-      displayFav:false
+      displayFav:false,
+
     }
     this.receiveFavClick = this.receiveFavClick.bind(this);
     this.handleClick = this.handleClick.bind(this);
diff --git a/style.css b/style.css
index 699178d..0828cb8 100644
--- a/style.css
+++ b/style.css
@@ -90,10 +90,9 @@ h2,h3{
   padding:0.5em;
 }
 
-svg{
-  color: green;
+.fav_on{
+  color:green
 }
-
 /*form{
   display: grid;
   grid-template-columns: 40% 40% 20%;

From 0f31e8aa10d4ac56646c737c05f739ddd5f8d6d6 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sun, 30 Sep 2018 16:58:08 +0100
Subject: [PATCH 11/14] styling

---
 package-lock.json            | 28 +++++++++++-------
 package.json                 |  4 +--
 src/components/App.js        |  2 +-
 src/components/Movies.js     |  9 ++++--
 src/components/Pagination.js |  2 +-
 src/components/Search.js     |  2 +-
 style.css                    | 57 +++++++++---------------------------
 7 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3094aa3..6e5b7ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9222,25 +9222,25 @@
       }
     },
     "react": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz",
-      "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==",
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
+      "integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "schedule": "^0.5.0"
       }
     },
     "react-dom": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
-      "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==",
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
+      "integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "schedule": "^0.5.0"
       }
     },
     "react-event-listener": {
@@ -9677,6 +9677,14 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "schedule": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
+      "integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "0.4.7",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
diff --git a/package.json b/package.json
index 6e5a528..b8b7c74 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,8 @@
     "i": "^0.3.6",
     "material-design-icons": "^3.0.1",
     "npm": "^6.4.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
   },
   "devDependencies": {
     "babel-loader": "^7.1.3",
diff --git a/src/components/App.js b/src/components/App.js
index 6955c80..4663dfb 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -79,7 +79,7 @@ class App extends React.Component {
           movies: body.Search,
           totalPages: Math.ceil(body.totalResults / 10),
           preview:[]
-        },()=>console.log(this.state.movies))
+        })
 
       });
   }
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 637c560..55e9e56 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -2,6 +2,10 @@ import React from 'react';
 import Movie from './Movie';
 import FavMovie from './FavMovie';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
 
 
 
@@ -47,7 +51,7 @@ class Movies extends React.Component{
 
     return(
       <div>
-        <button className="favorite__button" onClick={this.handleClick}>Show my favorites</button>
+        <Button variant="outlined" color="secondary" className="favorite__button" onClick={this.handleClick}>Show my favorites</Button>
         {this.state.displayFav?<ul className='favorite__list'>
           {localFavList.map(fav => {
             return  <FavMovie title={fav.Title}
@@ -56,7 +60,8 @@ class Movies extends React.Component{
         </ul>:""}
         <div className='movies' >
 
-        {this.props.movies.map(movie => {
+        {this.props.movies==undefined? <img src="https://media.giphy.com/media/IO3NC6rAktKrC/giphy.gif"/>
+        : this.props.movies.map(movie => {
 
           return  <Movie
             title={movie.Title}
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
index b1b72a0..ce49449 100644
--- a/src/components/Pagination.js
+++ b/src/components/Pagination.js
@@ -14,7 +14,7 @@ class Pagination extends React.Component{
 
   render(){
     return (
-      <div onClick={this.handleClick}>
+      <div className="page" onClick={this.handleClick}>
         {this.props.page>1?<button name="-1">Previous page</button>:""}
         {this.props.page<this.props.totalPages?<button name="1">Next page</button>:""}
       </div>
diff --git a/src/components/Search.js b/src/components/Search.js
index 2789261..c489a84 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -43,7 +43,7 @@ class Search extends React.Component{
         <div>
         <form className="search" onSubmit={this.handleSubmit}>
           <input placeholder="Try your luck" className="search__input" type="text"  onChange={this.handleChange} value={this.props.keyWord}/>
-          <button>Search</button>
+          <button className="search__button">Search</button>
         </form>
         {this.props.preview==undefined || !this.state.previewDisplay ? []:
           <ul className='search__preview' onChange={this.handleChange}>
diff --git a/style.css b/style.css
index 0828cb8..ba42306 100644
--- a/style.css
+++ b/style.css
@@ -31,9 +31,20 @@ h1{
   display: grid;
   grid-template-columns: 20% auto 20%;
 
+}
+.page{
+  margin-bottom: 0.3em;
+  display:flex;
+  justify-content: flex-start;
+}
 
-  /*justify-content: center;
-  align-items: center;*/
+.search__button{
+  background-color:  #FFAC81;
+  font-color: #10110E;
+  margin-bottom: 0.5em;
+  border:#FFAC81;
+  border-radius: 80em;
+  font-size: 1em;
 }
 .search__input{
   grid-column-start: span 3;
@@ -60,6 +71,7 @@ h1{
   grid-gap:1em;
   justify-content: center;
   align-items: center;
+  margin-top: 0.3em;
 
 }
 .movie{
@@ -93,47 +105,6 @@ h2,h3{
 .fav_on{
   color:green
 }
-/*form{
-  display: grid;
-  grid-template-columns: 40% 40% 20%;
-  grid-template-rows: 10% 10%;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 1em;
-
-}*/
-
-/*.text{
-  border-bottom: 2px solid #FDF4A0;
-  padding:5px 5px;
-
-  height: 40%;
-  font-size: 1.5em;
-  grid-column:1/3;
-
-}*/
-
-/*button{
-
-  border-radius: 100%;
-  background-color: #FDF4A0;
-}*/
-
-
-
-/*
-.movies{
-  display: grid;
-  grid-gap: 1em;
-  grid-template-columns: 99%;
-  grid-template-rows: repeat(minmax(200px,1fr));
-  justify-content: start;
-  align-items: start;
-
-}
-
-
-*/
 
 
 @media(min-width:768px) {

From 111b674506e810821abadb6c2a461d800c9f25f4 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Sun, 30 Sep 2018 23:48:47 +0100
Subject: [PATCH 12/14] fav light bug fixed

---
 src/components/FavMovie.js | 13 +++++++++++--
 src/components/Movie.js    |  4 +++-
 src/components/Movies.js   | 27 ++++++++++++++++++++++-----
 style.css                  |  3 +++
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/FavMovie.js b/src/components/FavMovie.js
index ff9bd23..20bf930 100644
--- a/src/components/FavMovie.js
+++ b/src/components/FavMovie.js
@@ -3,13 +3,22 @@ import React from "react";
 class FavMovie extends React.Component {
   constructor() {
     super();
+    this.handleDeleteClick = this.handleDeleteClick.bind(this);
   }
 
+  handleDeleteClick(){
+    this.props.receiveDeleteClick(this.props.id)
+  }
+
+
   render() {
     return (
-      <li className="favMovie">
+      <div>
+        <li className="favMovie">
         {this.props.title} {this.props.year}
-      </li>
+        </li>
+        <i className="material-icons" onClick={this.handleDeleteClick}>clear</i>
+      </div>
     );
   }
 }
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 50d46f8..2a17ec1 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -50,8 +50,10 @@ class Movie extends React.Component{
 
   }
 
+
   render(){
-    const classes=cx('material-icons md-24',{'fav_on':this.state.on});
+    const classes=cx('material-icons md-24',{'fav_on':this.state.on&&this.props.favLightOn});
+
     return(
       <div className='movie' id={this.props.id}>
         <h2>{this.props.title}</h2>
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 55e9e56..186ddae 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -16,10 +16,12 @@ class Movies extends React.Component{
     this.state={
       favList:[],
       displayFav:false,
+      favLightOn:true
 
     }
     this.receiveFavClick = this.receiveFavClick.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.receiveDeleteClick = this.receiveDeleteClick.bind(this);
   }
 
   receiveFavClick(id){
@@ -28,14 +30,28 @@ class Movies extends React.Component{
         const newMovie=this.props.movies.filter(movie => movie.imdbID == id)
         this.state.favList.length==0?this.setState({favList:newMovie}):
         this.setState({
-          favList: this.state.favList.concat(newMovie)
+          favList: this.state.favList.concat(newMovie),
+          favLightOn:true
         },()=>localStorage.setItem("favList", JSON.stringify(this.state.favList))
-        )
+      )
     } else {
         this.setState({
-          favList: this.state.favList.filter(movie => movie.imdbID !== id)
+          favList: this.state.favList.filter(movie => movie.imdbID !== id),
+          favLightOn:true
       }, ()=>localStorage.setItem('favList',JSON.stringify(this.state.favList))
     )}
+  }
+
+  receiveDeleteClick(id){
+    this.setState({
+      favList: this.state.favList.filter(movie => movie.imdbID !== id),
+      favLightOn:false
+  }, ()=>localStorage.setItem('favList',JSON.stringify(this.state.favList))
+);
+
+
+
+
   }
 
 
@@ -55,12 +71,12 @@ class Movies extends React.Component{
         {this.state.displayFav?<ul className='favorite__list'>
           {localFavList.map(fav => {
             return  <FavMovie title={fav.Title}
-              year={fav.Year} key={fav.imdbID}/>
+              year={fav.Year} id={fav.imdbID} key={fav.imdbID} receiveDeleteClick={this.receiveDeleteClick}/>
             })}
         </ul>:""}
         <div className='movies' >
 
-        {this.props.movies==undefined? <img src="https://media.giphy.com/media/IO3NC6rAktKrC/giphy.gif"/>
+        {this.props.movies==undefined? <img src="https://media.giphy.com/media/2LbsnnLhaHUnC/giphy.gif"/>
         : this.props.movies.map(movie => {
 
           return  <Movie
@@ -69,6 +85,7 @@ class Movies extends React.Component{
             key={movie.imdbID}
             id={movie.imdbID}
             image={movie.Poster}
+            favLightOn={this.state.favLightOn}
             receiveFavClick={this.receiveFavClick}
             />
         })}
diff --git a/style.css b/style.css
index ba42306..6d56908 100644
--- a/style.css
+++ b/style.css
@@ -106,6 +106,9 @@ h2,h3{
   color:green
 }
 
+.favLightOff{
+  color:black
+}
 
 @media(min-width:768px) {
   .movies{

From 2cb194956befc4b76fe7f79a0c1b2e3566b02691 Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Mon, 1 Oct 2018 10:35:30 +0100
Subject: [PATCH 13/14] readme

---
 README.md                | 57 +++++++---------------------------------
 src/components/Movies.js |  2 +-
 2 files changed, 10 insertions(+), 49 deletions(-)

diff --git a/README.md b/README.md
index cec0904..0cc45c6 100644
--- a/README.md
+++ b/README.md
@@ -1,58 +1,19 @@
 # React Cinema
 
-Let's revisit our first project where we built a movie search engine using the Open Movie Database. This time we want to implement it using React. It should be a Single Page App, that is all the functionality should be on a single page, rather switch between multiple pages.
+Use react to build a movie search engine using the Open Movie Database (http://www.omdbapi.com).
 
-Before starting to code produce a diagram using pen and paper of your application which shows both layout and a tree diagram of the components.
+There are six components, with App being the parent of others.
 
-What are some of the components you are going to need? Which components will fetch data and how will that data be displayed? Which components will store state and how will they pass data to other components? Which components should be re-used? Rather than re-implementing your previous solution again have a think about what you have learned in the past week and how you can apply it here.
+In App, we fetch movie info and movie preview.
 
-You can start coding once your plan has been checked by a TA or instructor.
+In Movies, we add favourite movies to localStorage.
 
-## The brief
+Movie and FavMovie are the children of Movies.
 
-We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API.
+Movie displays movie info and details.
 
-To start using the OMDB API you will first need to sign up with them to receive and API key. The key issued to you will allow you 1000 requests per day and you will need to include this key as part of every request.
+FavMovie inserts a listed item in favourite list.
 
-To get started, fork and clone this repo. Please submit a pull request after your first commit and push commits regularly.
+Search builds the search form.
 
-You should complete as many of the following tasks as you can.
-
-- [ ] Work using mobile first, that is create the mobile version first and add tablet and desktop versions after.
-- [ ] Create an HTML page which should have a `form` at the top which contains a text input and a submit button. Below it should have a placeholder element for the returned results.
-- [ ] Use JavaScript to capture the `submit` event in your search form, extract the query string from the text input and use that to make an API call to the Open Movie Database API to search for films which match the query string using `fetch`. `console.log` the results
-- [ ] Display the data returned by the API including title, year and poster picture
-
-**Movie details**
-
-- [ ] Adjust your layout to create room for a detailed view of movie information
-- [ ] Capture clicks on your movie results items and use that information to make another request to the API for detailed movie information. Using event delegation will help you here. `console.log` the returned result
-- [ ] Display the detailed movie result in the in the details view you created earlier
-- [ ] Make your design responsive and ensure it looks great at different screen widths
-
-**Your own feature**
-
-- [ ] Implement any feature you would find useful or interesting
-
-**Stretch goals**
-
-- [ ] Implement pagination so that users can navigate between all movies in search results rather than just the first ten
-- [ ] Create a favourites list. It's up to you how you would add items to favourites. You could add a button or otherwise. Display a list of favourites somewhere on your page.
-- [ ] Make the favourites list sortable. Add `up` and `down` buttons to your favourites which on click will move the result in relevant direction
-- [ ] Save favourites locally using `localStorage` so that favourites persist in browser after refresh
-- [ ] Let's create a search preview. It should listen for input events and submit a search request with current query string. Display the search preview results in an absolute positioned container just below the search box.  
-Hint: You may want to kick of the searching after at least 3 characters have been typed.
-
-## Objectives
-
-* We want to see great looking webpages that work well at all screen widths
-* Your code should have consistent indentation and sensible naming
-* Use lots of concise, reusable functions with a clear purpose
-* Add code comments where it is not immediately obvious what your code does
-* Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results
-* Use BEM methodology to style your page
-* Try to use pure functions as much as possible, but keep in mind it will not be possible to make all functions pure.
-
-## README.md
-
-When finished, include a README.md in your repo. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. Explain functionality created, mention any outstanding issues and possible features you would include if you had more time. List technologies used to create the app. Include a screenshot of your app in the README.
+Pagination works on next pages / previous pages.
diff --git a/src/components/Movies.js b/src/components/Movies.js
index 186ddae..bd87c62 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -16,7 +16,7 @@ class Movies extends React.Component{
     this.state={
       favList:[],
       displayFav:false,
-      favLightOn:true
+      favLightOn:false
 
     }
     this.receiveFavClick = this.receiveFavClick.bind(this);

From f54760caa36eb921c5ddde9b6f826e8b0661c85c Mon Sep 17 00:00:00 2001
From: Kate <mhq0612@163.com>
Date: Tue, 2 Oct 2018 00:34:49 +0100
Subject: [PATCH 14/14] fixed fav button bug and added componentDidMount

---
 src/components/App.js    |  2 ++
 src/components/Movie.js  | 13 ++++++++-----
 src/components/Movies.js | 24 +++++++++++++-----------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 4663dfb..e8041e7 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -28,6 +28,8 @@ class App extends React.Component {
 
   }
 
+  
+
   receivePageChange(value) {
     const newPage = this.state.page + parseInt(value);
 
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 2a17ec1..58b674d 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -12,7 +12,7 @@ class Movie extends React.Component{
     this.state ={
       movieDetails:{},
       showDetails:false,
-      on:false
+
     }
 
     this.handleClick = this.handleClick.bind(this);
@@ -30,9 +30,7 @@ class Movie extends React.Component{
 
   handleFavClick(){
     this.props.receiveFavClick(this.props.id)
-    this.setState({
-      on:!this.state.on
-    })
+    
   }
 
   fetchMovieDetails(){
@@ -52,7 +50,12 @@ class Movie extends React.Component{
 
 
   render(){
-    const classes=cx('material-icons md-24',{'fav_on':this.state.on&&this.props.favLightOn});
+    let check={fav_on:false};
+
+    this.props.favList.find(movie => movie.imdbID==this.props.id)? check={fav_on:true}:
+    check={fav_on:false}
+
+    const classes=cx('material-icons md-24',check);
 
     return(
       <div className='movie' id={this.props.id}>
diff --git a/src/components/Movies.js b/src/components/Movies.js
index bd87c62..668b6bc 100644
--- a/src/components/Movies.js
+++ b/src/components/Movies.js
@@ -16,7 +16,7 @@ class Movies extends React.Component{
     this.state={
       favList:[],
       displayFav:false,
-      favLightOn:false
+
 
     }
     this.receiveFavClick = this.receiveFavClick.bind(this);
@@ -24,20 +24,25 @@ class Movies extends React.Component{
     this.receiveDeleteClick = this.receiveDeleteClick.bind(this);
   }
 
+  componentDidMount(){
+    const storageString = window.localStorage.getItem('favList');
+    const localFavList = !storageString ? []: JSON.parse(storageString)
+    this.setState({
+      favList: localFavList,
+    })
+  }
+
   receiveFavClick(id){
 
     if(this.state.favList.filter(movie => movie.imdbID==id).length == 0){
-        const newMovie=this.props.movies.filter(movie => movie.imdbID == id)
-        this.state.favList.length==0?this.setState({favList:newMovie}):
+        const newMovie=this.props.movies.filter(movie => movie.imdbID == id);
         this.setState({
           favList: this.state.favList.concat(newMovie),
-          favLightOn:true
         },()=>localStorage.setItem("favList", JSON.stringify(this.state.favList))
       )
     } else {
         this.setState({
           favList: this.state.favList.filter(movie => movie.imdbID !== id),
-          favLightOn:true
       }, ()=>localStorage.setItem('favList',JSON.stringify(this.state.favList))
     )}
   }
@@ -45,13 +50,9 @@ class Movies extends React.Component{
   receiveDeleteClick(id){
     this.setState({
       favList: this.state.favList.filter(movie => movie.imdbID !== id),
-      favLightOn:false
+
   }, ()=>localStorage.setItem('favList',JSON.stringify(this.state.favList))
 );
-
-
-
-
   }
 
 
@@ -84,8 +85,9 @@ class Movies extends React.Component{
             year={movie.Year}
             key={movie.imdbID}
             id={movie.imdbID}
+            favList={this.state.favList}
             image={movie.Poster}
-            favLightOn={this.state.favLightOn}
+
             receiveFavClick={this.receiveFavClick}
             />
         })}