Homework 6/18

README.md

@@ -1,113 +1,113 @@
 
 ### Setup
-* Get your api key from the themoviedb.org
-* Fork, Clone, yarn install, yarn start
+<!-- * Get your api key from the themoviedb.org -->
+<!-- * Fork, Clone, yarn install, yarn start -->
 
 ### Do
 
 ### Components
-* Create functional components as defined by comments in the jsx in App.js,  such as  {/*  <Navigation>   */}
-* Import and use components in App.js
-* Navigation.js
-* UserProfile.js
+<!-- * Create functional components as defined by comments in the jsx in App.js,  such as  {/*  <Navigation>   */} -->
+<!-- * Import and use components in App.js -->
+<!-- * Navigation.js -->
+<!-- * UserProfile.js -->
 
 ### State
-* In state.js file
-* Create our state object with properties
+<!-- * In state.js file -->
+<!-- * Create our state object with properties
     * searchResults: []
-    * myMovieList: []
-* export state object
+    * myMovieList: [] -->
+<!-- * export state object -->
 
 ### Reducers
-* In reducers/index.js
-* Create reducers functions for all state
-* Parameters - state, action
-* Remember default value
-* Import combineReducers from redux
-* Combine reducers and export
+<!-- * In reducers/index.js -->
+<!-- * Create reducers functions for all state -->
+<!-- * Parameters - state, action -->
+<!-- * Remember default value -->
+<!-- * Import combineReducers from redux -->
+<!-- * Combine reducers and export -->
 
 ### Create Reducers
-* myMovieList
+<!-- * myMovieList
     * Look for the action “MY_MOVIE_LIST_LOADED”
-    * return the value
-* searchResults
+    * return the value -->
+<!-- * searchResults
     * Look for the action “SEARCH_RESULTS_LOADED”
-    * return the value
+    * return the value -->
 
 ### Store
-* Create our standard store.js file
-* Use redux-thunk middleware
-* Import reducers
-* create store and export
+<!-- * Create our standard store.js file -->
+<!-- * Use redux-thunk middleware -->
+<!-- * Import reducers -->
+<!-- * create store and export -->
 
 ### index.js 
-* import Provider and wrap App 
-* import store and assign to store prop
+<!-- * import Provider and wrap App  -->
+<!-- * import store and assign to store prop -->
 
 ### Actions
-* remember to export your actions
-* loadMyMovieList()
+<!-- * remember to export your actions -->
+<!-- * loadMyMovieList()
     * type = “LOAD_MY_MOVIE_LIST”
     * make fetch call to “/movies”
-    * on complete, dispatch to myMovieListLoaded(movies)
-* myMovieListLoaded(movies)
+    * on complete, dispatch to myMovieListLoaded(movies) -->
+<!-- * myMovieListLoaded(movies)
     * type = “MY_MOVIE_LIST_LOADED”
-    * value = movies 
-* loadSearch(searchTerm)
+    * value = movies  -->
+<!-- * loadSearch(searchTerm)
     * type = “LOAD_SEARCH”
     * make fetch call to https://api.themoviedb.org/3/search/multi?query=searchTerm&api_key=yourkey
     * be sure to put your api key
-    * on complete, dispatch to searchLoaded(movies)
-* searchLoaded(movies)
+    * on complete, dispatch to searchLoaded(movies) -->
+<!-- * searchLoaded(movies)
     * type = “SEARCH_RESULTS_LOADED”
-    * value = make sure to assign the value of movies.results to get the array of movies from movie db
-* saveMyMovie(movie)
+    * value = make sure to assign the value of movies.results to get the array of movies from movie db -->
+<!-- * saveMyMovie(movie)
     * make fetch POST to “/movies”
-    * on complete dispatch to loadMyMovieList()
-* removeMyMovie(id)
+    * on complete dispatch to loadMyMovieList() -->
+<!-- * removeMyMovie(id)
     * make a fetch DELETE to “/movies/” + id
-    * on complete dispatch to loadMyMovieList()
+    * on complete dispatch to loadMyMovieList() -->
 
 
 ### Create Containers
-* import connect from react-redux
-* mapStateToProps
-* mapDispatchToProps
-* connect and export
+<!-- * import connect from react-redux -->
+<!-- * mapStateToProps -->
+<!-- * mapDispatchToProps -->
+<!-- * connect and export -->
 
 ### SearchBoxContainer.js
-* import SearchBox
-* import action `loadSearch`
-* mapDispatchToProps for this action
-* Determine which props to map to based on the props that are already coded into the SearchBox component
+<!-- * import SearchBox -->
+<!-- * import action `loadSearch` -->
+<!-- * mapDispatchToProps for this action -->
+<!-- * Determine which props to map to based on the props that are already coded into the SearchBox component -->
 
 ### AppContainer.js
-* import App
-* import action `loadMyMovieList`
-* mapStateToProps for props `searchResults` and `myMovieList` to state of the same name
-* mapDisptachToProps for `loadMyMovieList`
+<!-- * import App -->
+<!-- * import action `loadMyMovieList` -->
+<!-- * mapStateToProps for props `searchResults` and `myMovieList` to state of the same name -->
+<!-- * mapDisptachToProps for `loadMyMovieList` -->
 
 ### ListToggleContainer
-* import ListToggle
-* import action `saveMyMovie` and `removeMyMovie`
-* mapDisptachToProps for `saveMyMovie` and `removeMyMovie`
-* Change Item.js to use ListToggleContainer instead of ListToggle
+<!-- * import ListToggle -->
+<!-- * import action `saveMyMovie` and `removeMyMovie` -->
+<!-- * mapDisptachToProps for `saveMyMovie` and `removeMyMovie` -->
+<!-- * Change Item.js to use ListToggleContainer instead of ListToggle -->
 
 ### SearchBox.js
-* In the constructor assign a state property with an object with key “searchTerm”, set to blank string “”
-* Add onChange to the input element
-* on change setState for searchTerm to the value from the input
+<!-- * In the constructor assign a state property with an object with key “searchTerm”, set to blank string “” -->
+<!-- * Add onChange to the input element -->
+<!-- * on change setState for searchTerm to the value from the input -->
 
 ### Item.js
-* Switch out use of ListToggle for use of ListToggleContainer
+<!-- * Switch out use of ListToggle for use of ListToggleContainer -->
 
 ### App.js
-* Add componentDidMount method and call loadMyMovieList in here.
-* Switch out use of SearchBox for use of SearchBoxContainer
-* Add PropTypes for searchResults and myMovieList
+<!-- * Add componentDidMount method and call loadMyMovieList in here. -->
+<!-- * Switch out use of SearchBox for use of SearchBoxContainer -->
+<!-- * Add PropTypes for searchResults and myMovieList -->
 
 ### index.js
-* Switch out use of App for AppContainer
+<!-- * Switch out use of App for AppContainer -->
 
 ### Points
 * Base - 25 

db.json

@@ -1,5 +1,49 @@
 {
-  "movies":[],
+  "movies": [
+    {
+      "original_name": "HAPPY!",
+      "id": 72339,
+      "media_type": "tv",
+      "name": "HAPPY!",
+      "vote_count": 43,
+      "vote_average": 7.42,
+      "poster_path": "/m7EkgEgYxiHCgMJP5FJ6JPWUg7u.jpg",
+      "first_air_date": "2017-12-06",
+      "popularity": 10.896177,
+      "genre_ids": [
+        10765
+      ],
+      "original_language": "en",
+      "backdrop_path": "/1cQlnMOVF1E9GDYaAzchIsJ0NnV.jpg",
+      "overview": "Corrupt ex-cop turned hitman Nick Sax's life is changed forever by a relentlessly positive, imaginary blue winged horse named Happy.",
+      "origin_country": [
+        "US"
+      ],
+      "_id": 2
+    },
+    {
+      "original_name": "Happy Valley",
+      "id": 61244,
+      "media_type": "tv",
+      "name": "Happy Valley",
+      "vote_count": 77,
+      "vote_average": 7.75,
+      "poster_path": "/icOYQvsyM7m8cX515wOM0GPExYb.jpg",
+      "first_air_date": "2014-04-29",
+      "popularity": 6.885128,
+      "genre_ids": [
+        18,
+        80
+      ],
+      "original_language": "en",
+      "backdrop_path": "/mT800I3clbU1NYgk3fu41nL6wJh.jpg",
+      "overview": "Happy Valley is a dark, funny, multi-layered thriller revolving around the personal and professional life of Catherine, a dedicated, experienced, hard-working copper. She is also a bereaved mother who looks after her orphaned grandchild.",
+      "origin_country": [
+        "GB"
+      ],
+      "_id": 3
+    }
+  ],
   "posts": [
     {
       "id": 1,