full-stack-CRUD.md

Not master copy. Master copy is currently https://docs.google.com/spreadsheets/d/1yxMpMPd0f9T_c1s2h9KRQ_DnYVJ6Vym_23bRS7ZeBRg/edit#gid=0

Use case 1: User submits new apartment for rent

Which step of CRUD ?

Create

Example on a website

user submits new apartment for rent

React

"Display form fields

Handle button or submit event

POST /apartments using fetch

Get response

If successful: Present created review

else: Present error"

Express

"app.post(""/apartments"", myRouteHandler)

get details from submitted req.body

validate

try to insert into mongodb

res.json(newlyCreatedApartment) //this includes an _id

or return an error (json + status code)"

MongoDB

insertOne(document, callback)

Use case 2: User "search for apartments to rent by location using a search box"

Which step of CRUD ?

Read (many)

Example on a website

user submits new apartment for rent

React

Display search box

Handle input change events and button click event

GET /apartments?location=camden using fetch

Get response, turn it into object with json()

store results list in state variable

Display results with apartments.map( a => )

Express

app.get(""/apartments"", myRouteHandler)

get location param from req.query.location

get all matches from mongoDB (or first 20)

res.json(matchingApartments)

MongoDB

find(filter, callback)

Use case 3: click to read the details of a one apartment for rent

Which step of CRUD ?

Read (one)

Example on a website

click to read the details of a one apartment for rent

React

handle button click or route

GET /apartments/1337 using fetch

Get response, turn string into object with json()

Store result in a state variable

Display the object (JSX)

Express

app.get("/apartments/:id", myRouteHandler)

req.params.id (a route param)

res.json(foundApartment)

MongoDB

findOne(filter, callback)

Use case 4: submit form changing details for an apartment

Which step of CRUD ?

Update

Example on a website

React

"Display existing record, with form fields for editing

Handle submit button event

Validate fields

PUT /apartments/1337 using fetch

Get response

Show user the outcome, including any error"

Express

app.put("/apartments/:id", myRouteHandler)

get document from req.body (use express.json())

perhaps lookup original record

validate

try to update in mongodb -->

res.json(updatedApartment) or an error

MongoDB

findOneAndUpdate(filter, updateObj, callback)

Use case 5:Delete a listing of an apartment

Which step of CRUD ?

Delete

Example on a website

React

DELETE to /apartments/1337 using fetch

Get response

Show user the outcome, including any error

Express

app.delete("/apartments/:id", myRouteHandler)

get id to delete from the route param req.params.id

try to delete in mongodb

res.sendStatus(200) or an error

MongoDB

deleteOne(filter, callback)

Use case:

Which step of CRUD ?

Example on a website

React

Express

MongoDB