1
00:00:03,000 --> 00:00:05,123
After looking at the API requests

2
00:00:05,623 --> 00:00:07,596
supported by the Strapi CMS,

3
00:00:08,096 --> 00:00:09,667
let's go back to our Next Shop,

4
00:00:10,695 --> 00:00:13,823
and start adding some authentication functionality.

5
00:00:14,561 --> 00:00:18,172
The first thing we could do is add a login page.

6
00:00:18,672 --> 00:00:21,066
So, at the same level as the index page,

7
00:00:21,066 --> 00:00:22,323
let's add a new file.

8
00:00:22,883 --> 00:00:24,170
I'll call it "sign-in".

9
00:00:25,716 --> 00:00:28,545
And this will be a usual React component,

10
00:00:28,545 --> 00:00:29,925
called "SignInPage",

11
00:00:31,682 --> 00:00:33,905
and exported as the "default" name.

12
00:00:35,948 --> 00:00:37,552
Now, as for the content,

13
00:00:37,552 --> 00:00:40,761
we could copy and modify what's in the HomePage.

14
00:00:41,328 --> 00:00:42,986
But we're starting to have

15
00:00:42,986 --> 00:00:45,027
a bit too much duplication here,

16
00:00:45,027 --> 00:00:47,069
because the ProductPage also has

17
00:00:47,069 --> 00:00:48,472
some of the same code.

18
00:00:49,164 --> 00:00:51,151
In our Blog example we used

19
00:00:51,151 --> 00:00:52,918
the custom App component

20
00:00:52,918 --> 00:00:55,200
to keep the common page layout.

21
00:00:55,847 --> 00:00:57,958
But in this example I want to show you

22
00:00:57,958 --> 00:00:59,402
another possible approach.

23
00:00:59,957 --> 00:01:02,557
We could create a normal React component,

24
00:01:02,557 --> 00:01:04,141
that I like to call Page,

25
00:01:04,706 --> 00:01:07,314
And this will contain the common user interface.

26
00:01:07,814 --> 00:01:10,691
Now, I wrote a user snippet for myself

27
00:01:10,691 --> 00:01:14,022
called "rfc" for "React Function Component".

28
00:01:14,598 --> 00:01:16,380
that can automatically create

29
00:01:16,380 --> 00:01:18,838
the initial boilerplate for a component,

30
00:01:18,838 --> 00:01:21,912
so I don't need to write the same code every time.

31
00:01:22,535 --> 00:01:24,963
If you don't know about "User Snippets",

32
00:01:24,963 --> 00:01:27,755
it's a feature available in Visual Studio Code

33
00:01:28,316 --> 00:01:31,124
that lets you create reusable code templates.

34
00:01:31,624 --> 00:01:35,104
In this case when I type the prefix, that is "rfc"

35
00:01:35,104 --> 00:01:37,610
the editor will insert all the lines

36
00:01:37,610 --> 00:01:39,141
defined in the "body",

37
00:01:39,141 --> 00:01:41,856
and you can insert predefined variables

38
00:01:41,856 --> 00:01:43,178
like the file name.

39
00:01:43,957 --> 00:01:45,914
If you search for "User Snippets"

40
00:01:45,914 --> 00:01:48,227
in the Visual Studio Code documentation

41
00:01:48,227 --> 00:01:49,888
you can find out more there,

42
00:01:49,888 --> 00:01:51,727
and it's a very useful feature.

43
00:01:51,727 --> 00:01:54,515
But you can also just type everything manually,

44
00:01:54,515 --> 00:01:56,828
so I won't spend any more time on that.

45
00:01:57,625 --> 00:02:00,387
Now, this Page component will contain

46
00:02:00,387 --> 00:02:03,299
the common structure used by all pages.

47
00:02:03,874 --> 00:02:06,048
So let's copy what's in the HomePage

48
00:02:06,048 --> 00:02:07,256
as a starting point.

49
00:02:08,174 --> 00:02:11,562
But we'll want to pass the page-specific content

50
00:02:11,562 --> 00:02:13,751
as the special "children" prop,

51
00:02:14,740 --> 00:02:16,644
and display that after the "Title"

52
00:02:16,644 --> 00:02:17,876
in the "main" section.

53
00:02:18,432 --> 00:02:19,950
We also want the "title"

54
00:02:19,950 --> 00:02:21,849
to be different for each page,

55
00:02:21,849 --> 00:02:24,254
so we could pass it as a separate prop

56
00:02:24,881 --> 00:02:28,191
and then use that value as the "Title" text.

57
00:02:28,881 --> 00:02:30,681
We also want the same title

58
00:02:30,681 --> 00:02:32,082
in the document head,

59
00:02:32,082 --> 00:02:35,483
but in this case we could still append "Next Shop".

60
00:02:35,483 --> 00:02:39,018
Because this is the title used in the browser window,

61
00:02:39,018 --> 00:02:40,818
and also by search engines,

62
00:02:40,818 --> 00:02:43,953
so it helps to include the name of our website.

63
00:02:44,787 --> 00:02:46,886
Ok. Now we just need to import

64
00:02:46,886 --> 00:02:49,266
the "Head" and "Title" components.

65
00:02:50,853 --> 00:02:51,640
And this should be ready.

66
00:02:52,353 --> 00:02:55,263
So now, if we start from the HomePage again,

67
00:02:56,753 --> 00:02:58,997
We can use the new "Page" component

68
00:02:58,997 --> 00:03:00,599
as the top-level element.

69
00:03:01,164 --> 00:03:03,674
Let me check quickly that it was imported correctly.

70
00:03:04,174 --> 00:03:06,078
Page expects a "title" prop,

71
00:03:06,078 --> 00:03:08,186
and note that we can pass props

72
00:03:08,186 --> 00:03:09,886
to this common component,

73
00:03:09,886 --> 00:03:12,471
which is something that's not possible

74
00:03:12,471 --> 00:03:14,919
when using the custom App component.

75
00:03:14,919 --> 00:03:18,455
This is in fact the main advantage of this approach.

76
00:03:19,296 --> 00:03:22,214
Anyway, as "title" let's put "Indoor Plants".

77
00:03:22,214 --> 00:03:24,030
That's a good description of

78
00:03:24,030 --> 00:03:25,717
what we show in this page.

79
00:03:26,347 --> 00:03:28,695
At this point we can remove the "Head",

80
00:03:28,695 --> 00:03:29,899
"main", and "Title",

81
00:03:29,899 --> 00:03:32,910
because they're all provided by the new component.

82
00:03:33,531 --> 00:03:36,105
And of course we need to close the "Page" tag.

83
00:03:37,297 --> 00:03:38,936
Let me indent this block properly.

84
00:03:39,436 --> 00:03:40,847
And that should be it.

85
00:03:40,847 --> 00:03:42,451
The HomePage still works,

86
00:03:42,451 --> 00:03:45,273
and it shows "Indoor Plants" as the heading.

87
00:03:45,902 --> 00:03:48,556
If we look at the title on the browser tab

88
00:03:48,556 --> 00:03:50,768
that's also our new document title.

89
00:03:51,332 --> 00:03:53,685
Ok. Before we move to the next page

90
00:03:53,685 --> 00:03:56,912
we can probably remove some of the imports here.

91
00:03:57,480 --> 00:03:59,570
"Title" is now in the new component,

92
00:03:59,570 --> 00:04:00,731
and same for "Head".

93
00:04:01,290 --> 00:04:03,272
Looks like "Link" is also unused.

94
00:04:03,272 --> 00:04:05,194
Ideally I should have removed it

95
00:04:05,194 --> 00:04:07,356
when we extracted the "ProductCard".

96
00:04:07,977 --> 00:04:10,886
Anyway, let's move to the ProductPage now.

97
00:04:11,386 --> 00:04:14,011
Here we want to repeat the same process

98
00:04:14,011 --> 00:04:16,165
and import the "Page" component.

99
00:04:16,733 --> 00:04:19,625
As the "title" in this case we want to show

100
00:04:19,625 --> 00:04:21,577
the "product.title" property.

101
00:04:22,146 --> 00:04:23,551
We can remove the common elements,

102
00:04:25,079 --> 00:04:26,684
re-indent the main "div",

103
00:04:27,845 --> 00:04:29,550
and finally close the "Page".

104
00:04:30,978 --> 00:04:32,868
Let's check a product page.

105
00:04:32,868 --> 00:04:34,618
It still works just fine.

106
00:04:35,189 --> 00:04:37,529
So, let's remove any unused imports

107
00:04:37,529 --> 00:04:39,067
from this file as well.

108
00:04:40,655 --> 00:04:41,904
And that should be that.

109
00:04:41,904 --> 00:04:43,778
Let's just make sure it still works.

110
00:04:45,955 --> 00:04:48,275
Ok. At this point we can finally

111
00:04:48,275 --> 00:04:50,161
go back to our SignInPage.

112
00:04:51,021 --> 00:04:53,825
And here we can use our new "Page" component

113
00:04:53,825 --> 00:04:55,737
to quickly create the content.

114
00:04:56,301 --> 00:04:58,575
We can show "Sign In" as the title.

115
00:04:59,075 --> 00:05:01,783
And that's it. We'll add more content later.

116
00:05:02,283 --> 00:05:04,780
Let's test the new "sign-in" path now,

117
00:05:04,780 --> 00:05:08,133
and here's our new page, with the expected heading.

118
00:05:08,699 --> 00:05:10,972
Ok. Let's stop here for this video.

119
00:05:11,472 --> 00:05:13,353
We spent a little bit of time

120
00:05:13,353 --> 00:05:15,949
to extract this common "Page" component,

121
00:05:15,949 --> 00:05:18,285
which was just a bit of refactoring.

122
00:05:18,285 --> 00:05:20,037
But it will make it quicker

123
00:05:20,037 --> 00:05:22,113
to create new pages from now on.

124
00:05:22,113 --> 00:05:25,552
In the next video we'll continue with the SignInPage.