Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,190 --> 00:00:03,023
Now that we got
2
00:00:03,023 --> 00:00:05,700
our first basic pages in place
3
00:00:05,700 --> 00:00:08,660
before we add more route features,
4
00:00:08,660 --> 00:00:11,400
let's add some data, some dummy data
5
00:00:11,400 --> 00:00:13,120
which we can output for now
6
00:00:13,120 --> 00:00:14,260
and I'll start
7
00:00:14,260 --> 00:00:17,150
in the all quotes page.
8
00:00:17,150 --> 00:00:20,290
In there I wanna output a list of quotes
9
00:00:20,290 --> 00:00:21,800
and a little bit later
10
00:00:21,800 --> 00:00:22,760
in this section,
11
00:00:22,760 --> 00:00:24,810
we're going to fetch those quotes
12
00:00:24,810 --> 00:00:25,960
from a server
13
00:00:25,960 --> 00:00:27,199
for the moment let's work with
14
00:00:27,199 --> 00:00:29,360
some dummy quotes here,
15
00:00:29,360 --> 00:00:30,330
some dummy data
16
00:00:30,330 --> 00:00:31,650
which I just defined here
17
00:00:31,650 --> 00:00:33,460
in a constant.
18
00:00:33,460 --> 00:00:35,350
It should be an array of quotes
19
00:00:35,350 --> 00:00:37,370
and every quote should be an object
20
00:00:37,370 --> 00:00:38,800
with an ID.
21
00:00:38,800 --> 00:00:41,500
Any ID you want like Q1.
22
00:00:41,500 --> 00:00:42,890
Then we also want to have
23
00:00:42,890 --> 00:00:44,730
an author field
24
00:00:44,730 --> 00:00:46,690
and here I'll just use my name
25
00:00:46,690 --> 00:00:49,170
and a text field with,
26
00:00:49,170 --> 00:00:51,550
well the actual text of the quote,
27
00:00:51,550 --> 00:00:55,280
for example, learning React is fun
28
00:00:55,280 --> 00:00:58,700
and then I'll copy that
29
00:00:58,700 --> 00:01:00,010
and create the number code
30
00:01:00,010 --> 00:01:01,780
with a different ID
31
00:01:01,780 --> 00:01:03,130
and a different author,
32
00:01:03,130 --> 00:01:05,800
because that's me with my full name
33
00:01:08,150 --> 00:01:09,220
and the quote is,
34
00:01:09,220 --> 00:01:11,010
learning React is great.
35
00:01:11,010 --> 00:01:13,800
Now that's just some dummy data here.
36
00:01:13,800 --> 00:01:16,120
Now the goal is to output that data
37
00:01:16,120 --> 00:01:17,950
and that starting project,
38
00:01:17,950 --> 00:01:19,760
which I've provided to you
39
00:01:19,760 --> 00:01:22,670
does have a quote list component.
40
00:01:22,670 --> 00:01:24,133
This quote list component
41
00:01:24,133 --> 00:01:25,860
in the end just renders
42
00:01:25,860 --> 00:01:27,430
an unordered list here
43
00:01:27,430 --> 00:01:28,950
and that unordered list
44
00:01:28,950 --> 00:01:31,050
renders a bunch of quote items
45
00:01:31,050 --> 00:01:33,543
and a quote item looks like this.
46
00:01:34,860 --> 00:01:36,550
Now they offer in all quotes.
47
00:01:36,550 --> 00:01:39,200
I wanna output that quote list
48
00:01:39,200 --> 00:01:40,690
and hence we should first of all
49
00:01:40,690 --> 00:01:42,930
import this quote list component
50
00:01:42,930 --> 00:01:45,350
from going up one level,
51
00:01:45,350 --> 00:01:46,830
diving into components,
52
00:01:46,830 --> 00:01:49,790
quotes, quote list
53
00:01:49,790 --> 00:01:53,100
and then here in all quotes,
54
00:01:53,100 --> 00:01:55,070
instead of returning this H one tag,
55
00:01:55,070 --> 00:01:56,960
I'll return quote list
56
00:01:57,910 --> 00:02:00,100
and now this quote list component
57
00:02:00,100 --> 00:02:02,510
in the end wants a quotes prop,
58
00:02:02,510 --> 00:02:05,040
because I'm accessing that quotes prop
59
00:02:05,040 --> 00:02:06,460
inside of quote list
60
00:02:06,460 --> 00:02:08,360
and hence here I'll set
61
00:02:08,360 --> 00:02:11,913
quotes equal to my dummy quotes here.
62
00:02:13,550 --> 00:02:16,220
If I do that and save this,
63
00:02:16,220 --> 00:02:18,690
then on the all quotes page
64
00:02:18,690 --> 00:02:21,250
we should see these two quotes
65
00:02:21,250 --> 00:02:22,990
and we have these quote items
66
00:02:22,990 --> 00:02:24,120
with these buttons,
67
00:02:24,120 --> 00:02:26,250
which at the moment don't do anything.
68
00:02:26,250 --> 00:02:29,180
If we click them, nothing happens
69
00:02:29,180 --> 00:02:31,480
but that is a first step.
70
00:02:31,480 --> 00:02:33,050
Now, if I do click
71
00:02:33,050 --> 00:02:34,570
such a item link here,
72
00:02:34,570 --> 00:02:37,340
if I do click view full screen,
73
00:02:37,340 --> 00:02:38,620
I of course wanna load
74
00:02:38,620 --> 00:02:42,130
the quote detail page for that quote
75
00:02:42,130 --> 00:02:43,090
and we'll implement that
76
00:02:43,090 --> 00:02:44,830
in the next step
77
00:02:44,830 --> 00:02:46,050
before we do that
78
00:02:46,050 --> 00:02:47,470
let's go to add a quote
79
00:02:47,470 --> 00:02:49,600
and also work on this page.
80
00:02:49,600 --> 00:02:53,060
This page should display a form,
81
00:02:53,060 --> 00:02:54,360
a form which allows us
82
00:02:54,360 --> 00:02:56,820
to add a new quote later
83
00:02:56,820 --> 00:02:58,502
and for this I did prepare
84
00:02:58,502 --> 00:03:00,500
this quote form component
85
00:03:00,500 --> 00:03:02,480
in the components folder.
86
00:03:02,480 --> 00:03:03,480
It is a component
87
00:03:03,480 --> 00:03:05,212
which renders a form
88
00:03:05,212 --> 00:03:08,130
and which also then has this
89
00:03:08,130 --> 00:03:10,260
submit form handler function
90
00:03:10,260 --> 00:03:11,790
which doesn't do anything
91
00:03:11,790 --> 00:03:15,040
except for trigger a function
92
00:03:15,040 --> 00:03:16,260
which it expects to get
93
00:03:16,260 --> 00:03:18,380
on the on add quote prop
94
00:03:18,380 --> 00:03:19,720
to which it then passes
95
00:03:19,720 --> 00:03:21,290
this entered data.
96
00:03:21,290 --> 00:03:22,670
So in the component
97
00:03:22,670 --> 00:03:24,406
where we use quote form
98
00:03:24,406 --> 00:03:26,340
we wanna pass a function
99
00:03:26,340 --> 00:03:28,044
to the quote form component
100
00:03:28,044 --> 00:03:30,140
on that on ad quote prop,
101
00:03:30,140 --> 00:03:32,230
which expects this data
102
00:03:32,230 --> 00:03:34,920
hence here in the new quote page
103
00:03:34,920 --> 00:03:38,030
we wanna use that quote form component.
104
00:03:38,030 --> 00:03:40,380
So we can import quote form
105
00:03:40,380 --> 00:03:45,380
from components, quotes, quote form
106
00:03:45,730 --> 00:03:48,220
and then output this year instead,
107
00:03:48,220 --> 00:03:49,510
the quote form
108
00:03:49,510 --> 00:03:51,540
and now here, we need to pass this
109
00:03:51,540 --> 00:03:53,280
on add quote prop
110
00:03:53,280 --> 00:03:54,930
which I just talked about
111
00:03:54,930 --> 00:03:55,860
which we expect
112
00:03:55,860 --> 00:03:57,880
instead of the quote form component
113
00:03:57,880 --> 00:03:58,870
and as a value,
114
00:03:58,870 --> 00:04:00,690
we wanna pass a function,
115
00:04:00,690 --> 00:04:01,540
a function which
116
00:04:01,540 --> 00:04:04,240
expects this quote data.
117
00:04:04,240 --> 00:04:05,073
So here in the
118
00:04:05,073 --> 00:04:07,080
new quote page component
119
00:04:07,080 --> 00:04:09,010
I'll add a new function,
120
00:04:09,010 --> 00:04:11,470
the add quote handler function
121
00:04:11,470 --> 00:04:13,780
for example, where I expect
122
00:04:13,780 --> 00:04:16,370
to get some quotes data
123
00:04:16,370 --> 00:04:17,420
and where we then later
124
00:04:17,420 --> 00:04:19,170
we'll sent this to a server
125
00:04:19,170 --> 00:04:20,019
for the moment
126
00:04:20,019 --> 00:04:21,480
I'll just console lock
127
00:04:21,480 --> 00:04:24,020
the quote data here
128
00:04:24,020 --> 00:04:26,000
and then it's this function,
129
00:04:26,000 --> 00:04:28,170
a pointer at this function
130
00:04:28,170 --> 00:04:29,883
which we passed to quote form.
131
00:04:31,380 --> 00:04:33,400
With that if we save this
132
00:04:33,400 --> 00:04:34,750
we have this form here
133
00:04:34,750 --> 00:04:37,230
on this new quote page.
134
00:04:37,230 --> 00:04:38,810
So as that this page
135
00:04:38,810 --> 00:04:40,210
and this demo project
136
00:04:40,210 --> 00:04:42,570
is slowly taking shape.
137
00:04:42,570 --> 00:04:43,768
Now let's make sure
138
00:04:43,768 --> 00:04:46,600
that clicking on the view full screen.
139
00:04:46,600 --> 00:04:48,540
So on such a quote item
140
00:04:48,540 --> 00:04:49,580
on this link here,
141
00:04:49,580 --> 00:04:50,922
that clicking on this link
142
00:04:50,922 --> 00:04:54,230
actually loads this quote detail page
143
00:04:54,230 --> 00:04:55,750
and definitely try
144
00:04:55,750 --> 00:04:57,550
implementing this on your own.
145
00:04:57,550 --> 00:04:59,800
Try implementing a link here
146
00:04:59,800 --> 00:05:01,263
which loads the detail page
147
00:05:01,263 --> 00:05:03,820
for the different quotes.
148
00:05:03,820 --> 00:05:05,170
So which respects
149
00:05:05,170 --> 00:05:08,240
the different quote IDs in the URL.
150
00:05:08,240 --> 00:05:10,020
We're going to implement this together
151
00:05:10,020 --> 00:05:12,170
and finish this quote detail page
152
00:05:12,170 --> 00:05:13,930
at least the first draft
153
00:05:13,930 --> 00:05:15,023
in the next lecture.
9921
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.