So let's do that cleanup work.
And I first of all wanna make sure
that this app component is a separate route in the end.
And for that as a first step, I'll actually move app
into the routes folder because this is loaded as a route.
And I wanna, as mentioned before,
organize my components such that the route components are
in the routes folder and other components which are used
as part of other components are in the components folder.
And I'll rename this app component here
to posts because ultimately this should be responsible
for rendering my posts list here.
Now in this post JSX file, which was the app component,
I'll remove the main header
and I'll rename this function here,
this component function to posts, also in the export.
And we can get rid of that main header import here as well.
Now we can also get rid of the show modal handler
because that was previously used by the main header.
And we can actually also already get rid
of hide modal handler here,
and get rid of these parts here and of this state
because we'll have to change the entire logic
of our posts list component and how it works soon.
So for the moment, if I save it like this,
if I reload we show that list of posts
and we don't have to duplicate header anymore.
But of course this button here still won't work.
I'll get back to this soon.
What I wanna do first though
is I also wanna refactor the new post component,
and also move that along with its styles file
into the routes folder
because this is also loaded as a route.
So here we have this new post component here,
and with it being moved here,
this button still doesn't work.
But if for the moment I manually enter slash create post
in the URL, this gets loaded.
However, not as a modal overlay above my post list.
This does not work.
As you can see, I have my post list here,
but the new post page was not loaded as an overlay.
And that's therefore some more refactoring
which we have to perform.
This new post component should still be loaded as a modal
and therefore inside of the new post component
I'll use this modal component.
Previously I used it here in post list,
but there I'll soon get rid of it.
So instead, inside the new post component,
I want to use this modal component
as a wrapper around this form.
And for that you have to import this modal component
from going up one level, components modal like this,
so that this still gets rendered as a modal.
And in the posts list component,
I want to clean up this component.
This should no longer be responsible for also adding new
posts, instead that will soon be taken care of inside
of the new post component.
So in the post list component, we can get rid that code
where we render the new post component in the modal.
We can therefore get rid of this isPosting,
and also of the onStopPosting props.
Get rid of these two imports, which we don't need anymore.
And also theoretically here of that adPostHandler function.
But I'll keep it for the moment
because I will soon need that code again.
But with that, if we save this, if I now go to
create dash post, it now opens as an overlay.
However not as an overlay above my post list.
To make that work
we actually have to turn this post component
into a layout component itself,
because whilst it does not provide some sidebar
or main navigation
it still should provide an element that's also available
in the new post component.
And that would be the list of posts.
So I'll actually add a children prop here
to the app component, which was actually renamed to posts.
So I'll rename it here as well
in the import and when I use it.
And then here in this array of child components
I wanna render create post as a child component.
So this new post component is now a child route
of the posts route.
So we have some nested layouts here, but due to this setup
we'll be able to render this new post modal
as an overlay to this list of posts.
For that, we just have to make sure
that we also add an outlet here.
And this can again be done by importing outlet
from react-router-dom, just as we did it before.
And then we could add it here above this main section.
So now posts is technically also a layout route
you could say.
And we got these nested routes here to
achieve this look where if I now open create post
this is open as an overlay above my list of posts.
At the moment, that list of posts gets reloaded
because I manually entered the URL
and they have reloaded this page
as a brand new page just as if I clicked the reload button.
But you see it now is rendered
with exactly the look I want to have,
which is that we have this as an overlay.
Though at the moment closing this
of course does not really work
and we also can't open it by clicking new post.
So that's something we should also change.