Giter Club home page Giter Club logo

advanced-checkpoint-1's Introduction

Setup

    • Get your api key from the themoviedb.org
    • Fork, Clone, yarn install, yarn start

Do

Components

    • Create functional components as defined by comments such as {/* */}
    • Import and use components in App.js
    • Navigation.js
    • UserProfile.js

State

    • In state.js file
    • Create our state object with properties
        • searchResults: []
        • 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

Create Reducers

    • myMovieList
        • Look for the action “MY_MOVIE_LIST_LOADED”
        • return the value
    • searchResults
        • Look for the action “SEARCH_RESULTS_LOADED”
        • return the value

Store

    • 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

Actions

    • loadMyMovieList()
        • type = “LOAD_MY_MOVIE_LIST”
        • make fetch call to “/movies”
        • on complete, dispatch to myMovieListLoaded(movies)
    • myMovieListLoaded(movies)
        • type = “MY_MOVIE_LIST_LOADED”
        • value = 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)
        • make fetch POST to “/movies”
        • on complete dispatch to loadMyMovieList()
    • removeMyMovie(id)
        • make a fetch DELETE to “/movies/” + id
        • on complete dispatch to loadMyMovieList()

- Create Containers

    • 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

AppContainer.js

    • 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

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

Item.js

    • 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

index.js

  • Switch out use of App for AppContainer

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.