We're now loading all the review
data from the Markdown file,
using the front matter for
properties like the title.
What I'd like to do now is
extract the code that loads the
data into a separate function.
This way the component will only be responsible
for displaying the data.
Let's start by writing a function
in this file for now.
It will need to be "async",
and we can call it "getReview".
So, we can literally move this
code into the new function.
And here we can return an object
with all the review properties.
These will be "title", "date", and "image",
that we get from the front matter,
but also the "html", rendered from the markdown.
In fact, maybe we should rename this property,
and call it "body" instead,
because "html" is just the format.
At this point, inside the component,
we can get the "review" object by calling our new function,
asynchronously.
And all we need to do now is put "review"
in front of each property.
So the Heading will show the "review.title",
then we have "review.date" and "review.image",
and finally the "article" will
display the "review.body".
If we save, we should see that the
page still looks exactly the same.
Because we are just doing some refactoring.
Now, if we want to make this
function truly reusable,
then we shouldn't have "stardew-valley"
hard-coded inside it.
We could specify which review to
load when calling the function.
Which means we need to accept that as an argument.
I'll call it the "slug",
because it's also what we use in the page URL,
to identify each review.
We should now use that argument
when reading the file.
Let's insert the "slug" here
into the template literal.
And if we save, everything should still work.
So, all the logic about how to load the data
is now nicely encapsulated into
the getReview function.
Let's move that function into a
different file at this point,
to keep it completely separate from the component.
A common convention is to create
a "lib" folder at the top-level,
where to put all the code that's
not React components.
Let's create a file in there, called "reviews.js",
since it will contain the logic
to load the reviews.
And now we can simply cut and paste the
getReview function into the new file.
We'll also need a few imports.
Let's go and copy them from the page file as well,
that is quicker than importing
each function individually.
Ok. We just need to "export" this function,
and it's now ready to be used
from the other module.
You can see how cleaner this
component is this way.
We simply need to import "getReview"
from the new file,
and that's it.
The job of this page is simply
to display the review data,
it doesn't need to know how exactly
that data is loaded.
Potentially, we could change
the getReview function
to fetch the data from an
external API for example,
rather than loading it from local files,
and this component wouldn't be affected at all.
Anyway, let's make sure everything still works,
if we reload the page in the browser.
It's still displaying the same content.
But we made our code cleaner and more reusable,
by moving all the data fetching logic
into its own separate function.