All language subtitles for 005 Data Layer Separation_en

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.