Skip to content

Instantly share code, notes, and snippets.

@jw56578 jw56578/readme.md
Last active Apr 26, 2019

Embed
What would you like to do?
Checkpoint 2 Instructions

Setup

  • yarn install, yarn start
  • Don’t use this readme to figure out what code to type
  • Use all other projects we have done as code examples
  • Pick a real life thing to use as a model. Vehicle, Product, Movie …etc
  • Implement 5 properties for this model.

Client

  • Client code goes in client/src

React

  • Create a function component that list out a collection of your models (ListOfUsers)
    • Use prop types to define what props the component needs
    • It should probably need a prop named after the plural of your model, and it should probably be an array
    • Probably want to map over this array and create some divs or li’s showing 3 of the properties of the item
    • Create a Link on each item so you can navigate to the detail page
    • Create a button on each item so you can delete the item
  • Create a class component that makes a new model (redux fetch practice)
    • Create a form and a button
    • Put a label and an input for each property your model has
    • Bonus - use a drop down if there are a limited number of values for a property
    • Register onChange for each input and use setState to store the information typed in
    • Register onSubmit for the form.
    • onSubmit call an action called createThing(change it to make sense for your model)
  • Create a function component that shows details of one thing (UserDetail)
    • Use a prop that has the array of your models
    • Use a parameter from the route path /:id to find the model to show
    • Use whatever html you want to show all of the properties of your thing
  • App.js
    • componentDidMount, call loadThings

React Router

  • Import necessary components from react-router-dom into App.js
  • Make sure to wrap everything in BrowserRouter
  • Create a route to show the list container
  • Create a route to show the create container
  • Create a route to show the detail container. Make sure this route has a variable in it
  • Make sure to wrap all routes in Switch
  • Create links to the list and create routes, put them anywhere in App.js outside of the Switch.

Redux

* The only state you need is an array of your models
    * state.js
* Create actions for loading your models and models loaded
    * loadThings() - do a fetch get to “/things”
    * thingsLoaded(things) - THINGS_LOADED
* Create an action for saving a new model
    * createThing(thing) - do a fetch post to “/things”
    * when the fetch is complete, dispatch to loadThings
* Create an action for deleting an item
    * deleteThing(id) - do a fetch delete to “/things/” + id
    * when the fetch is complete, dispatch to loadThings
* Create reducer for the state
    * care about the action THINGS_LOADED
* Create containers for all of you components
    * mapStateToProps and mapDispatchToProps
    * The list component container should mapStateToProps for the array of things
    * The list component container should mapDispatchToProps for the deleteThing action
    * The new thing component container should mapDispatchToProps for the saveThingAction
    * AppContainer should mapDispatchToProps for loadThings.

Server - use advanced-express-practice as an example

  • The code for this goes in /src
  • Use express to create a server listening on port 3001
  • Use mongoose to connect to a MongoDB database called “checkpoint2”
  • Create a Model for your thing
  • Create a Route and Controller for your thing
  • In the Route, create routes for getting all things, getting one thing by id, deleting one thing, updating one thing, and creating one thing
  • In the Controller, create functions for list,show,create,update,remove

Points

  • When I yarn start, the web page loads with no errors - 10pts
  • I can navigate to the list and create screen from links - 10pts
  • I can enter information into the create screen and click save. If I go back to the list screen, that new information is there. - 20pts
  • If I go to the list screen it will show all current existing information - 20pts
  • The list screen has a view link for each item. If I click that link the detail screen appears. The details of the item are shown. - 20pts
  • If I click the delete button on the list, the item I clicked will be removed from the list - 20pts

Extra Credit

  • Edit Component
    • Create a component to edit your things. It will be almost the same as the create component.
    • Use a prop that has the array of your models
    • Use a parameter from the route path /:id to find the model to show
    • Populate the properties of the model into the inputs
    • onSubmit populate the information from state back into the model, call a prop function called updateThing(thing)
  • Create a container for the edit component
    • mapsStateToProps for the array of models
    • mapDispatchToProps for an action updateThing
  • Create an action updateThing(thing)
    • do a fetch put to "/things/" + thing._id
    • when the fetch is complete, dispatch to loadThings
  • In App.js, add a route to the edit container with a variable /:id
  • In the list components,add a Link for the edit route.

Bonus

  • Create the edit component by reusing the create component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.