-
- Get your api key from the themoviedb.org
-
- Fork, Clone, yarn install, yarn start
-
- Create functional components as defined by comments such as {/* */}
-
- Import and use components in App.js
-
- Navigation.js
-
- UserProfile.js
-
- In state.js file
-
- Create our state object with properties
-
- searchResults: []
-
- myMovieList: []
-
- Create our state object with properties
-
- export state object
-
- In reducers/index.js
-
- Create reducers functions for all state
-
- Parameters - state, action
-
- Remember default value
-
- Import combineReducers from redux
-
- Combine reducers and export
-
- myMovieList
-
- Look for the action “MY_MOVIE_LIST_LOADED”
-
- return the value
-
- myMovieList
-
- searchResults
-
- Look for the action “SEARCH_RESULTS_LOADED”
-
- return the value
-
- searchResults
-
- Create our standard store.js file
-
- Use redux-thunk middleware
-
- Import reducers
-
- create store and export
-
- import Provider and wrap App
-
- import store and assign to store prop
-
- loadMyMovieList()
-
- type = “LOAD_MY_MOVIE_LIST”
-
- make fetch call to “/movies”
-
- on complete, dispatch to myMovieListLoaded(movies)
-
- loadMyMovieList()
-
- myMovieListLoaded(movies)
-
- type = “MY_MOVIE_LIST_LOADED”
-
- value = movies
-
- myMovieListLoaded(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)
-
- loadSearch(searchTerm)
-
- 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
-
- searchLoaded(movies)
-
- saveMyMovie(movie)
-
- make fetch POST to “/movies”
-
- on complete dispatch to loadMyMovieList()
-
- saveMyMovie(movie)
-
- removeMyMovie(id)
-
- make a fetch DELETE to “/movies/” + id
-
- on complete dispatch to loadMyMovieList()
-
- removeMyMovie(id)
-
- import connect from react-redux
-
- mapStateToProps
-
- mapDispatchToProps
-
- connect and export
-
- import SearchBox
-
- import action
loadSearch
- import action
-
- mapDispatchToProps for this action
-
- Determine which props to map to based on the props that are already coded into the SearchBox component
-
- import App
-
- import action
loadMyMovieList
- import action
- mapStateToProps for props
searchResults
andmyMovieList
to state of the same name - mapDisptachToProps for
loadMyMovieList
-
- import ListToggle
-
- import action
saveMyMovie
andremoveMyMovie
- import action
-
- mapDisptachToProps for
saveMyMovie
andremoveMyMovie
- mapDisptachToProps for
- Change Item.js to use ListToggleContainer instead of ListToggle
- 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
-
- Switch out use of ListToggle for use of ListToggleContainer
-
- Add componentDidMount method and call loadMyMovieList in here.
-
- Switch out use of SearchBox for use of SearchBoxContainer
-
- Add PropTypes for searchResults and myMovieList
- Switch out use of App for AppContainer