So we got started with names basis.
Let's continue on that route and let's split it into more files for dad here.
The project state management we could put dad into a separate file as well so I'll grab everything including
this creation of the project state instance here.
Cut it from the app to his file and create a new file project state.
T.S. move that in there and justice before put it into a namespace namespace app name is important it
has to be app because that's where the rest of our code is in.
Put it all in there.
And now important export what you need outside of this file as well which in this case is the project
state class.
We need that in the rest of our application and also this constant out down there.
We need to export this as well.
You don't need to export the listener here and all is not that state because both things are only used
in this file and therefore don't need to be exported.
Now we have to import our project status file so an apt yes time for a number.
Import up there project dash state.
Just like that if we save that it should compile without errors.
Now I will continue and the validation part your could go into a separate file as well so I'll grab
all of this.
Create a new file validation date.
Yes.
At the namespace app here.
Put my validation logic in there and export D validate able interface and all of the validation function
here of course.
And then back in app yes you know how it is.
We go back here to the top and add import to validation data.
Yes.
Now the decorator also can be moved into a separate file orto bind dash decorator Dot T S for example
again add the namespace with the name app to it puts the function in there and export it of course to
make it available outside of this file as well.
And then here an app.
Yes.
Time for another import where I import auto bind dash decorator dot t s.
Now we got more things to export.
We got our component and then all these classes I want to have each class in a separate file so that
each file is relatively small and easy to manage.
Now we're getting into a new problem here though we add more and more files on the same level.
And for now I'm using that dash thing here to provide some hint or help on what's in the file ought
to bind dash decorator shows us that there's probably a decorator in there.
Here we probably have interfaces here a model and so on.
Now if you only have three or four files that is perfectly fine but if you have more files you end up
with a very hard to understand folder structure here.
So what I like to do is I want to create some folders I'll add a decorators sub folder move my order
bind decorator in there and rename it to just order bind because it's already in the decorators folder
of course there's a decorator in there then I'll add my models folder and actually here I'll move both
drag and drop interfaces and project model in there simply because I think the drag and drop interfaces
all in the end are just it finishes of how Dragonball and probable classes should look like justice
to project model is the definition of how a project class should look like or how our project object
should look like.
So named this drag and drop and this year just project.
And then here I'll add a till folder for utility and add my validation in there and then a state folder
and add project state to that here I will keep the name Project dash state just to avoid confusion with
this project yes file here.
Technically that would not be a problem but I want to also make it clear here in this course.
So did you have an easier time seeing in which file I'm working you could definitely you renamed as
to just project yes here if you wanted to.
Now with dad refactoring and these sub folders of course our imports here are broken so we should fix
them drag and drop interfaces is found in the models folder and now is named just drag dropped.
Yes.
And the project model also is found in the models folder and is now just named Project yes project state
is found in the state folder validation is found in the YouTube folder and ordered by and decorator
is found in decorators and is just named order blind with debt if we saved it it compiles without errors
and now we have a more manageable and readable folder structure I would argue with that.
Let's continue.
We're not done.
We have our component here now for that I'll add a components sub folder and in there I want to have
my base dash component yes file and then my project item t is file my project list Tia's file and also
do project input Tia's file of course you can always organize this differently but I think this keeps
you related false together so we can wrap this abstract component base class here cut it from apt yes
and move it into base component
like this.
And of course all of just as before added into a namespace with the name app and then move it into this
namespace Of course all to justice before we need to export it so that we can use it in a number of
file that our file however will not be apt yes because the files or the classes where they use the component
will also be moved the project item class here for example I'll grab that and move it into project item.
Yes.
To be precise in there I'll also add a namespace app and move it into the namespace app in there and
then export this class as well.
Now important this relies on component and therefore if I now saved us we would get an error that component
isn't found in the end.
So here we again need to add this import where we have reference path equals.
And then here it's base component yes.
This is always a relative import here.
So since this isn't the same folder we don't have to say components slash here because we don't need
to go into the components folder first.
This file the project item file is already in the components folder.
So relative from this file based component is imported just by using its name here so now the project
item is here.
Now of course an apt yes.
We all got the project list
let's grab that.
Move it to the project list.
Yes file here and there into a namespace app.
And then all the year project input let's wrap this.
Cut it from here from the namespace app and the app.
Yes file and move it into the project input test file and thier into a app namespace no important justice
before export.
This class here project item and also project list of course all needs to be import export.
It was that we get a bunch of arrows because of course still there are missing imports in Apt.
Yes we should import all these components now.
So here we should import project input t as project list T S and then safety's.
Now of course it still crashes because we got more things that are missing in Project input.
We are using component just as we are in project list.
So just as we did it and project item we need to add that import of base component in the project input
TSR file and also in the project list.
Yes file was that it compiles without errors.
And let's see if it also works if we reload here and I add this is Dragonball and probable and that
all seems to work just as it should.
And now we split this across multiple files we still get one file in the end.
But when we work on our code it's now much more manageable because we have smaller focused files where
we can quickly find what we're looking for and where we don't have to scroll through a huge file to
find the place we want to work on next.