1
00:00:00,180 --> 00:00:00,540
Awesome.

2
00:00:00,690 --> 00:00:04,500
So now let's start setting up the all jobs page.

3
00:00:04,950 --> 00:00:06,480
And the first thing that we want to do.

4
00:00:07,470 --> 00:00:15,930
Is to create four components now, the first year the search container and jobs container will be exported

5
00:00:16,260 --> 00:00:19,230
because we will display them in all jobs.

6
00:00:19,560 --> 00:00:21,840
But when it comes to a single job.

7
00:00:22,230 --> 00:00:28,230
So what is going to be of this item over here and why we need to remove this gibberish again?

8
00:00:28,530 --> 00:00:34,450
This is going to be that specific job component and also have that job info, which is going to be this

9
00:00:34,450 --> 00:00:35,220
sucker over here.

10
00:00:35,580 --> 00:00:37,950
Notice we have this icon and text.

11
00:00:37,960 --> 00:00:42,180
Then I just decided that it's going to be better if it's a separate component.

12
00:00:42,690 --> 00:00:47,900
But when it comes to a search set up, this is going to be in a separate component.

13
00:00:47,910 --> 00:00:53,610
And then when it comes to all the jobs, now it's going to be in the another component.

14
00:00:54,550 --> 00:00:58,480
Now, once we have all of that in place, the exports and everything.

15
00:00:58,700 --> 00:01:05,410
We're going to go over here with the jobs container and search container, so that is in the jobs page

16
00:01:05,710 --> 00:01:09,040
and then I'm just going to use the fragment and display both of them.

17
00:01:09,430 --> 00:01:13,630
And like I said, initially, we'll just work on displaying the jobs.

18
00:01:14,080 --> 00:01:15,640
So that is still coming up.

19
00:01:16,240 --> 00:01:20,650
Factory, there's just going to be some kind of dummy value as far as the component, for example,

20
00:01:20,920 --> 00:01:24,400
search container and not in the jobs container.

21
00:01:24,760 --> 00:01:27,340
We want to get use app context.

22
00:01:27,400 --> 00:01:28,120
Here's a fact.

23
00:01:29,060 --> 00:01:31,250
Because we will set up logic in here.

24
00:01:31,430 --> 00:01:36,680
Remember, get jobs, then we want to get loading job and rapper.

25
00:01:37,040 --> 00:01:41,870
And if you're wondering, well, why we're not setting the loading for the entire page?

26
00:01:42,260 --> 00:01:44,040
Well, remember we will have search.

27
00:01:44,060 --> 00:01:44,450
Correct.

28
00:01:44,960 --> 00:01:53,120
And as you're typing here, I find a little bit annoying if the moment we are in the middle of the request

29
00:01:53,570 --> 00:01:55,730
round, essentially everything is hidden.

30
00:01:56,000 --> 00:01:57,840
And we have that spinner again.

31
00:01:58,190 --> 00:02:02,780
I've noticed that as I'm setting up the courses, people agree with me.

32
00:02:03,050 --> 00:02:09,710
So therefore, in this case, we separate it to where loading is just going to be over here, where

33
00:02:09,710 --> 00:02:10,370
we have the jobs.

34
00:02:10,639 --> 00:02:12,020
So it's that way when I'm typing.

35
00:02:12,350 --> 00:02:13,130
It's not annoying.

36
00:02:13,640 --> 00:02:16,250
We're not hiring the search one.

37
00:02:16,460 --> 00:02:17,420
Hopefully, that makes sense.

38
00:02:17,780 --> 00:02:24,110
And then I have the wrapper, which is the jobs container, and I'm going to come back to this one as

39
00:02:24,110 --> 00:02:24,830
far as logic.

40
00:02:25,130 --> 00:02:28,730
Why don't we start by actually setting up those components?

41
00:02:29,180 --> 00:02:31,430
So let's navigate to our components.

42
00:02:32,430 --> 00:02:34,170
And let's create all four of them.

43
00:02:34,590 --> 00:02:37,560
So, first of all, we're going to go with search container.

44
00:02:38,040 --> 00:02:40,320
And like I said, we'll start with a dummy code.

45
00:02:40,860 --> 00:02:42,360
So let's create that component.

46
00:02:43,230 --> 00:02:50,010
And here I'm just going to write search component, but I think just search stands out a little bit.

47
00:02:50,610 --> 00:02:51,870
We're going to go with search.

48
00:02:52,770 --> 00:02:57,410
And component component or here are separate.

49
00:02:57,810 --> 00:03:04,140
And I think I'm going to create them and then we'll decide which one we are importing, where then we

50
00:03:04,140 --> 00:03:07,770
want to go with jobs container, pretty much same spiel.

51
00:03:08,550 --> 00:03:16,410
We're going to go with our container, meaning our component then will change this thing around to adding

52
00:03:16,530 --> 00:03:19,470
to the worry will set up everything in a second.

53
00:03:19,470 --> 00:03:21,450
So technically it doesn't really matter.

54
00:03:21,840 --> 00:03:26,130
We're just going to go with jobs container that we want to go with single job.

55
00:03:26,850 --> 00:03:28,230
So let's set it up over here.

56
00:03:28,500 --> 00:03:34,830
The job jobs again, this is going to be the case here where I'm going to go with one job component,

57
00:03:35,610 --> 00:03:41,400
then I'll just go with single another job and let's save this one.

58
00:03:41,940 --> 00:03:46,530
And then I also want to do the same thing with a job info.

59
00:03:47,040 --> 00:03:52,070
So let's go with job info, dress and an underscore.

60
00:03:52,080 --> 00:03:55,080
And again, we're creating the component again.

61
00:03:55,230 --> 00:03:56,400
Go with heading to you.

62
00:03:57,120 --> 00:04:03,540
And when you think it would be nice if there would be actual snippet 40 tag that you're also getting

63
00:04:03,810 --> 00:04:07,200
because at the moment we're just getting this just as a quick setup.

64
00:04:08,460 --> 00:04:08,770
Yeah.

65
00:04:08,880 --> 00:04:11,820
What we can do here, we can go with job info.

66
00:04:12,210 --> 00:04:12,690
All right.

67
00:04:12,720 --> 00:04:14,130
Let's save this one.

68
00:04:14,610 --> 00:04:17,519
And then in the index, here's what I want to do.

69
00:04:18,000 --> 00:04:19,980
I want to grab the search one.

70
00:04:20,310 --> 00:04:28,020
So search and I'm looking for the container first, and I want to do the same thing with a jobs container.

71
00:04:28,500 --> 00:04:30,480
Now why both of these runs?

72
00:04:30,480 --> 00:04:33,000
Well, because those ones will be displayed in the page.

73
00:04:33,480 --> 00:04:36,720
So again, I may do a bit of acrobatics.

74
00:04:38,040 --> 00:04:44,300
What I'm going to add to my export, and I think just to stay consistent, I'm going to add it to that

75
00:04:44,310 --> 00:04:44,610
again.

76
00:04:44,700 --> 00:04:47,430
There's no really need but whatever.

77
00:04:48,270 --> 00:04:49,440
I'm just OCD that way.

78
00:04:49,440 --> 00:04:52,260
OK, so we set up such container drops, containers beautiful.

79
00:04:52,660 --> 00:05:00,390
Then we want to navigate to the pages, looking more specifically to the dashboard correct than all

80
00:05:00,390 --> 00:05:00,960
jobs.

81
00:05:01,380 --> 00:05:02,910
And then let's import both of them.

82
00:05:03,390 --> 00:05:07,830
So we're going to go over here and we're going to look for our components.

83
00:05:08,400 --> 00:05:11,910
So let's go to content and then jobs container.

84
00:05:12,450 --> 00:05:16,710
And then the second one will be search container search container.

85
00:05:16,800 --> 00:05:18,030
Now that is coming from.

86
00:05:18,510 --> 00:05:23,070
And as a sign up, that's what happens when you work with.

87
00:05:23,070 --> 00:05:27,630
Common areas are constantly instead of import, keep using cost.

88
00:05:28,740 --> 00:05:32,970
So let me go here with from and learn more specifically.

89
00:05:33,210 --> 00:05:38,100
We're going to levels up in this case, and we want to look for two components.

90
00:05:38,100 --> 00:05:41,700
One, I'm like, I said, I'm just going to go with fragment in this case.

91
00:05:42,360 --> 00:05:43,680
So where's that?

92
00:05:43,680 --> 00:05:45,510
There's going to be no data of nothing like that.

93
00:05:45,900 --> 00:05:47,460
I'm not sure we want to go with both.

94
00:05:48,000 --> 00:05:50,640
We want to start with our search container.

95
00:05:51,840 --> 00:05:54,690
Let's close it and then we want to do the same thing.

96
00:05:55,020 --> 00:05:56,580
We have a jobs container.

97
00:05:57,900 --> 00:06:02,100
So let's set this one up, and let's right away double check what we have.

98
00:06:02,610 --> 00:06:10,200
And if you can see search component and jobs container, that means that everything is correct and now

99
00:06:10,210 --> 00:06:13,380
we can start working on the jobs container.