We are at the point where we're ready
to rewrite the "getReview" function
because it's currently trying to
read a local Markdown file,
but we want it to fetch the
data from the CMS instead,
by making the API request we tested
in this separate script.
This will return the review with the given "slug".
This data will be displayed in the ReviewPage.
Let's log the full "review"
object in this component,
so we can see what data structure it expects.
We can still open one of our old local files,
like "hellblade",
and this way we can see which properties it uses.
We'll want to return the same kind of object,
even when fetching the review from Strapi.
So, let's keep the old code commented out,
in case we need it as a reference.
Now, to fetch the data from the CMS
we need some code similar to "getReviews",
but in this case we'll want to
pass the Strapi parameters
that we tested in the separate script.
Now, here we don't want to hard-code
"hades-2018" of course,
we want to pass the "slug"
we receive as an argument.
Let me also put the right function
name in the log statement.
Ok, at this point we need to return something.
Let's take another look at the API response.
It contains a "data" array,
but with a single entry.
So, in our code
we can get the "item" as the first
element of the "data" array,
assuming there is a review
matching the given slug.
And we want to return an object with "slug",
"title", etc.
We basically need to convert the CMS item
like we did in "getReviews".
I'll just copy and paste this code for now.
We'll worry about removing the duplication later.
Now, for an individual review we
also need to return the "body",
so let's add another property to this object,
with the value being "attributes.body".
Thinking about it, there is no "attributes"
variable in this scope.
Let's define it by destructuring
the "item" object.
Ok, let's try saving this.
You can see that the page is working.
Let's check the server logs as well,
and see what object we get in the ReviewPage.
It has all the right properties,
including the "body", that's very long.
Now, we're still missing something though.
The body is the raw Markdown source,
rather than being rendered to HTML.
"Hades" should be displayed in bold here.
And in the rest of the body we should probably
see a few separate paragraphs,
but it's all one big block of text.
So let's render the Markdown to HTML.
We were doing that in the old code,
by calling the "marked" function.
We'll need to do the same in the new code.
But here we want to render "attributes.body",
instead of "content".
Let's see if this works.
"Hades" is now in bold,
and "Supergiant Games" in italic.
So the Markdown is being rendered correctly.
We can now remove this old code,
because our new implementation is complete.
Let's try opening a different review,
like "Fall Guys: Ultimate Knockout".
This looks good.
Let's test another one as well.
This is for "Black Mesa".
This body also has sub-headings.
Anyway, it looks great.
And this is our full "getReview" implementation,
rewritten to fetch the data from the CMS.