1
00:00:00,000 --> 00:00:04,000
So now that we're able to load meals

2
00:00:04,000 --> 00:00:07,000
and then also view the details of a meal,

3
00:00:07,000 --> 00:00:08,000
it would of course be nice

4
00:00:08,000 --> 00:00:11,000
if we could also add our own meals,

5
00:00:11,000 --> 00:00:14,000
and that's the offer what we'll work on next.

6
00:00:15,000 --> 00:00:19,000
For that, it is this Page.js file

7
00:00:19,000 --> 00:00:21,000
in this share folder, in this meals folder,

8
00:00:21,000 --> 00:00:23,000
which we will now work on

9
00:00:23,000 --> 00:00:25,000
because that's the page that is responsible

10
00:00:25,000 --> 00:00:28,000
for displaying what we can see here.

11
00:00:29,000 --> 00:00:30,000
Now, to save you some time,

12
00:00:30,000 --> 00:00:35,000
I already prepared this share meal page for you.

13
00:00:35,000 --> 00:00:37,000
So attached you find my share meal page component

14
00:00:37,000 --> 00:00:41,000
in this Page.js file, and you can simply replace

15
00:00:41,000 --> 00:00:44,000
your share Page.js file with that.

16
00:00:45,000 --> 00:00:48,000
In that page component, you see I'm outputting a header

17
00:00:48,000 --> 00:00:53,000
with some dummy text and then a main section with a form

18
00:00:54,000 --> 00:00:58,000
and that form then contains a couple of inputs with labels

19
00:00:58,000 --> 00:01:01,000
and one special input here at the end,

20
00:01:01,000 --> 00:01:04,000
which will work in a couple of minutes.

21
00:01:04,000 --> 00:01:05,000
An image picker,

22
00:01:05,000 --> 00:01:08,000
which will allow us to pick and upload an image

23
00:01:08,000 --> 00:01:10,000
because that will be part of this form.

24
00:01:11,000 --> 00:01:13,000
Now this form won't work yet.

25
00:01:13,000 --> 00:01:17,000
We won't be able to submit it yet, or to be precise,

26
00:01:17,000 --> 00:01:20,000
we don't have any code that would handle the submission,

27
00:01:20,000 --> 00:01:23,000
but that's something we'll work on together later.

28
00:01:24,000 --> 00:01:28,000
Now attached, you also find a page.module CSS file,

29
00:01:28,000 --> 00:01:33,000
which contains the necessary styles for this page,

30
00:01:33,000 --> 00:01:36,000
and therefore with all that added, if you save everything,

31
00:01:36,000 --> 00:01:38,000
you should see this form on the screen

32
00:01:38,000 --> 00:01:41,000
when you visit this page, and that doesn't look too bad.

33
00:01:43,000 --> 00:01:45,000
But I also mentioned this image picker

34
00:01:45,000 --> 00:01:47,000
and that's something we'll work on next

35
00:01:47,000 --> 00:01:49,000
before we then thereafter,

36
00:01:49,000 --> 00:01:51,000
make sure that this form can be submitted.