1 00:00:00,000 --> 00:00:03,000 So we added the server action 2 00:00:03,000 --> 00:00:05,000 and we're extracting the data. 3 00:00:05,000 --> 00:00:08,000 Now I wanna store that data in the database, 4 00:00:08,000 --> 00:00:11,000 and of course for that, I did already create 5 00:00:11,000 --> 00:00:15,000 that post.js file, which was part of the starting project. 6 00:00:16,000 --> 00:00:20,000 Now in there we have this storePost function, 7 00:00:20,000 --> 00:00:22,000 which wants a post object, 8 00:00:22,000 --> 00:00:26,000 which must include an image url, a title, a content, 9 00:00:26,000 --> 00:00:28,000 and some user ID. 10 00:00:28,000 --> 00:00:31,000 And when that function then gets called with that data, 11 00:00:31,000 --> 00:00:33,000 that data gets stored in the database. 12 00:00:34,000 --> 00:00:39,000 So therefore, back in this NewPostPage JS file here, 13 00:00:39,000 --> 00:00:42,000 instead of console logging that data, 14 00:00:42,000 --> 00:00:45,000 I'll call storePost, which is imported from 15 00:00:45,000 --> 00:00:47,000 that lib/posts folder, 16 00:00:47,000 --> 00:00:50,000 and I'll pass such a post object to it. 17 00:00:51,000 --> 00:00:54,000 Now what's important to note here 18 00:00:54,000 --> 00:00:57,000 is that of course at this point 19 00:00:57,000 --> 00:01:02,000 we don't have any image URL yet, we just have a image file, 20 00:01:02,000 --> 00:01:04,000 which is not the same. 21 00:01:04,000 --> 00:01:07,000 We'll need to store that somewhere 22 00:01:07,000 --> 00:01:10,000 where we then get a link to the stored file, 23 00:01:10,000 --> 00:01:11,000 and we'll do that soon. 24 00:01:11,000 --> 00:01:13,000 But for the moment, for that image URL, 25 00:01:13,000 --> 00:01:17,000 I'll simply insert some fallback URL, 26 00:01:17,000 --> 00:01:21,000 or in this case actually an empty string, 27 00:01:21,000 --> 00:01:23,000 which of course means that for now we won't have an image, 28 00:01:23,000 --> 00:01:25,000 but that will change soon. 29 00:01:26,000 --> 00:01:27,000 Now for the title I of course, 30 00:01:27,000 --> 00:01:30,000 will set that submitted title, 31 00:01:30,000 --> 00:01:31,000 and we could either do that like that 32 00:01:31,000 --> 00:01:36,000 or use that JavaScript shortcut if the property key name 33 00:01:36,000 --> 00:01:40,000 is the same as the name of the variable that holds the data 34 00:01:40,000 --> 00:01:45,000 and do the same for the content, which is also expected. 35 00:01:45,000 --> 00:01:47,000 And then we also need to set a user ID. 36 00:01:47,000 --> 00:01:49,000 And of course at this point 37 00:01:49,000 --> 00:01:52,000 we don't have any log-in mechanism, 38 00:01:52,000 --> 00:01:56,000 so we have some dummy users which are created 39 00:01:56,000 --> 00:01:58,000 when that database is initialized. 40 00:01:58,000 --> 00:02:01,000 But we don't really have a way of 41 00:02:01,000 --> 00:02:05,000 becoming any of those users when we use the application. 42 00:02:05,000 --> 00:02:07,000 And therefore, for this demo, 43 00:02:07,000 --> 00:02:11,000 I'll simply assume that it's always the user with ID one 44 00:02:11,000 --> 00:02:14,000 that creates a post, 45 00:02:15,000 --> 00:02:17,000 and it will then later be the user with ID two 46 00:02:17,000 --> 00:02:19,000 that can like a post, 47 00:02:19,000 --> 00:02:22,000 because that's another feature we'll add later. 48 00:02:23,000 --> 00:02:25,000 And of course, later in the course 49 00:02:25,000 --> 00:02:27,000 we'll also add real authentication. 50 00:02:27,000 --> 00:02:30,000 But for now it's just this dummy user ID. 51 00:02:31,000 --> 00:02:33,000 That however, should do the trick 52 00:02:33,000 --> 00:02:36,000 that should store the post. 53 00:02:37,000 --> 00:02:40,000 Now with that, if we save that, 54 00:02:40,000 --> 00:02:43,000 and I maybe reload this page 55 00:02:43,000 --> 00:02:47,000 to make sure that it's really using the latest code. 56 00:02:47,000 --> 00:02:49,000 I could enter a title like Yummy, 57 00:02:50,000 --> 00:02:54,000 then pick another image which I prepared in this case, 58 00:02:54,000 --> 00:02:58,000 some loaded fries, and then add some text like 59 00:02:58,000 --> 00:03:03,000 had a great stay at the Pitmasters Restaurant, 60 00:03:04,000 --> 00:03:07,000 which is a real restaurant, a real great restaurant, 61 00:03:07,000 --> 00:03:12,000 and enjoyed a nice burger and some loaded fries, 62 00:03:13,000 --> 00:03:14,000 something like this. 63 00:03:15,000 --> 00:03:17,000 Now again, if I click create post, 64 00:03:17,000 --> 00:03:18,000 we won't get any feedback here 65 00:03:18,000 --> 00:03:21,000 because we still haven't added any logic for this. 66 00:03:21,000 --> 00:03:24,000 But if we go to the feed page, 67 00:03:24,000 --> 00:03:28,000 we should now see that we can see our post here, 68 00:03:28,000 --> 00:03:30,000 of course, without an image at this point, 69 00:03:30,000 --> 00:03:33,000 because again, we're not storing that yet. 70 00:03:33,000 --> 00:03:35,000 But all the other data is here. 71 00:03:35,000 --> 00:03:39,000 And this is data that's coming from the database 72 00:03:39,000 --> 00:03:42,000 because in that feed folder, in the page.js file, 73 00:03:42,000 --> 00:03:45,000 I'm calling the getPosts method, 74 00:03:45,000 --> 00:03:48,000 as you learned it in the data fetching section 75 00:03:48,000 --> 00:03:52,000 with async await, and getPosts, is simply a function 76 00:03:52,000 --> 00:03:57,000 from that lip/posts.js file that reaches out to the database 77 00:03:57,000 --> 00:04:00,000 and fetches some data. 78 00:04:00,000 --> 00:04:04,000 And therefore, we can tell that we're successfully storing 79 00:04:04,000 --> 00:04:07,000 the submitted data in that database, 80 00:04:07,000 --> 00:04:11,000 which is another huge step forward. 81 00:04:11,000 --> 00:04:12,000 But of course, now it would be nice 82 00:04:12,000 --> 00:04:15,000 to also get some feedback 83 00:04:15,000 --> 00:04:19,000 when we submit that form so that for example, 84 00:04:19,000 --> 00:04:23,000 these buttons disappear and we see some loading text 85 00:04:23,000 --> 00:04:24,000 whilst we're waiting for the submission. 86 00:04:24,000 --> 00:04:27,000 And we're also maybe navigated away 87 00:04:27,000 --> 00:04:29,000 once the data has been submitted 88 00:04:29,000 --> 00:04:32,000 so that we may automatically navigate 89 00:04:32,000 --> 00:04:34,000 to this feed page thereafter. 90 00:04:34,000 --> 00:04:37,000 And that's what will work on next.