- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.510 --> 00:00:04.320
So now that we have a PortfolioDetail Component,
2
00:00:04.320 --> 00:00:05.290
in this guide,
3
00:00:05.290 --> 00:00:07.640
we're gonna see how we can grab
4
00:00:07.640 --> 00:00:09.490
that id from the URL
5
00:00:09.490 --> 00:00:11.460
and how we can use that
6
00:00:11.460 --> 00:00:15.210
to go and retrieve the data on the server.
7
00:00:15.210 --> 00:00:17.070
So let's get started.
8
00:00:17.070 --> 00:00:20.150
In the PortfolioDetail Component here,
9
00:00:20.150 --> 00:00:23.340
we are going to bring in a Hook.
10
00:00:23.340 --> 00:00:26.000
So I'm going to come up here
11
00:00:26.000 --> 00:00:27.080
and let me actually get rid
12
00:00:27.080 --> 00:00:29.390
of where it says PortfolioDetail
13
00:00:29.390 --> 00:00:31.410
and this data,
14
00:00:31.410 --> 00:00:33.200
and instead,
15
00:00:33.200 --> 00:00:34.120
let's come up
16
00:00:34.120 --> 00:00:35.910
and let's go and say,
17
00:00:35.910 --> 00:00:38.550
we wanna have the useEffect Hook,
18
00:00:38.550 --> 00:00:39.383
so I'm gonna say,
19
00:00:39.383 --> 00:00:40.757
"React,useEffect"
20
00:00:42.927 --> 00:00:43.760
Just like this,
21
00:00:43.760 --> 00:00:46.300
and now for this useEffect Hook,
22
00:00:46.300 --> 00:00:47.340
what I'd like to do is,
23
00:00:47.340 --> 00:00:49.800
I'd like to make an API call.
24
00:00:49.800 --> 00:00:53.130
And so anytime this component loads up,
25
00:00:53.130 --> 00:00:54.840
I want it to make a call
26
00:00:54.840 --> 00:00:57.390
and go and retrieve the data
27
00:00:57.390 --> 00:01:00.417
for that specific PortfolioItem.
28
00:01:00.417 --> 00:01:02.600
So how would we go about that?
29
00:01:02.600 --> 00:01:04.810
Well, we know we're gonna have to use Axios.
30
00:01:04.810 --> 00:01:09.810
So if you open up say your portfolio list component,
31
00:01:10.090 --> 00:01:11.560
right here, you can see,
32
00:01:11.560 --> 00:01:14.090
we can kind of follow this same pattern.
33
00:01:14.090 --> 00:01:16.380
So for portfolio items list,
34
00:01:16.380 --> 00:01:18.980
we declared an API URL
35
00:01:18.980 --> 00:01:20.540
and then from there
36
00:01:20.540 --> 00:01:24.250
we have this getPortfolioItems function.
37
00:01:24.250 --> 00:01:28.183
And then when we have the useEffect call is triggered,
38
00:01:28.183 --> 00:01:30.510
then it calls this function.
39
00:01:30.510 --> 00:01:33.990
Now we're going to do something very similar to this,
40
00:01:33.990 --> 00:01:38.570
except we are also gonna make it a little more specific.
41
00:01:38.570 --> 00:01:40.060
And the reason for that
42
00:01:40.060 --> 00:01:43.860
is because with this getPortfolioItems function,
43
00:01:43.860 --> 00:01:47.700
we were able to simply hard-code a URL in there,
44
00:01:47.700 --> 00:01:49.950
and the URL is not gonna change.
45
00:01:49.950 --> 00:01:51.090
In our case,
46
00:01:51.090 --> 00:01:52.840
it's gonna be a little bit different
47
00:01:52.840 --> 00:01:55.700
because that URL is gonna have to change
48
00:01:55.700 --> 00:01:58.550
because it's going to be different for each id.
49
00:01:58.550 --> 00:02:01.070
So let's see how we can make this work.
50
00:02:01.070 --> 00:02:02.390
Well, first and foremost,
51
00:02:02.390 --> 00:02:04.060
let's construct
52
00:02:04.060 --> 00:02:07.060
the basic format for the URL.
53
00:02:07.060 --> 00:02:09.630
And I'm gonna copy this string right here
54
00:02:09.630 --> 00:02:11.610
from portfolio items list,
55
00:02:11.610 --> 00:02:12.710
because you're gonna see
56
00:02:12.710 --> 00:02:14.270
it's gonna be very similar.
57
00:02:14.270 --> 00:02:16.690
And I'm gonna just put it above here
58
00:02:16.690 --> 00:02:18.850
just as a comment for right now.
59
00:02:18.850 --> 00:02:22.160
So everything in the beginning is gonna be the same.
60
00:02:22.160 --> 00:02:25.680
It's gonna be https://
61
00:02:25.680 --> 00:02:29.470
and then this is gonna be the name of your subdomain.
62
00:02:29.470 --> 00:02:31.520
So whatever your subdomain is
63
00:02:31.520 --> 00:02:32.820
on DevCamp Space,
64
00:02:32.820 --> 00:02:34.260
that's what you're gonna use here.
65
00:02:34.260 --> 00:02:35.464
Mine's react portfolio,
66
00:02:35.464 --> 00:02:37.697
and then we're gonna have
67
00:02:37.697 --> 00:02:42.313
.devcamp.space/portfolio/portfolioitems.
68
00:02:43.380 --> 00:02:45.840
So everything here is exactly the same.
69
00:02:45.840 --> 00:02:47.630
Now the difference is gonna be,
70
00:02:47.630 --> 00:02:50.220
we're going to add another slash here,
71
00:02:50.220 --> 00:02:54.090
and then this is gonna be whatever that id is.
72
00:02:54.090 --> 00:02:56.680
So we can actually test this out.
73
00:02:56.680 --> 00:02:59.710
You can't always do this with API calls,
74
00:02:59.710 --> 00:03:01.280
but in our case,
75
00:03:01.280 --> 00:03:04.130
we're not securing this API call
76
00:03:04.130 --> 00:03:07.330
with some type of security token
77
00:03:07.330 --> 00:03:08.270
or anything like that.
78
00:03:08.270 --> 00:03:09.103
We don't need it.
79
00:03:09.103 --> 00:03:12.150
This is perfectly fine to be publicly available.
80
00:03:12.150 --> 00:03:13.770
And so we can actually go
81
00:03:13.770 --> 00:03:15.470
and open this one up
82
00:03:15.470 --> 00:03:17.460
in a browser.
83
00:03:17.460 --> 00:03:20.400
So we can open up Google Chrome here,
84
00:03:20.400 --> 00:03:23.250
let's grab the CronDose id.
85
00:03:23.250 --> 00:03:25.260
So this CronDose id is 1 7 5 4 4.
86
00:03:27.550 --> 00:03:31.574
So I can open up a new browser here and say,
87
00:03:31.574 --> 00:03:34.830
portfolioitems/
88
00:03:34.830 --> 00:03:37.890
and then 1 7 5 4 4
89
00:03:37.890 --> 00:03:38.920
Hit return.
90
00:03:38.920 --> 00:03:39.830
And then you can see,
91
00:03:39.830 --> 00:03:41.920
this is getting us all of that data.
92
00:03:41.920 --> 00:03:43.680
So this is the data coming in
93
00:03:43.680 --> 00:03:44.750
from the API.
94
00:03:44.750 --> 00:03:48.920
So we know that this URL structure is working.
95
00:03:48.920 --> 00:03:51.900
Now let's come back to Visual Studio Code
96
00:03:51.900 --> 00:03:53.560
and see what we're going to have to do.
97
00:03:53.560 --> 00:03:55.770
So we know we're going to have this structure
98
00:03:55.770 --> 00:03:57.350
and then we need an id.
99
00:03:57.350 --> 00:03:59.750
So how can we build that out?
100
00:03:59.750 --> 00:04:03.030
Well, let's start by first importing Axios.
101
00:04:03.030 --> 00:04:03.863
So I'm gonna say,
102
00:04:03.863 --> 00:04:05.630
"import Axios
103
00:04:05.630 --> 00:04:07.720
from Axios."
104
00:04:07.720 --> 00:04:08.620
And then,
105
00:04:08.620 --> 00:04:09.453
inside of here,
106
00:04:09.453 --> 00:04:11.010
let's construct a function.
107
00:04:11.010 --> 00:04:15.197
So I'm gonna say, const getPortfolioItem."
108
00:04:16.210 --> 00:04:17.100
I'm going to have
109
00:04:17.100 --> 00:04:19.330
this now accept an argument.
110
00:04:19.330 --> 00:04:20.700
So this is very important.
111
00:04:20.700 --> 00:04:24.012
So getPortfolioItem is gonna have an id
112
00:04:24.012 --> 00:04:26.190
as a argument,
113
00:04:26.190 --> 00:04:29.340
and then it's gonna be a factorial function.
114
00:04:29.340 --> 00:04:30.930
And now inside of it,
115
00:04:30.930 --> 00:04:35.930
let's call Axios.get cause this is gonna be a get request.
116
00:04:36.010 --> 00:04:37.500
And then now,
117
00:04:37.500 --> 00:04:39.330
we're gonna use that URL.
118
00:04:39.330 --> 00:04:41.439
So let's use backticks
119
00:04:41.439 --> 00:04:44.600
and then we can paste in everything
120
00:04:44.600 --> 00:04:46.370
that we have right here.
121
00:04:46.370 --> 00:04:48.590
So I'm gonna copy all of this
122
00:04:48.590 --> 00:04:51.130
and I'm gonna paste it directly inside
123
00:04:51.130 --> 00:04:52.070
of the backticks.
124
00:04:52.070 --> 00:04:53.860
But now where I said id,
125
00:04:53.860 --> 00:04:55.410
I use that as a placeholder,
126
00:04:55.410 --> 00:04:57.384
I want to say /
127
00:04:57.384 --> 00:04:58.676
$
128
00:04:58.676 --> 00:04:59.509
{
129
00:04:59.509 --> 00:05:00.910
and id.
130
00:05:00.910 --> 00:05:02.900
So this id,
131
00:05:02.900 --> 00:05:05.580
is mapped to this argument right here.
132
00:05:05.580 --> 00:05:07.120
So when we call
133
00:05:07.120 --> 00:05:09.020
the getPortfolioItem function,
134
00:05:09.020 --> 00:05:10.550
we pass it in id,
135
00:05:10.550 --> 00:05:12.730
it's gonna slide right in here.
136
00:05:12.730 --> 00:05:15.230
That's how we're gonna have that dynamic function.
137
00:05:15.230 --> 00:05:16.540
And then from there,
138
00:05:16.540 --> 00:05:18.574
we're simply gonna say
139
00:05:18.574 --> 00:05:19.715
.then
140
00:05:19.715 --> 00:05:23.830
and then we're looking for the response.
141
00:05:23.830 --> 00:05:25.380
And you don't have to follow along
142
00:05:25.380 --> 00:05:26.720
as I'm typing right now,
143
00:05:26.720 --> 00:05:28.980
I'm gonna preformat it nicely
144
00:05:28.980 --> 00:05:30.590
and then you can hit pause
145
00:05:30.590 --> 00:05:32.460
and you can type it out.
146
00:05:32.460 --> 00:05:34.440
For right now let's just console.log this.
147
00:05:34.440 --> 00:05:35.930
So I'm gonna say console.log.
148
00:05:35.930 --> 00:05:39.590
This is going to be the portfolio item.
149
00:05:39.590 --> 00:05:42.640
Let's get response.data
150
00:05:42.640 --> 00:05:45.140
and then let's also look for any errors.
151
00:05:45.140 --> 00:05:48.410
So I'm going to say,"catch any errors."
152
00:05:48.410 --> 00:05:51.823
And then let's print out the errors.
153
00:05:53.593 --> 00:05:55.570
So errors and just print that out.
154
00:05:55.570 --> 00:05:56.403
Okay.
155
00:05:56.403 --> 00:05:57.236
I'll hit save
156
00:05:57.236 --> 00:05:58.530
and you can follow along.
157
00:05:58.530 --> 00:05:59.580
You can either hit pause
158
00:05:59.580 --> 00:06:01.020
or you can also just grab this
159
00:06:01.020 --> 00:06:02.210
from the show notes.
160
00:06:02.210 --> 00:06:04.450
The main thing I want you to understand here
161
00:06:04.450 --> 00:06:07.330
are exactly what we're creating.
162
00:06:07.330 --> 00:06:08.600
So right here,
163
00:06:08.600 --> 00:06:10.560
we have Axios.get
164
00:06:10.560 --> 00:06:13.010
We're passing get the URL.
165
00:06:13.010 --> 00:06:15.403
And then we're saying .then
166
00:06:15.403 --> 00:06:17.180
because this is a promise.
167
00:06:17.180 --> 00:06:20.410
So we're saying after you get some data back,
168
00:06:20.410 --> 00:06:22.040
so you've called the API,
169
00:06:22.040 --> 00:06:23.600
after you get that data back,
170
00:06:23.600 --> 00:06:26.190
we simply want to grab the response
171
00:06:26.190 --> 00:06:27.530
that you got back.
172
00:06:27.530 --> 00:06:28.363
And for right now,
173
00:06:28.363 --> 00:06:29.660
I just want you to print it out.
174
00:06:29.660 --> 00:06:31.190
If there are any server errors,
175
00:06:31.190 --> 00:06:32.590
I want you to catch those errors.
176
00:06:32.590 --> 00:06:34.950
And I want you to print out those errors.
177
00:06:34.950 --> 00:06:37.630
Now, a little refactor we could do right here
178
00:06:37.630 --> 00:06:40.980
is I don't really like having an argument
179
00:06:40.980 --> 00:06:42.380
that is quite this long.
180
00:06:42.380 --> 00:06:44.960
So what I can do is I can streamline this
181
00:06:44.960 --> 00:06:46.090
and create a variable.
182
00:06:46.090 --> 00:06:47.280
So I could say const
183
00:06:48.518 --> 00:06:49.726
and then
184
00:06:49.726 --> 00:06:50.559
API_URL.
185
00:06:51.520 --> 00:06:53.768
And I can put all of this
186
00:06:53.768 --> 00:06:56.520
inside of that variable.
187
00:06:56.520 --> 00:06:58.670
I can assign it just like this.
188
00:06:58.670 --> 00:07:01.521
And now what I can do with Axios get
189
00:07:01.521 --> 00:07:03.450
is I can pass in
190
00:07:03.450 --> 00:07:04.283
that value.
191
00:07:04.283 --> 00:07:05.650
So I can pass in
192
00:07:05.650 --> 00:07:08.270
the name of that variable,
193
00:07:08.270 --> 00:07:09.330
just like this.
194
00:07:09.330 --> 00:07:11.050
So I liked the way
195
00:07:11.050 --> 00:07:12.910
that's structured a little bit more.
196
00:07:12.910 --> 00:07:13.743
Okay.
197
00:07:13.743 --> 00:07:15.160
So right now,
198
00:07:15.160 --> 00:07:17.350
this is gonna do
199
00:07:17.350 --> 00:07:18.490
what we need it to do,
200
00:07:18.490 --> 00:07:20.470
except we're not calling it yet.
201
00:07:20.470 --> 00:07:22.711
Right now getPortfolioItem
202
00:07:22.711 --> 00:07:23.850
is simply been defined,
203
00:07:23.850 --> 00:07:25.360
but we haven't declared it yet.
204
00:07:25.360 --> 00:07:26.910
We haven't called it anywhere.
205
00:07:26.910 --> 00:07:29.780
That is where useEffect Hook is gonna be.
206
00:07:29.780 --> 00:07:31.560
So I'm going to get rid of this comment
207
00:07:31.560 --> 00:07:33.870
and get rid of this console.log statement.
208
00:07:33.870 --> 00:07:37.040
Now I'm gonna say useEffect,
209
00:07:37.040 --> 00:07:39.300
and then we're going to follow the same pattern
210
00:07:39.300 --> 00:07:40.600
in the same syntax
211
00:07:40.600 --> 00:07:41.500
that we used here.
212
00:07:41.500 --> 00:07:42.810
So it's useEffect.
213
00:07:42.810 --> 00:07:45.390
The first argument is this anonymous function.
214
00:07:45.390 --> 00:07:48.400
Second argument are these brackets.
215
00:07:48.400 --> 00:07:50.600
So let's follow the same pattern here,
216
00:07:50.600 --> 00:07:53.350
first arguments and anonymous function.
217
00:07:53.350 --> 00:07:54.183
And then,
218
00:07:54.183 --> 00:07:55.490
inside of here,
219
00:07:55.490 --> 00:07:58.030
we're gonna call getPortfolioItem,
220
00:07:58.030 --> 00:08:00.010
and then we're gonna pass in
221
00:08:00.010 --> 00:08:01.050
that data.
222
00:08:01.050 --> 00:08:02.320
So if you remember back
223
00:08:02.320 --> 00:08:03.470
to the last guide,
224
00:08:03.470 --> 00:08:04.900
then you'll remember
225
00:08:04.900 --> 00:08:08.423
that you can type props.match.params.id
226
00:08:10.810 --> 00:08:11.643
If not,
227
00:08:11.643 --> 00:08:13.260
don't worry I just typed it out right there.
228
00:08:13.260 --> 00:08:14.920
I got rid of that earlier
229
00:08:14.920 --> 00:08:16.320
from down below.
230
00:08:16.320 --> 00:08:19.300
So this is gonna get us that id.
231
00:08:19.300 --> 00:08:20.133
And so as soon
232
00:08:20.133 --> 00:08:21.170
as the page loads,
233
00:08:21.170 --> 00:08:22.350
we're grabbing that id
234
00:08:22.350 --> 00:08:23.580
from the URL,
235
00:08:23.580 --> 00:08:27.090
we're passing it to getPortfolioItem, this function.
236
00:08:27.090 --> 00:08:28.840
So we're calling it now.
237
00:08:28.840 --> 00:08:29.673
And then from there,
238
00:08:29.673 --> 00:08:30.910
we're simply gonna print it out.
239
00:08:30.910 --> 00:08:31.890
And in the next guide,
240
00:08:31.890 --> 00:08:34.540
you're gonna see how we can store it in state,
241
00:08:34.540 --> 00:08:36.560
and then we can render it on the page.
242
00:08:36.560 --> 00:08:39.010
And then don't forget to add that second argument
243
00:08:39.010 --> 00:08:41.040
of the brackets.
244
00:08:41.040 --> 00:08:42.630
Hit save.
245
00:08:42.630 --> 00:08:44.350
And this should give us everything
246
00:08:44.350 --> 00:08:45.460
that we need.
247
00:08:45.460 --> 00:08:46.440
Let's test it out.
248
00:08:46.440 --> 00:08:49.200
I'll open up Google Chrome here
249
00:08:49.200 --> 00:08:52.070
and let's open up the console.
250
00:08:52.070 --> 00:08:52.903
And yes.
251
00:08:52.903 --> 00:08:55.180
So you can see portfolio item there is working.
252
00:08:55.180 --> 00:08:57.220
If I open up this object,
253
00:08:57.220 --> 00:08:58.490
you'll see we have access
254
00:08:58.490 --> 00:09:00.200
to this portfolio item.
255
00:09:00.200 --> 00:09:02.280
We have the banner image URL.
256
00:09:02.280 --> 00:09:05.300
We have the category, description, name,
257
00:09:05.300 --> 00:09:06.370
everything like that.
258
00:09:06.370 --> 00:09:08.220
So we have all of the data
259
00:09:08.220 --> 00:09:10.130
that we needed right here,
260
00:09:10.130 --> 00:09:12.810
which means we're gonna be able to store this in state
261
00:09:12.810 --> 00:09:14.530
and then we can render it
262
00:09:14.530 --> 00:09:16.520
however we want on the page.
263
00:09:16.520 --> 00:09:17.800
And then we can style it
264
00:09:17.800 --> 00:09:19.770
and do all of those good things.
265
00:09:19.770 --> 00:09:21.390
And now let's test this out
266
00:09:21.390 --> 00:09:23.100
just to make sure everything's working.
267
00:09:23.100 --> 00:09:24.590
Go to the home page
268
00:09:24.590 --> 00:09:26.460
and let's click on something else.
269
00:09:26.460 --> 00:09:27.790
So now let's click
270
00:09:27.790 --> 00:09:29.520
on DevCamp again.
271
00:09:29.520 --> 00:09:30.780
So I've clicked on that.
272
00:09:30.780 --> 00:09:33.660
You can see portfolio item comes up here again.
273
00:09:33.660 --> 00:09:34.930
If I open it up,
274
00:09:34.930 --> 00:09:36.370
you can open up that data
275
00:09:36.370 --> 00:09:38.610
and you can see all of this is different.
276
00:09:38.610 --> 00:09:41.960
So, whenever we get a different URL up here,
277
00:09:41.960 --> 00:09:42.920
a different id,
278
00:09:42.920 --> 00:09:44.200
when that changes,
279
00:09:44.200 --> 00:09:46.920
we are now updating the data.
280
00:09:46.920 --> 00:09:49.110
And we're making a new API call.
281
00:09:49.110 --> 00:09:51.260
So this is all working really good.
282
00:09:51.260 --> 00:09:53.620
I'm happy with how all this is coming along
283
00:09:53.620 --> 00:09:54.740
and how it's structured.
284
00:09:54.740 --> 00:09:56.830
So I hope it's starting to kind of click
285
00:09:56.830 --> 00:09:57.663
and make sense.
286
00:09:57.663 --> 00:10:01.080
If not, definitely feel free to reach out to your mentors
287
00:10:01.080 --> 00:10:02.783
with any questions whatsoever.
288
00:10:02.783 --> 00:10:04.290
In the next guide,
289
00:10:04.290 --> 00:10:06.570
we're gonna see how we can take this data.
290
00:10:06.570 --> 00:10:08.250
We can store it in state
291
00:10:08.250 --> 00:10:10.800
and how we can start rendering it directly
292
00:10:10.800 --> 00:10:11.833
onto the page.