1
00:00:03,000 --> 00:00:05,444
We rewrote the "getReview" function

2
00:00:05,444 --> 00:00:08,211
so that it fetches the data from Strapi.

3
00:00:08,211 --> 00:00:12,019
And before that we did the same for "getReviews".

4
00:00:12,019 --> 00:00:14,690
Now, there's a fair amount of duplication

5
00:00:14,690 --> 00:00:16,514
between these two functions,

6
00:00:16,579 --> 00:00:19,755
so in this video I want to do some refactoring,

7
00:00:19,755 --> 00:00:21,701
and extract the common code

8
00:00:21,701 --> 00:00:23,504
into a separate function.

9
00:00:23,576 --> 00:00:27,158
Let's start by copying the full "getReviews" code,

10
00:00:27,158 --> 00:00:29,796
but this should be an internal function,

11
00:00:29,796 --> 00:00:31,115
that's not exported,

12
00:00:31,181 --> 00:00:33,705
and we could call it "fetchReviews",

13
00:00:33,705 --> 00:00:36,989
since it will contain the common fetch code.

14
00:00:36,989 --> 00:00:40,196
This function could return the JSON response,

15
00:00:40,196 --> 00:00:42,395
because how to extract the data

16
00:00:42,395 --> 00:00:44,594
will be different in each case.

17
00:00:44,665 --> 00:00:46,997
We could also accept the "parameters"

18
00:00:46,997 --> 00:00:47,943
as an argument,

19
00:00:48,006 --> 00:00:51,656
so we can use this function to make different requests,

20
00:00:51,656 --> 00:00:53,182
with different options.

21
00:00:53,248 --> 00:00:55,603
We always fetch the same endpoint,

22
00:00:55,603 --> 00:00:57,680
but with different parameters,

23
00:00:57,750 --> 00:01:00,920
and we'll handle the response data differently.

24
00:01:00,920 --> 00:01:03,249
Let me also update the log statement,

25
00:01:03,249 --> 00:01:05,325
to print the right function name.

26
00:01:05,388 --> 00:01:07,922
Ok, I think this should work.

27
00:01:07,922 --> 00:01:10,530
We can now call "fetchReviews" instead of

28
00:01:10,530 --> 00:01:13,139
repeating all the steps in each function.

29
00:01:13,203 --> 00:01:15,289
So here we can get the "data"

30
00:01:15,289 --> 00:01:17,303
by calling our new function,

31
00:01:17,375 --> 00:01:19,376
and passing the same object

32
00:01:19,376 --> 00:01:21,155
with the API parameters.

33
00:01:21,229 --> 00:01:23,386
But at this point we can remove

34
00:01:23,386 --> 00:01:24,777
a few lines of code.

35
00:01:24,847 --> 00:01:28,823
We no longer need to know which URL to call here,

36
00:01:28,823 --> 00:01:31,365
or how to encode the parameters.

37
00:01:31,365 --> 00:01:33,532
Let's save and check that the

38
00:01:33,532 --> 00:01:35,400
Reviews page still works.

39
00:01:35,475 --> 00:01:38,808
Ok, now we can update "getReview" as well.

40
00:01:38,808 --> 00:01:42,011
Let's do the same thing and call "fetchReviews"

41
00:01:42,011 --> 00:01:43,374
to get the response,

42
00:01:43,442 --> 00:01:46,723
passing the same Strapi parameters as before.

43
00:01:47,584 --> 00:01:50,176
And now we can remove the old code.

44
00:01:50,811 --> 00:01:53,579
Let's save, and test if an individual

45
00:01:53,579 --> 00:01:54,926
Review page works.

46
00:01:55,000 --> 00:01:56,019
It's all good.

47
00:01:56,019 --> 00:02:00,058
So, both these functions now call "fetchReviews",

48
00:02:00,058 --> 00:02:02,321
which makes it easier to modify

49
00:02:02,321 --> 00:02:04,073
the common request code.

50
00:02:04,146 --> 00:02:06,283
One thing we should do, whenever

51
00:02:06,283 --> 00:02:07,820
we make an HTTP request

52
00:02:07,887 --> 00:02:10,698
is check if the response was "ok",

53
00:02:10,800 --> 00:02:13,334
because the server could return an error,

54
00:02:13,334 --> 00:02:16,365
like 404 Not Found for example.

55
00:02:16,365 --> 00:02:19,793
In this case we should really throw our own Error

56
00:02:19,793 --> 00:02:22,733
so we can provide a useful error message.

57
00:02:22,733 --> 00:02:25,492
We could include the "response.status",

58
00:02:25,492 --> 00:02:28,972
like "404" if the resource doesn't exist,

59
00:02:28,972 --> 00:02:32,983
and also show which "url" we tried to request.

60
00:02:32,983 --> 00:02:34,911
This way, if there is an error,

61
00:02:34,911 --> 00:02:37,237
at least we can more easily tell 

62
00:02:37,237 --> 00:02:38,929
what caused the problem.

63
00:02:38,999 --> 00:02:41,452
And we don't have to duplicate the same

64
00:02:41,452 --> 00:02:43,402
error checking code everywhere.

65
00:02:43,465 --> 00:02:45,686
Now, there's still some duplication

66
00:02:45,686 --> 00:02:47,463
between these two functions,

67
00:02:47,527 --> 00:02:49,730
in the code that converts the

68
00:02:49,730 --> 00:02:51,553
data returned by the CMS

69
00:02:51,629 --> 00:02:53,789
into our own objects, with only

70
00:02:53,789 --> 00:02:55,392
the properties we want.

71
00:02:55,462 --> 00:02:57,594
"getReview" is a bit different,

72
00:02:57,594 --> 00:03:00,088
because we also have the "body" here.

73
00:03:00,088 --> 00:03:02,655
But we should still be able to extract the

74
00:03:02,655 --> 00:03:04,793
logic for all the other properties.

75
00:03:04,854 --> 00:03:06,940
Let's go and create another function,

76
00:03:06,949 --> 00:03:08,940
we can call it "toReview".

77
00:03:08,940 --> 00:03:12,203
It will take an "item" as returned by the CMS

78
00:03:12,203 --> 00:03:14,923
and convert it into our custom object,

79
00:03:14,923 --> 00:03:17,014
extracting the right properties

80
00:03:17,014 --> 00:03:18,767
from the CMS "attributes".

81
00:03:18,835 --> 00:03:22,102
In fact, we need to define "attributes" here;

82
00:03:22,102 --> 00:03:25,708
I'll do that by destructuring the "item" object.

83
00:03:25,708 --> 00:03:28,238
This way, when calling "toReview",

84
00:03:28,238 --> 00:03:30,471
we can pass a full CMS object.

85
00:03:30,545 --> 00:03:33,127
So, if we start from "getReviews",

86
00:03:33,127 --> 00:03:35,444
we can simply pass our new function

87
00:03:35,444 --> 00:03:36,767
to the "map" method.

88
00:03:36,834 --> 00:03:38,987
For each element in the "data"

89
00:03:38,987 --> 00:03:40,710
array we call "toReview"

90
00:03:40,782 --> 00:03:43,628
converting it to our own object type.

91
00:03:43,628 --> 00:03:45,756
Let's reload the Reviews page, to

92
00:03:45,756 --> 00:03:47,691
prove that it's still working.

93
00:03:47,755 --> 00:03:49,951
Ok. At this point we can update

94
00:03:49,951 --> 00:03:51,368
"getReview" as well.

95
00:03:51,439 --> 00:03:53,460
In this case however, we can only

96
00:03:53,460 --> 00:03:55,421
replace these common properties,

97
00:03:55,482 --> 00:03:58,022
while still adding the "body" separately.

98
00:03:58,022 --> 00:04:00,416
What we can do is call "toReview"

99
00:04:00,416 --> 00:04:02,664
but then expand its properties,

100
00:04:02,736 --> 00:04:04,959
using "dot dot dot" that is the

101
00:04:04,959 --> 00:04:06,895
JavaScript "spread syntax".

102
00:04:06,967 --> 00:04:10,175
Now, we need to pass it the "item" object

103
00:04:10,175 --> 00:04:13,358
that is the first element in the "data" array.

104
00:04:13,358 --> 00:04:15,760
And if we do this we also need to

105
00:04:15,760 --> 00:04:17,870
write "item.attributes" here.

106
00:04:17,942 --> 00:04:20,321
Ok, I think this should work,

107
00:04:20,321 --> 00:04:22,898
if we try opening a Review page.

108
00:04:22,898 --> 00:04:25,734
That's it. We just did some refactoring,

109
00:04:25,734 --> 00:04:28,217
and simplified these two functions

110
00:04:28,217 --> 00:04:30,680
by extracting the common logic into

111
00:04:30,680 --> 00:04:32,509
separate shared functions.

112
00:04:32,580 --> 00:04:34,849
This will also make it easier to

113
00:04:34,849 --> 00:04:36,977
write additional API requests.

114
00:04:37,048 --> 00:04:40,095
And in fact in the next video we'll reimplement

115
00:04:40,095 --> 00:04:41,651
the "getSlugs" function.