An online markdown blog and knowledge repository.
Need to finish Read-14 tonight to get points!
Tomorrow is the assessment.
Today is prepare for assessment day over most everything else (except the lab and then the reading).
Will have a video prepped by end of week that will go through Challenges 13-15.
Just submit the minimum requirement on these then turn them in and get back to Lab and assessment preparation.
Includes() and Array.prototype.Every()
Similar to Array.prototype.Includes() but for all items in the collection.
If everything passes the conditional within an array: return true.
Any other condition? Return false.
So must be an exact match for the entire array.
Array.prototype.Every()
npm i when you clone code from the internet/github..env file has the correct settings: FE - backend API URI; BE - DB Server connect string and server API port.node seed.jsnpm start; be - nodemonhideModal? to false true.type=submit changes the event handling and could require event.preventDefault();methodName = async (params) => { codeblock }[...this.state.books, newArrItem]. Creates a 'deep copy' of the data within the array, making a new array which is what React State wants.app.usee(express.jason()); in order to digest json body POST requests (because that's just how it is designed).onClick={()=>thingyHandler(this.thing._id)} to be sure the context of the currently selected item is sent to thingyHandler() and so thingyHandler() isn't executed on render./books/?id=nnnapp.delete('/path/:id...') the server code will be let id=request.params.id; because the id is a 'params' object from the URL. Params are used with a :id where 'id' becomes the parameter name, containing the string that follows in the URL. Remember 'id' is implied in the URL!let location = request.query.location;...mongodb.net/my_database_name?retry.... Username and Password might also have to be updated depending on which server you are connecting to.function errorHandler (err, req, res, next) {
if (res.headersSent) {
return next(err)
}
res.status(500)
res.render('error', { error: err});
}
// Note: error-handling middleware should be defined after
// the other app.use() and routes calls (see References)
heroku git:remote -a {name-of-my-app}git status to verify you are on main prior to the next stepgit push heroku mainCrud Mongoose Rest
---- -------- ----
Create .create() POST
Read .find() GET
Update .findByIdAndUpdate() PUT
Delete .findByIdAndDelete() DELETE
Clear function: Opposite of seed => deletes everything from the DB.
Utilizes Mongoose.deleteMany();
Not required for Lab (or exam, presumably).
Back End:
app.put('/cats/:id', putCats);
async function putCats (req, res, next) {
let id = request.params.id;
// data about the updated cat will be in request.body
try {
// mongoose findByIdAndUpdate() takes 3 args:
// ID of thing in DB; updated data; options{}
// the options object is what differntiates a PUT from a PATCH
// here we will use a PUT rather than PATCH
let updatedCat = await Cat.findByIdAndUpdate(id, req.body, {new: true, overwrite: true});
response.status(200).send(updatedCat);
}
catch(err) {
next(err);
}
}
Thunder Client:
/route/:id )Front End:
Put in a method to update a cat.
// remember: a Form or button will be necessary to start the update workflow from the UI
updateCat = async (updateCat) => {
try{
let url = `${SERVER}/cats/${updateCat._id}`;
let updatedCat = await axios.put(url, catToUpdate);
// we have an updated cat so replace the old version with new
// before we push it into state
let updatedCatArray = this.state.cats.map(existingCat => {
return existingCat._id === catToUpdate._id
? updatedCat.data
: existingCat;
});
this.setState({
cats: updatedCatArray,
})
}
catch (err){
console.log('An error occurred: ', err.response.data);
}
}
Inside the render method return():
<>
<Button onClick{()=>this.setState({showUpdateForm: true})}>Update</Button>
{ this.state.showUpdateForm && <Form here>} // use this to allow inserting a form
</>
Add a click handler for the Update button.
Recall that the passed-in methods and params will be {this.Component.props}
You will need to pre-load the existing values into the Form to avoid an update error on the DB site.
Remember that a textbox that is an empty string is falsey, so use a logical OR '||' to check for null then apply the existing value if true.
Add 'Update' to the functionality.
Add a Form to the FE to allow user to edit an existing item details.
Ensure the page updates according to the response.
Will be associated with a DB that is temporal and non-persistent (so don't shut it down).
Can use the same Mongoose methods (create, find, etc).
Use Thunder Client to get data in and out of the database, because the DB UI will not be available.
Use the cats project demoed in classes as the go-to reference.
Not tricky code - mostly like what we've written this week.
If the schema changes on the MongoDB, the '__v' property should be incremented. Write down any Q's about today's work and tomorrows exam, for review Thursday morning.