1
00:00:03,000 --> 00:00:05,209
We are at the point where we're ready

2
00:00:05,209 --> 00:00:07,299
to rewrite the "getReview" function

3
00:00:07,359 --> 00:00:09,545
because it's currently trying to

4
00:00:09,545 --> 00:00:11,390
read a local Markdown file,

5
00:00:11,458 --> 00:00:13,369
but we want it to fetch the

6
00:00:13,369 --> 00:00:15,210
data from the CMS instead,

7
00:00:15,281 --> 00:00:17,826
by making the API request we tested

8
00:00:17,826 --> 00:00:19,571
in this separate script.

9
00:00:19,644 --> 00:00:22,944
This will return the review with the given "slug".

10
00:00:22,944 --> 00:00:26,089
This data will be displayed in the ReviewPage.

11
00:00:26,089 --> 00:00:27,922
Let's log the full "review"

12
00:00:27,922 --> 00:00:29,620
object in this component,

13
00:00:30,069 --> 00:00:33,391
so we can see what data structure it expects.

14
00:00:33,391 --> 00:00:36,441
We can still open one of our old local files,

15
00:00:36,441 --> 00:00:37,593
like "hellblade",

16
00:00:37,661 --> 00:00:40,944
and this way we can see which properties it uses.

17
00:00:40,944 --> 00:00:43,875
We'll want to return the same kind of object,

18
00:00:43,875 --> 00:00:46,628
even when fetching the review from Strapi.

19
00:00:46,628 --> 00:00:49,495
So, let's keep the old code commented out,

20
00:00:49,497 --> 00:00:51,802
in case we need it as a reference.

21
00:00:51,802 --> 00:00:54,328
Now, to fetch the data from the CMS

22
00:00:54,391 --> 00:00:57,291
we need some code similar to "getReviews",

23
00:00:57,291 --> 00:00:59,111
but in this case we'll want to

24
00:00:59,111 --> 00:01:00,689
pass the Strapi parameters

25
00:01:00,750 --> 00:01:03,193
that we tested in the separate script.

26
00:01:04,066 --> 00:01:07,131
Now, here we don't want to hard-code

27
00:01:07,131 --> 00:01:09,089
"hades-2018" of course,

28
00:01:09,174 --> 00:01:10,800
we want to pass the "slug"

29
00:01:10,800 --> 00:01:12,425
we receive as an argument.

30
00:01:12,488 --> 00:01:14,857
Let me also put the right function

31
00:01:14,857 --> 00:01:16,668
name in the log statement.

32
00:01:16,738 --> 00:01:20,381
Ok, at this point we need to return something.

33
00:01:20,381 --> 00:01:23,253
Let's take another look at the API response.

34
00:01:23,253 --> 00:01:25,304
It contains a "data" array,

35
00:01:25,304 --> 00:01:27,127
but with a single entry.

36
00:01:27,203 --> 00:01:28,943
So, in our code

37
00:01:29,236 --> 00:01:31,652
we can get the "item" as the first

38
00:01:31,652 --> 00:01:33,642
element of the "data" array,

39
00:01:33,713 --> 00:01:35,473
assuming there is a review

40
00:01:35,473 --> 00:01:37,098
matching the given slug.

41
00:01:37,166 --> 00:01:40,457
And we want to return an object with "slug",

42
00:01:40,457 --> 00:01:41,430
"title", etc.

43
00:01:41,505 --> 00:01:44,722
We basically need to convert the CMS item

44
00:01:44,722 --> 00:01:46,774
like we did in "getReviews".

45
00:01:47,543 --> 00:01:50,576
I'll just copy and paste this code for now.

46
00:01:50,576 --> 00:01:54,037
We'll worry about removing the duplication later.

47
00:01:54,037 --> 00:01:56,077
Now, for an individual review we

48
00:01:56,077 --> 00:01:58,053
also need to return the "body",

49
00:01:58,117 --> 00:02:00,756
so let's add another property to this object,

50
00:02:01,137 --> 00:02:04,319
with the value being "attributes.body".

51
00:02:04,319 --> 00:02:07,033
Thinking about it, there is no "attributes"

52
00:02:07,033 --> 00:02:08,485
variable in this scope.

53
00:02:08,548 --> 00:02:11,002
Let's define it by destructuring

54
00:02:11,002 --> 00:02:12,383
the "item" object.

55
00:02:12,460 --> 00:02:14,758
Ok, let's try saving this.

56
00:02:14,758 --> 00:02:17,142
You can see that the page is working.

57
00:02:17,142 --> 00:02:19,544
Let's check the server logs as well,

58
00:02:19,544 --> 00:02:22,903
and see what object we get in the ReviewPage.

59
00:02:22,903 --> 00:02:24,804
It has all the right properties,

60
00:02:24,804 --> 00:02:27,556
including the "body", that's very long.

61
00:02:27,556 --> 00:02:30,092
Now, we're still missing something though.

62
00:02:30,092 --> 00:02:33,047
The body is the raw Markdown source,

63
00:02:33,047 --> 00:02:35,920
rather than being rendered to HTML.

64
00:02:36,002 --> 00:02:38,915
"Hades" should be displayed in bold here.

65
00:02:38,915 --> 00:02:41,648
And in the rest of the body we should probably

66
00:02:41,648 --> 00:02:43,431
see a few separate paragraphs,

67
00:02:43,491 --> 00:02:45,918
but it's all one big block of text.

68
00:02:45,918 --> 00:02:49,196
So let's render the Markdown to HTML.

69
00:02:49,196 --> 00:02:51,342
We were doing that in the old code,

70
00:02:51,342 --> 00:02:53,774
by calling the "marked" function.

71
00:02:53,774 --> 00:02:56,593
We'll need to do the same in the new code.

72
00:02:56,944 --> 00:03:00,371
But here we want to render "attributes.body",

73
00:03:00,393 --> 00:03:02,159
instead of "content".

74
00:03:02,159 --> 00:03:03,797
Let's see if this works.

75
00:03:03,797 --> 00:03:05,716
"Hades" is now in bold,

76
00:03:05,716 --> 00:03:08,183
and "Supergiant Games" in italic.

77
00:03:08,183 --> 00:03:11,177
So the Markdown is being rendered correctly.

78
00:03:11,177 --> 00:03:13,542
We can now remove this old code,

79
00:03:13,677 --> 00:03:16,434
because our new implementation is complete.

80
00:03:16,434 --> 00:03:18,754
Let's try opening a different review,

81
00:03:18,814 --> 00:03:21,870
like "Fall Guys: Ultimate Knockout".

82
00:03:21,870 --> 00:03:23,102
This looks good.

83
00:03:23,510 --> 00:03:25,479
Let's test another one as well.

84
00:03:25,790 --> 00:03:27,932
This is for "Black Mesa".

85
00:03:27,932 --> 00:03:30,459
This body also has sub-headings.

86
00:03:30,459 --> 00:03:32,289
Anyway, it looks great.

87
00:03:32,289 --> 00:03:35,426
And this is our full "getReview" implementation,

88
00:03:35,426 --> 00:03:38,359
rewritten to fetch the data from the CMS.