1
00:00:01,070 --> 00:00:04,550
We're not going to start to focus on creating this header that's going to be displayed at the top of

2
00:00:04,580 --> 00:00:08,660
every single page given that this thing is displayed at the top of every page.

3
00:00:08,660 --> 00:00:12,860
There's definitely two ways we can go about designing it and showing it on the screen.

4
00:00:12,860 --> 00:00:18,530
Option number one would be to go into every one of our different page components such as index dot J.S.

5
00:00:18,680 --> 00:00:24,970
sign in and sign up and in each of these we could add in about inside a sign in at the very top.

6
00:00:25,000 --> 00:00:29,400
Maybe like right above that form some kind of like reusable header component.

7
00:00:29,600 --> 00:00:33,740
If we took this kind of approach we would have to go round to every different page and remember to add

8
00:00:33,740 --> 00:00:37,970
in that header element there's definitely a better way to handle this.

9
00:00:37,980 --> 00:00:43,200
You might recall then site of our pages directory we had created a custom app component that was inside

10
00:00:43,200 --> 00:00:46,270
of our underscore abduct J as file.

11
00:00:46,330 --> 00:00:51,790
The reason we had originally done this was to just be able to include some global sea assets but it

12
00:00:51,790 --> 00:00:56,020
turns out that this custom app combined right here can also be used to show some elements on the screen.

13
00:00:56,020 --> 00:00:58,840
They'll be visible on every single page.

14
00:00:58,840 --> 00:01:03,250
Remember that this component prop right here is really the page that you're trying to show.

15
00:01:03,250 --> 00:01:08,230
So component will be equal to our signing component or sign up or the landing page.

16
00:01:08,230 --> 00:01:12,730
So if we want to show something that's gonna be visible on every page we can wrap this component with

17
00:01:12,730 --> 00:01:14,080
that extra content.

18
00:01:14,110 --> 00:01:15,800
Let me show you what I mean.

19
00:01:15,920 --> 00:01:22,350
I'm going to add in a dip right here around that component and then right above the component itself.

20
00:01:22,360 --> 00:01:27,190
I'm gonna put on in each one of header.

21
00:01:27,370 --> 00:01:30,390
Make sure you move the semicolon at the very end of component.

22
00:01:30,400 --> 00:01:35,590
If you had 1 0 then save this and I'll flip back over and let's see what we get.

23
00:01:35,590 --> 00:01:37,930
OK well we now have header at the very top.

24
00:01:38,140 --> 00:01:42,360
And if I start to navigate to some other routes you'll notice that's present everywhere.

25
00:01:42,460 --> 00:01:48,900
So without a doubt this would be a pretty solid way of getting the header to be displayed on the screen.

26
00:01:48,940 --> 00:01:53,080
Now one thing that we need to really understand around this header is that it's kind of reactive in

27
00:01:53,080 --> 00:01:57,100
nature as the user starts to sign in and sign out of our application.

28
00:01:57,100 --> 00:01:59,150
We need to update the content in the header.

29
00:01:59,320 --> 00:02:04,330
So if the user is not signed in we need to show some links to go to the sign up in sign and pages.

30
00:02:04,330 --> 00:02:09,740
But once a user is authenticated we're going to change that to just say Sign out instead so that means

31
00:02:09,740 --> 00:02:15,200
that our header needs to understand who the current user is and that kind of presents a little bit of

32
00:02:15,200 --> 00:02:17,720
a problem for us with our current architecture.

33
00:02:17,720 --> 00:02:21,370
Let me show you a diagram to help you understand why it's at present.

34
00:02:21,520 --> 00:02:23,360
This is what we're saying that we want to do.

35
00:02:23,560 --> 00:02:29,120
We want our app component to always display a header and possibly index not just sign up or sign in

36
00:02:30,270 --> 00:02:35,610
at present index such s is already fetching some data to figure out who the current user is.

37
00:02:35,610 --> 00:02:42,380
But we are now saying that we want to somehow also have our header now with the current user is rather

38
00:02:42,380 --> 00:02:44,540
than having two separate requests to fetch some data.

39
00:02:44,540 --> 00:02:50,810
It makes a lot of sense to really just centralize that data fetching Logic up into the app component

40
00:02:50,840 --> 00:02:51,430
alone.

41
00:02:52,010 --> 00:02:56,420
So the app component can be in charge of some get initial prompts function to fetch the current user

42
00:02:56,990 --> 00:03:02,700
so it can fetch the current user and then pass that down as a prop into the header and index.

43
00:03:02,720 --> 00:03:08,890
J.S. that's what we're going to start to do rather than having the landing page figure out who the current

44
00:03:08,890 --> 00:03:09,570
user is.

45
00:03:09,640 --> 00:03:12,520
We're going to extract that into the app component instead.

46
00:03:12,600 --> 00:03:16,810
Then once the app component understands who the current user is it can pass it down as a prop into header

47
00:03:17,140 --> 00:03:18,680
and index dot J.S..

48
00:03:18,850 --> 00:03:23,320
So eventually right here instead of each one we'll have an actual header component and we'll pass down

49
00:03:23,320 --> 00:03:26,020
some prop to it that says hey here's the current user.

50
00:03:26,230 --> 00:03:27,940
Same thing for this component as well.

51
00:03:28,000 --> 00:03:31,940
Remember that component is going to eventually be the index not J.S. component.

52
00:03:32,020 --> 00:03:38,100
And so we can somehow include it in this J.S. sex element and this definitely sounds like not the worst

53
00:03:38,100 --> 00:03:41,430
thing in the world but there is a little bit of a complication.

54
00:03:41,460 --> 00:03:47,500
We need to be aware of we're saying right now that we're going to move this data fetching logic from

55
00:03:47,560 --> 00:03:49,270
index up to app.

56
00:03:49,720 --> 00:03:54,250
What that really means is we are going to define get initial props inside of our app component and index

57
00:03:54,250 --> 00:03:59,100
our chests will not require a get initial props function anymore.

58
00:03:59,140 --> 00:04:03,760
So we're moving that entire function over an index which I guess is not going to have one.

59
00:04:03,800 --> 00:04:09,850
However at some point in the future I think it is not unreasonable to say that we might have some other

60
00:04:09,850 --> 00:04:14,080
components that does need to have some get initial promise function.

61
00:04:14,080 --> 00:04:15,480
Maybe it will be the landing page.

62
00:04:15,490 --> 00:04:20,170
Maybe it'll be some other page but we probably are going to eventually be in a scenario where we want

63
00:04:20,170 --> 00:04:26,140
to have both the app component have get initial props and some page have get initial props as well.

64
00:04:26,170 --> 00:04:30,610
And it turns out that having these two different components or these two different pages with the get

65
00:04:30,610 --> 00:04:35,800
initial prowess function is a little bit more challenging to deal with with next J.S. than you would

66
00:04:35,800 --> 00:04:40,660
probably expect as we're kind of finding his true with a lot of this stuff right next to us.

67
00:04:40,660 --> 00:04:45,130
Anyways the point is we might eventually want to have get initial props up here and down here as well

68
00:04:45,460 --> 00:04:50,590
and to accommodate for that we do have to add in a little bit of extra code something to be aware of.

69
00:04:50,770 --> 00:04:57,150
But right now let's just focus on relocating get initial props from landing page up to app component.

70
00:04:57,220 --> 00:04:59,830
It's quite possible start to write out this code in just a moment.