So we added the server action
and we're extracting the data.
Now I wanna store that data in the database,
and of course for that, I did already create
that post.js file, which was part of the starting project.
Now in there we have this storePost function,
which wants a post object,
which must include an image url, a title, a content,
and some user ID.
And when that function then gets called with that data,
that data gets stored in the database.
So therefore, back in this NewPostPage JS file here,
instead of console logging that data,
I'll call storePost, which is imported from
that lib/posts folder,
and I'll pass such a post object to it.
Now what's important to note here
is that of course at this point
we don't have any image URL yet, we just have a image file,
which is not the same.
We'll need to store that somewhere
where we then get a link to the stored file,
and we'll do that soon.
But for the moment, for that image URL,
I'll simply insert some fallback URL,
or in this case actually an empty string,
which of course means that for now we won't have an image,
but that will change soon.
Now for the title I of course,
will set that submitted title,
and we could either do that like that
or use that JavaScript shortcut if the property key name
is the same as the name of the variable that holds the data
and do the same for the content, which is also expected.
And then we also need to set a user ID.
And of course at this point
we don't have any log-in mechanism,
so we have some dummy users which are created
when that database is initialized.
But we don't really have a way of
becoming any of those users when we use the application.
And therefore, for this demo,
I'll simply assume that it's always the user with ID one
that creates a post,
and it will then later be the user with ID two
that can like a post,
because that's another feature we'll add later.
And of course, later in the course
we'll also add real authentication.
But for now it's just this dummy user ID.
That however, should do the trick
that should store the post.
Now with that, if we save that,
and I maybe reload this page
to make sure that it's really using the latest code.
I could enter a title like Yummy,
then pick another image which I prepared in this case,
some loaded fries, and then add some text like
had a great stay at the Pitmasters Restaurant,
which is a real restaurant, a real great restaurant,
and enjoyed a nice burger and some loaded fries,
something like this.
Now again, if I click create post,
we won't get any feedback here
because we still haven't added any logic for this.
But if we go to the feed page,
we should now see that we can see our post here,
of course, without an image at this point,
because again, we're not storing that yet.
But all the other data is here.
And this is data that's coming from the database
because in that feed folder, in the page.js file,
I'm calling the getPosts method,
as you learned it in the data fetching section
with async await, and getPosts, is simply a function
from that lip/posts.js file that reaches out to the database
and fetches some data.
And therefore, we can tell that we're successfully storing
the submitted data in that database,
which is another huge step forward.
But of course, now it would be nice
to also get some feedback
when we submit that form so that for example,
these buttons disappear and we see some loading text
whilst we're waiting for the submission.
And we're also maybe navigated away
once the data has been submitted
so that we may automatically navigate
to this feed page thereafter.
And that's what will work on next.