After looking at the API requests
supported by the Strapi CMS,
let's go back to our Next Shop,
and start adding some authentication functionality.
The first thing we could do is add a login page.
So, at the same level as the index page,
let's add a new file.
I'll call it "sign-in".
And this will be a usual React component,
called "SignInPage",
and exported as the "default" name.
Now, as for the content,
we could copy and modify what's in the HomePage.
But we're starting to have
a bit too much duplication here,
because the ProductPage also has
some of the same code.
In our Blog example we used
the custom App component
to keep the common page layout.
But in this example I want to show you
another possible approach.
We could create a normal React component,
that I like to call Page,
And this will contain the common user interface.
Now, I wrote a user snippet for myself
called "rfc" for "React Function Component".
that can automatically create
the initial boilerplate for a component,
so I don't need to write the same code every time.
If you don't know about "User Snippets",
it's a feature available in Visual Studio Code
that lets you create reusable code templates.
In this case when I type the prefix, that is "rfc"
the editor will insert all the lines
defined in the "body",
and you can insert predefined variables
like the file name.
If you search for "User Snippets"
in the Visual Studio Code documentation
you can find out more there,
and it's a very useful feature.
But you can also just type everything manually,
so I won't spend any more time on that.
Now, this Page component will contain
the common structure used by all pages.
So let's copy what's in the HomePage
as a starting point.
But we'll want to pass the page-specific content
as the special "children" prop,
and display that after the "Title"
in the "main" section.
We also want the "title"
to be different for each page,
so we could pass it as a separate prop
and then use that value as the "Title" text.
We also want the same title
in the document head,
but in this case we could still append "Next Shop".
Because this is the title used in the browser window,
and also by search engines,
so it helps to include the name of our website.
Ok. Now we just need to import
the "Head" and "Title" components.
And this should be ready.
So now, if we start from the HomePage again,
We can use the new "Page" component
as the top-level element.
Let me check quickly that it was imported correctly.
Page expects a "title" prop,
and note that we can pass props
to this common component,
which is something that's not possible
when using the custom App component.
This is in fact the main advantage of this approach.
Anyway, as "title" let's put "Indoor Plants".
That's a good description of
what we show in this page.
At this point we can remove the "Head",
"main", and "Title",
because they're all provided by the new component.
And of course we need to close the "Page" tag.
Let me indent this block properly.
And that should be it.
The HomePage still works,
and it shows "Indoor Plants" as the heading.
If we look at the title on the browser tab
that's also our new document title.
Ok. Before we move to the next page
we can probably remove some of the imports here.
"Title" is now in the new component,
and same for "Head".
Looks like "Link" is also unused.
Ideally I should have removed it
when we extracted the "ProductCard".
Anyway, let's move to the ProductPage now.
Here we want to repeat the same process
and import the "Page" component.
As the "title" in this case we want to show
the "product.title" property.
We can remove the common elements,
re-indent the main "div",
and finally close the "Page".
Let's check a product page.
It still works just fine.
So, let's remove any unused imports
from this file as well.
And that should be that.
Let's just make sure it still works.
Ok. At this point we can finally
go back to our SignInPage.
And here we can use our new "Page" component
to quickly create the content.
We can show "Sign In" as the title.
And that's it. We'll add more content later.
Let's test the new "sign-in" path now,
and here's our new page, with the expected heading.
Ok. Let's stop here for this video.
We spent a little bit of time
to extract this common "Page" component,
which was just a bit of refactoring.
But it will make it quicker
to create new pages from now on.
In the next video we'll continue with the SignInPage.