Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:04,680
So now we also execute server-side code
2
00:00:04,680 --> 00:00:08,270
in getStaticProps and I can't emphasize enough
3
00:00:08,270 --> 00:00:10,600
that this is a standard way of doing it.
4
00:00:10,600 --> 00:00:13,230
This code will not end up in the client-side bundle.
5
00:00:13,230 --> 00:00:15,560
Your credentials will not be exposed,
6
00:00:15,560 --> 00:00:17,870
the bundle will not be bloated.
7
00:00:17,870 --> 00:00:21,623
This code will execute when this page is pre-generated.
8
00:00:22,890 --> 00:00:26,200
Now, for the MeetupDetail page,
9
00:00:26,200 --> 00:00:29,970
we also want to fetch data from the database now
10
00:00:29,970 --> 00:00:33,120
for a specific meetup that was selected
11
00:00:33,120 --> 00:00:37,700
but also for determining which paths should be generated.
12
00:00:37,700 --> 00:00:40,540
So which meetup IDs should be supported
13
00:00:40,540 --> 00:00:41,627
because after all,
14
00:00:41,627 --> 00:00:44,940
we do only have a limited list of meetups
15
00:00:44,940 --> 00:00:47,140
with specific IDs here.
16
00:00:47,140 --> 00:00:49,560
So we wanna pre-generate all the paths
17
00:00:49,560 --> 00:00:51,803
for all those IDs which we have here.
18
00:00:52,660 --> 00:00:54,280
And therefore, we will again need
19
00:00:54,280 --> 00:00:56,680
to connect to MongoDB.
20
00:00:56,680 --> 00:00:58,690
So for this, from index.js,
21
00:00:58,690 --> 00:01:01,410
I will again copy this connection code
22
00:01:01,410 --> 00:01:03,610
and again, you could refactor therefore
23
00:01:03,610 --> 00:01:06,523
if you wanted to avoid duplication.
24
00:01:07,370 --> 00:01:11,320
And I will import MongoClient here
25
00:01:11,320 --> 00:01:15,560
from mongodb like this
26
00:01:15,560 --> 00:01:19,520
in the meetupId index.js file
27
00:01:19,520 --> 00:01:22,153
and then here we can start with getStaticPaths.
28
00:01:23,440 --> 00:01:26,530
In there, I wanna connect to my database
29
00:01:26,530 --> 00:01:28,480
and get access to the meetupsCollection
30
00:01:29,400 --> 00:01:33,670
and then now here I wanna get all the meetup data.
31
00:01:33,670 --> 00:01:36,150
So for this, I get my meetups
32
00:01:36,150 --> 00:01:41,080
by again awaiting meetupsCollection.find.
33
00:01:41,080 --> 00:01:43,790
Find gives me access to all the meetups.
34
00:01:44,710 --> 00:01:48,120
Now, actually here I'm only interested in the IDs
35
00:01:48,120 --> 00:01:50,290
and therefore we can tweak find
36
00:01:50,290 --> 00:01:53,340
and pass an empty object as a first argument.
37
00:01:53,340 --> 00:01:56,350
Here we could define our filter criteria
38
00:01:56,350 --> 00:01:59,020
if we wanna not find all documents
39
00:01:59,020 --> 00:02:02,210
but filter for certain field values.
40
00:02:02,210 --> 00:02:03,960
But I do wanna find all here.
41
00:02:03,960 --> 00:02:06,040
Hence we use a empty object,
42
00:02:06,040 --> 00:02:08,750
which means give me all the objects.
43
00:02:08,750 --> 00:02:11,039
I have no filter criteria
44
00:02:11,900 --> 00:02:14,370
but then we can pass a second argument
45
00:02:14,370 --> 00:02:18,010
where we can define which fields should be extracted
46
00:02:18,010 --> 00:02:19,790
for every document.
47
00:02:19,790 --> 00:02:23,030
And by default, all the fields will be returned.
48
00:02:23,030 --> 00:02:26,483
So all the field values, title, image and so on
49
00:02:26,483 --> 00:02:28,931
but if we're only interested in the ID,
50
00:02:28,931 --> 00:02:32,880
we can also add _id here
51
00:02:32,880 --> 00:02:34,560
and set this to one,
52
00:02:34,560 --> 00:02:37,330
which means only include the ID
53
00:02:37,330 --> 00:02:40,080
but no other field values.
54
00:02:40,080 --> 00:02:42,530
And with that, we're only fetching the IDs.
55
00:02:42,530 --> 00:02:44,530
So we fetch the document objects
56
00:02:44,530 --> 00:02:48,463
but they each will only contain the ID, nothing else.
57
00:02:49,600 --> 00:02:51,680
Now again, we should call toArray here
58
00:02:51,680 --> 00:02:55,440
to convert this to a JavaScript array of objects.
59
00:02:55,440 --> 00:02:57,570
And now we got our meetups here
60
00:02:57,570 --> 00:03:00,393
and now we can generate the paths dynamically.
61
00:03:01,260 --> 00:03:03,550
Instead of hard coding this array,
62
00:03:03,550 --> 00:03:05,760
we can use meetups here
63
00:03:05,760 --> 00:03:08,690
and then map every meetup item,
64
00:03:08,690 --> 00:03:11,150
which is a document with an id
65
00:03:11,150 --> 00:03:16,150
into an object, because paths should be an array of objects,
66
00:03:17,100 --> 00:03:20,030
where every object has this params key
67
00:03:20,030 --> 00:03:22,120
just as we have it down there.
68
00:03:22,120 --> 00:03:24,560
And then we have a nested object in there
69
00:03:24,560 --> 00:03:27,830
where we define our meetupId values.
70
00:03:27,830 --> 00:03:32,093
And the values for meetupId should now be our IDs here.
71
00:03:33,490 --> 00:03:36,280
So here we can then access meetup,
72
00:03:36,280 --> 00:03:40,485
so this parameter, which map gives us automatically,
73
00:03:40,485 --> 00:03:42,568
._id.toString, like that.
74
00:03:47,600 --> 00:03:49,823
And now get rid of this array here.
75
00:03:51,200 --> 00:03:56,090
With that, we're generating our array of paths dynamically.
76
00:03:56,090 --> 00:03:59,090
And as a result, if I now save this,
77
00:03:59,090 --> 00:04:00,630
if we reload the starting page,
78
00:04:00,630 --> 00:04:02,230
if we click on Show Details,
79
00:04:02,230 --> 00:04:05,650
we're taken to the page for this specific object,
80
00:04:05,650 --> 00:04:07,570
for this specific meetup.
81
00:04:07,570 --> 00:04:09,870
And you'll see this cryptic ID here,
82
00:04:09,870 --> 00:04:14,870
which is this autogenerated ID MongoDB generated for us.
83
00:04:15,670 --> 00:04:17,510
So that's working.
84
00:04:17,510 --> 00:04:21,149
But we're not yet fetching the data dynamically here.
85
00:04:21,149 --> 00:04:23,380
I wanna do that as well.
86
00:04:23,380 --> 00:04:24,420
For this, first of all,
87
00:04:24,420 --> 00:04:27,020
I'll close the connection here.
88
00:04:27,020 --> 00:04:30,200
It isn't a bad idea to do that once we're done
89
00:04:30,200 --> 00:04:32,250
and then I'll copy this code
90
00:04:32,250 --> 00:04:35,007
from getStaticPaths and add it here
91
00:04:36,530 --> 00:04:39,793
after we got the meetupId instead of logging the ID.
92
00:04:40,750 --> 00:04:43,730
I'll again connect and get access to the collection.
93
00:04:43,730 --> 00:04:45,830
Again, we could outsource this into a function
94
00:04:45,830 --> 00:04:47,690
if we wanted to.
95
00:04:47,690 --> 00:04:50,410
And then here, I want to get access to a single meetup,
96
00:04:50,410 --> 00:04:54,010
not to all the meetups, just a single meetup.
97
00:04:54,010 --> 00:04:56,730
So I want to get access to my selectedMeetup here
98
00:04:56,730 --> 00:04:59,760
and we do this by using the meetupsCollection
99
00:04:59,760 --> 00:05:02,543
and then using the the findOne method.
100
00:05:03,795 --> 00:05:07,530
findOne finds one single document.
101
00:05:07,530 --> 00:05:10,650
And to findOne, we need to pass an object
102
00:05:10,650 --> 00:05:13,010
where we define how to filter,
103
00:05:13,010 --> 00:05:16,080
how to search for that document.
104
00:05:16,080 --> 00:05:19,940
On this object, you can pass your field names,
105
00:05:19,940 --> 00:05:23,940
like title, image, address or description as keys
106
00:05:23,940 --> 00:05:27,400
and then the values for which you wanna search as values.
107
00:05:27,400 --> 00:05:31,160
So we could pass title: A First Meetup as a key-value pair
108
00:05:31,160 --> 00:05:33,730
into this object here
109
00:05:33,730 --> 00:05:38,363
to find this first meetup where the title is A First Meetup.
110
00:05:39,260 --> 00:05:41,270
Now, here we don't wanna search by title
111
00:05:41,270 --> 00:05:42,990
but instead by ID.
112
00:05:42,990 --> 00:05:45,390
So I wanna make sure that _id,
113
00:05:45,390 --> 00:05:49,310
the automatically added and generated ID field,
114
00:05:49,310 --> 00:05:54,210
has a value of meetupId, so this meetupId,
115
00:05:54,210 --> 00:05:56,793
which we extract from the params up there.
116
00:05:57,820 --> 00:06:00,540
This then finds us this single meetup.
117
00:06:00,540 --> 00:06:03,770
This returns a promise because it's an asynchronous task
118
00:06:03,770 --> 00:06:05,870
and hence we should await this
119
00:06:05,870 --> 00:06:09,600
and make sure that we added async in front of the function.
120
00:06:09,600 --> 00:06:12,810
Oops, and with that we got the selectedMeetup eventually.
121
00:06:14,165 --> 00:06:16,018
And now it's the selectedMeetup,
122
00:06:16,018 --> 00:06:19,768
which I return here as meetupData, like this.
123
00:06:22,890 --> 00:06:25,440
And then if we do that and save everything,
124
00:06:25,440 --> 00:06:28,230
if I reload this meetup here,
125
00:06:28,230 --> 00:06:29,780
it should load successfully
126
00:06:29,780 --> 00:06:31,950
and it should display all the data.
127
00:06:31,950 --> 00:06:34,770
Now, at the moment, the data I'm showing here, however,
128
00:06:34,770 --> 00:06:37,660
is still hard coded in the JSX code
129
00:06:37,660 --> 00:06:40,690
and now it's finally time to use our props data here.
130
00:06:40,690 --> 00:06:44,920
So the actual fetch data in the JSX code as well.
131
00:06:44,920 --> 00:06:47,220
For this, we're exposing the meetupData prop
132
00:06:47,220 --> 00:06:50,470
to the component and hence, here we should accept props
133
00:06:50,470 --> 00:06:52,707
and use that data here.
134
00:06:52,707 --> 00:06:57,350
So that for image, I'm passing in props.image
135
00:06:58,970 --> 00:07:03,970
and for the title, we pass in props.title and so on.
136
00:07:04,390 --> 00:07:05,660
Same for the address.
137
00:07:05,660 --> 00:07:08,570
That's props.address.
138
00:07:08,570 --> 00:07:11,633
And for description, it's props.description.
139
00:07:13,230 --> 00:07:16,723
And actually not props dot but props.meetupData dot
140
00:07:19,990 --> 00:07:22,750
because we have that meetupData prop,
141
00:07:22,750 --> 00:07:26,830
this prop which holds the meetup item, the meetup object.
142
00:07:26,830 --> 00:07:30,160
So we need to drill into that meetupData object first
143
00:07:30,160 --> 00:07:34,580
before we can access image, title, address and description.
144
00:07:34,580 --> 00:07:36,040
Now, once we did all of that,
145
00:07:36,040 --> 00:07:38,320
there's one other thing we need to do though,
146
00:07:38,320 --> 00:07:39,860
which I just noticed.
147
00:07:39,860 --> 00:07:42,580
Here for findOne, I'm looking for an id,
148
00:07:42,580 --> 00:07:44,890
which is equal to the id I'm getting out
149
00:07:44,890 --> 00:07:48,670
of my URL but that, of course, will be a string.
150
00:07:48,670 --> 00:07:51,160
Keep in mind that in MongoDB actually,
151
00:07:51,160 --> 00:07:55,410
our IDs are these strange object ID things.
152
00:07:55,410 --> 00:07:59,430
To ensure that we can correctly look for a specific ID,
153
00:07:59,430 --> 00:08:01,010
we need to convert it from string
154
00:08:01,010 --> 00:08:03,371
to such a object ID thing
155
00:08:03,371 --> 00:08:05,390
and for this, from MongoDB,
156
00:08:05,390 --> 00:08:09,160
you should import ObjectId like this
157
00:08:09,160 --> 00:08:12,180
with a lowercase D at the end.
158
00:08:12,180 --> 00:08:14,680
And wrap your string with that.
159
00:08:14,680 --> 00:08:19,140
So down here, wrap ObjectId around meetupId
160
00:08:19,140 --> 00:08:21,020
and this will convert this string
161
00:08:21,020 --> 00:08:23,840
into such a ObjectId object.
162
00:08:23,840 --> 00:08:25,334
And once that is done,
163
00:08:25,334 --> 00:08:28,020
we also wanna go to selectedMeetup
164
00:08:28,020 --> 00:08:31,940
and make sure that there we convert this id,
165
00:08:31,940 --> 00:08:35,230
this _id field back to a string
166
00:08:35,230 --> 00:08:38,450
because otherwise, we'll get that serialization error
167
00:08:38,450 --> 00:08:39,673
we saw before.
168
00:08:40,539 --> 00:08:44,030
So for this, I'll set meetupData actually to an object
169
00:08:44,030 --> 00:08:46,360
where I do add an id field,
170
00:08:46,360 --> 00:08:48,610
which is equal to selectedMeetup._id.toString
171
00:08:52,080 --> 00:08:53,980
and where I then add all the other data,
172
00:08:53,980 --> 00:08:56,500
like selectedMeetup.title,
173
00:08:56,500 --> 00:09:00,700
then the address, which is selectedMeetup.address.
174
00:09:00,700 --> 00:09:04,250
Then the image, which is selectedMeetup.image
175
00:09:04,250 --> 00:09:06,530
and then also last but not least,
176
00:09:06,530 --> 00:09:09,463
the description, which is selectedMeetup.description.
177
00:09:12,491 --> 00:09:15,250
And with all that done, if we now save this,
178
00:09:15,250 --> 00:09:17,420
if you reload a single meetup page,
179
00:09:17,420 --> 00:09:20,950
you see the data for that single meetup.
180
00:09:20,950 --> 00:09:24,160
And that works for all the meetups now.
181
00:09:24,160 --> 00:09:26,980
And now these meetup detail pages
182
00:09:26,980 --> 00:09:30,710
are pre-rendered on the server dynamically
183
00:09:30,710 --> 00:09:33,670
with our code being active
184
00:09:33,670 --> 00:09:37,630
and with our code establishing that database connection
185
00:09:37,630 --> 00:09:39,713
and fetching the data from there.
14432
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.