So let's work on that added post feature.
First of all, we need to link to the added post page again,
then we need to load and render that page
and pre-populate the form there
with the currently entered post data
so that we don't start from a blank form,
but we have the existing data filled
into the form fields already.
And we can then just tweak the fields who want to tweak,
and then we have to handle submission.
So for making the link work,
let's go back to the post-item.ejs file
and let's work on this link.
It's up to you, how the path should look like,
but it could be slash posts then the ID,
which is post dot underscore ID,
just as we have it down there for viewing a post
and then slash edit.
So it's not the same path as for a viewing
it just starts with the same, well start, I guess,
but it's still a different path.
Now we can go to block.js and register and you get route
for this new path.
So here at the bottom,
I'll register a get route for slash posts, some ID.
So we have a dynamic route here again slash edit
that's the path we justified a couple of seconds ago.
And then we can define our function here,
which gets a request and a response separated by a comma
though, where we then handle incoming requests here.
Now, what does handling mean?
It means I wanna render this added page here,
this added post page
and we wanna pre-populate that page with the data
for data loaded posts.
So that we don't start with a blank form,
which would be very inconvenient.
Hence here as a first step,
we can turn this into an async function
so that we can then use DB, getDB
connect to the posts collection,
and then find that one post that has this ID.
So it's in the same logic as I had it here
for getting data for the detail page.
Hence, of course we can copy this code here,
actually this code here,
including the extraction of the post ID
and replace that code with it.
Now, however, I don't wanna exclude the summary,
I need the summary,
but I can exclude the other data
because here in this example,
you won't be able to change the author.
Hence I do wanna get the title,
I do also want to get the summary, of course,
and I do also want to get the body, so the full text,
I don't want to get the author
and I don't need the date here
because we're not able to add it
the date through the form anyways.
Instead we could consider updating the data later,
once the update is sent to the server
so that we don't just set the date when a post is created,
but also when it's changed, that's up to you,
whether you want that behavior or not,
but we'll worry about that later.
This will now find us this one post with this ID
and just as before we also wanna handle the case
that this post doesn't exist.
So we wanna check for its non-existence
and rendered a 404 template in this case,
if it does exist though then
I wanna render this update post template here.
So update that post and pass my post data into that template
and that therefore the logic for rendering
that added post page and for getting the data
we need for this page.
Now we need to work in the template
in this update, post EJS file
here we got all these form fields.
And as I said,
I want to pre-populate them with some values
so that we don't start with an empty form
for this we can add the value HTML attributes here
and set the value here for the title to post the dot title
so that we initialized as input
with the already saved title.
We will still be able to add it and change it
but we have a starting value, which is what I want here.
Same for the summary,
we wanna initialize this with post doc summary here.
And of course all this here for the text area
there we wanna pre-initialize this with posts dot body
that's the key under which the body text is stored
in the database documents.
Very important here,
don't add a line break because text areas
are one of the few elements in HTML
that do actually not ignore white space or line breaks.
And therefore if you add a line break here,
it would be part of the text area output,
which we don't want.
So here, that should be one line
without any extra white space or line breaks
between the text area text.
So that should pre-populate our form fields.
Now we also need to work on the form element here.
The method again, should be post
because we're storing some data,
we're changing some data in our database
and for the post that's of course, up to you,
it could be posts slash the ID and then edit again,
but this time with a post request
and that's indeed what I'll go for.
So here I'll then insert post dot underscore ID
slash edit again.
So the same path as we had it for loading this page,
but now with a post method, opposed to HTTP method,
instead of a get method and therefore it will technically
be a different route, which is what we want here.
Hence, we now prepared this page,
now we can handle the submission
to handle the submission we need to register a route,
a post route for this path and hence back in block.js.
Here we can now register such a post route
for posts slash some ID slash edit,
and then add our function with request and response here
and already converted into an async function,
because we're also going to talk to the database
from in there
and hence we'll have asynchronous code in there.
Now what's our goal in this function here now,
what do we wanna do?
Well, we noted we do get some data here
as part of the request,
and therefore we can extract the data from there
and then update our posts with that ID in the database,
with that data.
For this again, we get access to our database here
and there to the posts collection.
And then there, we can use the update one method
to update one specific post as you learned.
Now for this we'll need the post ID
and actually we can get this just as we got it here,
by extracting it from parants.
We can also turn this into such an object ID here
by passing the params request params ID
to the new object ID constructor function here.
So by instantiating this object,
the object with that clause here
by passing the params ID to it.
And then we can, first of all,
pass this first object to update one,
to filter for the post we do wanna update.
And in this case, that the post where underscore ID
is equal to our post ID,
then we pass a second value to update one as you learned
where we describe how to update the post
and here we use this special dollar sign set property name,
as you learned,
which then takes another object,
which describes the exact operations,
the exact fields that should be changed
and the new values they should assume.
So here, for example,
we know that we possibly got a new title,
a new summary text and a new body text.
So they for here I'll set title equal
to request body dot title.
So to the title that was submitted with the form
set summary equal to request body dot summary
and set body equal request dot body dot content
dot content, because an update post EJS,
this text area has a name of content.
So that's the key we have to access there,
let me reform it this to make it more readable.
And with that, this is the kind of query,
the kind of command we wanna send to the MongoDB server
for updating the post with this ID like that.
So by setting these properties to new values,
again, that's asynchronous operation,
so we can await this and we'll get some result back here,
which we could use log or inspect,
but here in the end, once we're done,
I'll ignore the result and simply just return a response
or handle my response here
and here since it's a post route,
I wanna redirect and redirect back to slash posts
so that we see that list of all posts again,
after updating a post.
And that should be it let's save it all
and see whether it works.
We can reload this first page click on added post
and we can see the update post page
and that form is pre-filled.
And now I'll add a couple of exclamation marks here
and add more text here does updating work
and click update post.
And I can see the exclamation marks here
so it seems like that worked.
And if I click on view post, I also see my new text here.
So updating worked, I also got no error here in the log,
so that's all looking good
and for completeness sake in my terminal here
in the MongoDB shell if I do have a look at my posts there,
of course, I also see the updated data there.
Now, what I did not update is the date though
and we could of course considered doing this here as well.
We could set the date to a new value as well,
and simply set it to the current date snapshot
so that when we update a post, the date is also updated.
Now this comes down to you
and how your website should behave though.
Should the date of a post be the date when it was created
or when it was updated.
You could also store different dates,
one for the creation which you never change
and one for the latest time it was updated,
which you do change whenever the post gets updated.
It's up to you here I'll not update the date.
So I'll comment this out, but that is a line you could add
if you do want to update a date,
whenever the post gets updated.
And then for now,
the last thing that's left to be implemented is the feature
that allows us to delete posts.
Again, it is something you can try implementing on your own.
We'll do it together in the next lecture.