1
00:00:03,000 --> 00:00:04,671
In this section we'll add

2
00:00:04,671 --> 00:00:07,746
some interactive functionality to our website.

3
00:00:08,312 --> 00:00:11,283
At the moment all the content in our blog

4
00:00:11,283 --> 00:00:12,804
is completely static.

5
00:00:12,804 --> 00:00:14,688
Not only in the sense that

6
00:00:14,688 --> 00:00:16,933
Next.js generates static pages,

7
00:00:16,933 --> 00:00:18,817
but also in the sense that

8
00:00:18,817 --> 00:00:21,425
there is almost no user interaction.

9
00:00:21,425 --> 00:00:23,019
The user can only read

10
00:00:23,019 --> 00:00:25,554
the content displayed in the pages.

11
00:00:25,554 --> 00:00:28,524
There is actually one type of interaction

12
00:00:28,524 --> 00:00:29,684
the user can do:

13
00:00:30,835 --> 00:00:32,412
and that's clicking on a link

14
00:00:32,412 --> 00:00:33,773
to open a different page.

15
00:00:34,327 --> 00:00:36,183
And this is in fact an example

16
00:00:36,183 --> 00:00:37,977
of client-side functionality,

17
00:00:38,538 --> 00:00:40,945
because we mentioned before that

18
00:00:40,945 --> 00:00:43,652
Next.js does client-site navigation.

19
00:00:43,652 --> 00:00:45,983
But it's all handled by Next.js

20
00:00:45,983 --> 00:00:47,337
behind the scenes.

21
00:00:48,062 --> 00:00:49,785
What if we want to add some

22
00:00:49,785 --> 00:00:51,890
custom interactive functionality,

23
00:00:51,890 --> 00:00:53,422
written in our own code?

24
00:00:53,422 --> 00:00:55,910
What we're going to do is let our users

25
00:00:55,910 --> 00:00:57,951
change the colours of our pages,

26
00:00:58,706 --> 00:01:01,380
and enable or disable dark mode,

27
00:01:01,380 --> 00:01:04,305
like this Create React App website.

28
00:01:04,888 --> 00:01:06,490
This will be a nice addition

29
00:01:06,490 --> 00:01:07,405
to our blog app.

30
00:01:07,962 --> 00:01:09,405
So how do we go about

31
00:01:09,405 --> 00:01:11,603
implementing this functionality?

32
00:01:11,603 --> 00:01:12,770
Well, for a start

33
00:01:12,770 --> 00:01:14,625
we'll need to show a button

34
00:01:14,625 --> 00:01:16,204
that the user can click

35
00:01:16,204 --> 00:01:18,814
to toggle between dark and light mode.

36
00:01:19,657 --> 00:01:21,575
And we could show that button

37
00:01:21,575 --> 00:01:22,500
in the NavBar.

38
00:01:23,066 --> 00:01:25,106
This is where we display the top links,

39
00:01:26,299 --> 00:01:28,494
so we could add another element here,

40
00:01:28,494 --> 00:01:29,383
after the list.

41
00:01:29,942 --> 00:01:30,963
Let's go and create

42
00:01:30,963 --> 00:01:33,166
a separate React component straight away.

43
00:01:33,719 --> 00:01:35,602
Let's call it "ThemeSwitch",

44
00:01:35,602 --> 00:01:37,754
since it's for switching between

45
00:01:37,754 --> 00:01:39,233
dark and light themes.

46
00:01:39,867 --> 00:01:41,109
This will be a regular

47
00:01:41,109 --> 00:01:42,519
React function component.

48
00:01:45,533 --> 00:01:46,528
And we can start with

49
00:01:46,528 --> 00:01:47,760
a simple "button" element,

50
00:01:48,307 --> 00:01:49,661
saying "Dark Mode".

51
00:01:51,707 --> 00:01:52,887
As always we need to

52
00:01:52,887 --> 00:01:54,657
export the component function.

53
00:01:56,007 --> 00:01:57,863
Now that we have our new component

54
00:01:57,863 --> 00:01:59,664
we can insert it into the NavBar.

55
00:02:02,774 --> 00:02:05,371
Note that the editor automatically added

56
00:02:05,371 --> 00:02:07,839
the right import statement at the top.

57
00:02:08,402 --> 00:02:09,595
Ok, let's see what

58
00:02:09,595 --> 00:02:11,448
this ThemeSwitch looks like.

59
00:02:12,014 --> 00:02:14,743
Right now it's just an unstyled button,

60
00:02:14,743 --> 00:02:17,193
and it's displayed below the links.

61
00:02:17,762 --> 00:02:19,223
Let's add some styles

62
00:02:19,223 --> 00:02:21,170
to put it on the right side.

63
00:02:21,170 --> 00:02:23,187
Our new ThemeSwitch is inside

64
00:02:23,187 --> 00:02:24,300
a "nav" element,

65
00:02:24,300 --> 00:02:26,804
and the "nav" contains two children:

66
00:02:26,804 --> 00:02:29,447
the list of links and the ThemeSwitch.

67
00:02:30,294 --> 00:02:32,117
So to display the button on the right

68
00:02:32,994 --> 00:02:35,288
we could style the "nav" element

69
00:02:35,288 --> 00:02:36,363
to use flexbox.

70
00:02:36,363 --> 00:02:38,154
And this makes the button

71
00:02:38,154 --> 00:02:40,878
show up on the same line as the links,

72
00:02:40,878 --> 00:02:43,888
because the default flow direction is row.

73
00:02:44,674 --> 00:02:46,886
Now we could use "justify-content"

74
00:02:46,886 --> 00:02:49,422
to arrange the children of this element

75
00:02:49,987 --> 00:02:52,395
and if we set this to "space-between"

76
00:02:53,787 --> 00:02:55,305
then it puts all the space

77
00:02:55,305 --> 00:02:57,172
between the list and the button,

78
00:02:57,730 --> 00:02:59,736
so the button ends up on the right.

79
00:03:00,236 --> 00:03:02,944
Now, let's go and style the button itself.

80
00:03:03,444 --> 00:03:05,150
I'll add a fragment around here

81
00:03:05,844 --> 00:03:08,620
so it's easier to insert a "style" element.

82
00:03:09,844 --> 00:03:12,218
And we'll use "styled-jsx" for this

83
00:03:12,218 --> 00:03:14,659
like we did in the NavBar component.

84
00:03:15,227 --> 00:03:17,283
Let's add some rules for the "button".

85
00:03:17,783 --> 00:03:20,809
We want to remove the default "background",

86
00:03:20,809 --> 00:03:22,358
and also the "border".

87
00:03:23,616 --> 00:03:24,674
So that's better.

88
00:03:24,674 --> 00:03:27,227
But if we move the mouse over the button,

89
00:03:27,227 --> 00:03:28,846
there's nothing suggesting

90
00:03:28,846 --> 00:03:30,715
that it's a clickable element.

91
00:03:31,402 --> 00:03:33,635
So let's set the "cursor" style

92
00:03:33,635 --> 00:03:34,571
to "pointer".

93
00:03:35,902 --> 00:03:37,796
And now at least it should show

94
00:03:37,796 --> 00:03:39,384
the pointer on mouse over.

95
00:03:39,946 --> 00:03:42,076
Ok. There's a lot more we could do

96
00:03:42,076 --> 00:03:43,267
in terms of styling

97
00:03:43,267 --> 00:03:45,209
to make this button look nicer,

98
00:03:45,209 --> 00:03:47,779
but I'll keep it simple for this example.

99
00:03:48,467 --> 00:03:50,341
What I want to do now instead

100
00:03:50,341 --> 00:03:52,280
is focus on the functionality.

101
00:03:52,845 --> 00:03:55,786
To be able to switch "darkMode" on and off,

102
00:03:55,786 --> 00:03:58,591
we'll need a variable to keep that state,

103
00:03:59,160 --> 00:04:01,695
and then we could change the button "text"

104
00:04:01,695 --> 00:04:04,230
depending on the current "darkMode" value.

105
00:04:04,791 --> 00:04:07,377
If "darkMode" is true then the button

106
00:04:07,377 --> 00:04:09,334
will switch to "Light Mode",

107
00:04:09,904 --> 00:04:11,880
while if "darkMode" is false

108
00:04:11,880 --> 00:04:13,575
then clicking the button

109
00:04:13,575 --> 00:04:15,410
should enable "Dark Mode".

110
00:04:16,052 --> 00:04:17,899
So that's the "text" we want to

111
00:04:17,899 --> 00:04:19,567
display inside the "button".

112
00:04:21,918 --> 00:04:23,773
And let's go and log the value

113
00:04:23,773 --> 00:04:26,001
of that "darkMode" variable as well,

114
00:04:28,251 --> 00:04:29,987
because this will help us understand

115
00:04:29,987 --> 00:04:30,759
what's going on.

116
00:04:32,084 --> 00:04:34,492
At the moment "darkMode" is set to "false",

117
00:04:34,992 --> 00:04:37,065
so the button says "Dark Mode".

118
00:04:37,565 --> 00:04:39,638
But if we change that variable to "true",

119
00:04:41,565 --> 00:04:43,888
then the button says "Light Mode".

120
00:04:44,388 --> 00:04:47,182
Now, we want to change the value of this variable

121
00:04:47,182 --> 00:04:49,177
when the user clicks on the button.

122
00:04:49,735 --> 00:04:51,103
To do that we can use

123
00:04:51,103 --> 00:04:52,796
the React "useState" hook,

124
00:04:53,935 --> 00:04:55,841
that we need to import of course.

125
00:04:56,341 --> 00:04:58,915
We can pass "false" as the initial value.

126
00:04:59,415 --> 00:05:01,707
And "useState" returns an array,

127
00:05:01,707 --> 00:05:03,784
where our "darkMode" variable

128
00:05:03,784 --> 00:05:05,288
is the first element,

129
00:05:05,932 --> 00:05:08,799
while the second element is a function

130
00:05:08,799 --> 00:05:11,517
that we can use to change the value,

131
00:05:11,517 --> 00:05:12,800
so "setDarkMode".

132
00:05:13,451 --> 00:05:14,972
Now, if we save at this point,

133
00:05:16,284 --> 00:05:18,121
"darkMode" will be set to "false",

134
00:05:18,121 --> 00:05:20,174
as you can see in the browser console.

135
00:05:20,729 --> 00:05:22,087
But now we can add an

136
00:05:22,087 --> 00:05:24,609
"onClick" event handler for the button,

137
00:05:26,095 --> 00:05:27,432
that will be a function

138
00:05:27,432 --> 00:05:29,061
where we call "setDarkMode",

139
00:05:29,995 --> 00:05:33,210
and simply invert the value of "darkMode".

140
00:05:33,210 --> 00:05:35,277
So if "darkMode" is "false"

141
00:05:35,277 --> 00:05:38,263
we'll set it to "true", and vice versa.

142
00:05:38,917 --> 00:05:39,987
Let's see if this works.

143
00:05:40,487 --> 00:05:42,995
We know that "darkMode" is initially false.

144
00:05:43,495 --> 00:05:45,332
Now, if we click the button,

145
00:05:45,332 --> 00:05:47,629
you can see in the Console messages

146
00:05:47,629 --> 00:05:49,663
that "darkMode" becomes "true",

147
00:05:49,663 --> 00:05:51,566
and therefore the button text

148
00:05:51,566 --> 00:05:53,141
changes to "Light Mode".

149
00:05:53,903 --> 00:05:55,414
And if we click again,

150
00:05:55,414 --> 00:05:57,679
of course "darkMode" turns false,

151
00:05:57,679 --> 00:06:00,150
and the text says "Dark Mode" again,

152
00:06:00,788 --> 00:06:01,341
and so on.

153
00:06:02,420 --> 00:06:05,007
It's basically a simple toggle button

154
00:06:05,007 --> 00:06:06,964
with an "on" or "off" state.

155
00:06:07,533 --> 00:06:08,993
What it doesn't yet is

156
00:06:08,993 --> 00:06:11,515
actually change the style of our page.

157
00:06:11,515 --> 00:06:14,302
We'll take care of that in the next video.