1
00:00:02,350 --> 00:00:04,110
So we got started with names basis.

2
00:00:04,210 --> 00:00:09,190
Let's continue on that route and let's split it into more files for dad here.

3
00:00:09,190 --> 00:00:16,690
The project state management we could put dad into a separate file as well so I'll grab everything including

4
00:00:16,690 --> 00:00:20,560
this creation of the project state instance here.

5
00:00:20,620 --> 00:00:25,680
Cut it from the app to his file and create a new file project state.

6
00:00:25,750 --> 00:00:34,540
T.S. move that in there and justice before put it into a namespace namespace app name is important it

7
00:00:34,540 --> 00:00:37,950
has to be app because that's where the rest of our code is in.

8
00:00:38,080 --> 00:00:39,120
Put it all in there.

9
00:00:39,140 --> 00:00:45,130
And now important export what you need outside of this file as well which in this case is the project

10
00:00:45,130 --> 00:00:46,070
state class.

11
00:00:46,150 --> 00:00:51,500
We need that in the rest of our application and also this constant out down there.

12
00:00:51,520 --> 00:00:53,630
We need to export this as well.

13
00:00:53,920 --> 00:01:00,250
You don't need to export the listener here and all is not that state because both things are only used

14
00:01:00,250 --> 00:01:03,750
in this file and therefore don't need to be exported.

15
00:01:03,760 --> 00:01:08,890
Now we have to import our project status file so an apt yes time for a number.

16
00:01:08,890 --> 00:01:11,840
Import up there project dash state.

17
00:01:11,980 --> 00:01:16,620
Just like that if we save that it should compile without errors.

18
00:01:16,650 --> 00:01:22,230
Now I will continue and the validation part your could go into a separate file as well so I'll grab

19
00:01:22,350 --> 00:01:24,000
all of this.

20
00:01:24,000 --> 00:01:25,720
Create a new file validation date.

21
00:01:25,730 --> 00:01:26,570
Yes.

22
00:01:26,940 --> 00:01:29,050
At the namespace app here.

23
00:01:29,100 --> 00:01:35,610
Put my validation logic in there and export D validate able interface and all of the validation function

24
00:01:35,610 --> 00:01:37,110
here of course.

25
00:01:37,110 --> 00:01:40,000
And then back in app yes you know how it is.

26
00:01:40,200 --> 00:01:43,620
We go back here to the top and add import to validation data.

27
00:01:43,620 --> 00:01:45,180
Yes.

28
00:01:45,210 --> 00:01:53,730
Now the decorator also can be moved into a separate file orto bind dash decorator Dot T S for example

29
00:01:54,480 --> 00:02:02,070
again add the namespace with the name app to it puts the function in there and export it of course to

30
00:02:02,070 --> 00:02:05,040
make it available outside of this file as well.

31
00:02:05,040 --> 00:02:06,140
And then here an app.

32
00:02:06,150 --> 00:02:06,750
Yes.

33
00:02:06,780 --> 00:02:14,790
Time for another import where I import auto bind dash decorator dot t s.

34
00:02:14,880 --> 00:02:16,760
Now we got more things to export.

35
00:02:16,860 --> 00:02:22,200
We got our component and then all these classes I want to have each class in a separate file so that

36
00:02:22,260 --> 00:02:25,460
each file is relatively small and easy to manage.

37
00:02:25,470 --> 00:02:31,090
Now we're getting into a new problem here though we add more and more files on the same level.

38
00:02:31,090 --> 00:02:37,880
And for now I'm using that dash thing here to provide some hint or help on what's in the file ought

39
00:02:37,960 --> 00:02:42,500
to bind dash decorator shows us that there's probably a decorator in there.

40
00:02:42,510 --> 00:02:46,800
Here we probably have interfaces here a model and so on.

41
00:02:46,800 --> 00:02:52,770
Now if you only have three or four files that is perfectly fine but if you have more files you end up

42
00:02:52,770 --> 00:02:57,480
with a very hard to understand folder structure here.

43
00:02:57,480 --> 00:03:03,960
So what I like to do is I want to create some folders I'll add a decorators sub folder move my order

44
00:03:03,960 --> 00:03:09,300
bind decorator in there and rename it to just order bind because it's already in the decorators folder

45
00:03:09,300 --> 00:03:16,200
of course there's a decorator in there then I'll add my models folder and actually here I'll move both

46
00:03:16,200 --> 00:03:22,140
drag and drop interfaces and project model in there simply because I think the drag and drop interfaces

47
00:03:22,380 --> 00:03:27,970
all in the end are just it finishes of how Dragonball and probable classes should look like justice

48
00:03:27,980 --> 00:03:32,940
to project model is the definition of how a project class should look like or how our project object

49
00:03:33,030 --> 00:03:34,350
should look like.

50
00:03:34,350 --> 00:03:38,380
So named this drag and drop and this year just project.

51
00:03:38,730 --> 00:03:46,410
And then here I'll add a till folder for utility and add my validation in there and then a state folder

52
00:03:47,220 --> 00:03:53,730
and add project state to that here I will keep the name Project dash state just to avoid confusion with

53
00:03:53,730 --> 00:03:55,260
this project yes file here.

54
00:03:55,320 --> 00:03:59,820
Technically that would not be a problem but I want to also make it clear here in this course.

55
00:03:59,820 --> 00:04:04,230
So did you have an easier time seeing in which file I'm working you could definitely you renamed as

56
00:04:04,230 --> 00:04:06,950
to just project yes here if you wanted to.

57
00:04:07,380 --> 00:04:13,290
Now with dad refactoring and these sub folders of course our imports here are broken so we should fix

58
00:04:13,290 --> 00:04:20,300
them drag and drop interfaces is found in the models folder and now is named just drag dropped.

59
00:04:20,310 --> 00:04:21,300
Yes.

60
00:04:21,600 --> 00:04:29,370
And the project model also is found in the models folder and is now just named Project yes project state

61
00:04:29,400 --> 00:04:35,520
is found in the state folder validation is found in the YouTube folder and ordered by and decorator

62
00:04:35,520 --> 00:04:42,690
is found in decorators and is just named order blind with debt if we saved it it compiles without errors

63
00:04:42,960 --> 00:04:48,120
and now we have a more manageable and readable folder structure I would argue with that.

64
00:04:48,300 --> 00:04:48,890
Let's continue.

65
00:04:48,890 --> 00:04:50,550
We're not done.

66
00:04:50,550 --> 00:04:56,790
We have our component here now for that I'll add a components sub folder and in there I want to have

67
00:04:56,790 --> 00:05:08,730
my base dash component yes file and then my project item t is file my project list Tia's file and also

68
00:05:09,020 --> 00:05:15,600
do project input Tia's file of course you can always organize this differently but I think this keeps

69
00:05:15,600 --> 00:05:25,310
you related false together so we can wrap this abstract component base class here cut it from apt yes

70
00:05:25,310 --> 00:05:26,870
and move it into base component

71
00:05:29,650 --> 00:05:30,500
like this.

72
00:05:30,670 --> 00:05:40,300
And of course all of just as before added into a namespace with the name app and then move it into this

73
00:05:40,300 --> 00:05:45,340
namespace Of course all to justice before we need to export it so that we can use it in a number of

74
00:05:45,340 --> 00:05:53,350
file that our file however will not be apt yes because the files or the classes where they use the component

75
00:05:53,710 --> 00:06:00,030
will also be moved the project item class here for example I'll grab that and move it into project item.

76
00:06:00,040 --> 00:06:00,480
Yes.

77
00:06:00,490 --> 00:06:06,940
To be precise in there I'll also add a namespace app and move it into the namespace app in there and

78
00:06:06,940 --> 00:06:09,090
then export this class as well.

79
00:06:09,100 --> 00:06:15,390
Now important this relies on component and therefore if I now saved us we would get an error that component

80
00:06:15,420 --> 00:06:16,790
isn't found in the end.

81
00:06:16,830 --> 00:06:22,470
So here we again need to add this import where we have reference path equals.

82
00:06:22,470 --> 00:06:24,830
And then here it's base component yes.

83
00:06:25,170 --> 00:06:27,350
This is always a relative import here.

84
00:06:27,360 --> 00:06:33,090
So since this isn't the same folder we don't have to say components slash here because we don't need

85
00:06:33,090 --> 00:06:35,000
to go into the components folder first.

86
00:06:35,100 --> 00:06:39,240
This file the project item file is already in the components folder.

87
00:06:39,240 --> 00:06:46,900
So relative from this file based component is imported just by using its name here so now the project

88
00:06:46,960 --> 00:06:48,030
item is here.

89
00:06:48,070 --> 00:06:50,030
Now of course an apt yes.

90
00:06:50,350 --> 00:06:52,090
We all got the project list

91
00:06:55,980 --> 00:06:56,930
let's grab that.

92
00:06:56,950 --> 00:06:58,320
Move it to the project list.

93
00:06:58,430 --> 00:07:03,700
Yes file here and there into a namespace app.

94
00:07:04,120 --> 00:07:10,890
And then all the year project input let's wrap this.

95
00:07:11,110 --> 00:07:13,720
Cut it from here from the namespace app and the app.

96
00:07:13,710 --> 00:07:21,630
Yes file and move it into the project input test file and thier into a app namespace no important justice

97
00:07:21,630 --> 00:07:22,800
before export.

98
00:07:22,830 --> 00:07:29,280
This class here project item and also project list of course all needs to be import export.

99
00:07:29,280 --> 00:07:35,740
It was that we get a bunch of arrows because of course still there are missing imports in Apt.

100
00:07:35,740 --> 00:07:39,910
Yes we should import all these components now.

101
00:07:39,970 --> 00:07:47,400
So here we should import project input t as project list T S and then safety's.

102
00:07:47,420 --> 00:07:52,850
Now of course it still crashes because we got more things that are missing in Project input.

103
00:07:52,850 --> 00:07:55,940
We are using component just as we are in project list.

104
00:07:55,940 --> 00:08:02,030
So just as we did it and project item we need to add that import of base component in the project input

105
00:08:02,060 --> 00:08:05,010
TSR file and also in the project list.

106
00:08:05,030 --> 00:08:09,120
Yes file was that it compiles without errors.

107
00:08:09,130 --> 00:08:17,510
And let's see if it also works if we reload here and I add this is Dragonball and probable and that

108
00:08:17,570 --> 00:08:19,660
all seems to work just as it should.

109
00:08:19,760 --> 00:08:24,330
And now we split this across multiple files we still get one file in the end.

110
00:08:24,440 --> 00:08:31,790
But when we work on our code it's now much more manageable because we have smaller focused files where

111
00:08:31,790 --> 00:08:37,130
we can quickly find what we're looking for and where we don't have to scroll through a huge file to

112
00:08:37,130 --> 00:08:39,230
find the place we want to work on next.