1
00:00:00,050 --> 00:00:00,410
All right.

2
00:00:00,410 --> 00:00:02,300
And once we're done working in the server.

3
00:00:02,300 --> 00:00:07,610
Now let's swing back to the front end and let's start setting up the search form.

4
00:00:07,610 --> 00:00:12,800
So for starters, we want to navigate to search container component.

5
00:00:12,980 --> 00:00:18,920
And of course I'll copy and paste the import and effectively we'll just set up some inputs.

6
00:00:18,920 --> 00:00:22,700
We'll provide some default values, we will provide the submit button.

7
00:00:22,700 --> 00:00:30,230
And also I want to set up the log in loader because I want to showcase something pretty impressive.

8
00:00:30,320 --> 00:00:33,140
So for starters, let me grab the imports again.

9
00:00:33,140 --> 00:00:35,900
I'm looking for the components.

10
00:00:36,170 --> 00:00:42,410
More specifically, I want to grab the search one, the search container over here.

11
00:00:42,410 --> 00:00:48,380
And as far as the imports, we want to grab the form row, form, row select as well as the submit button.

12
00:00:48,380 --> 00:00:51,680
But again, please keep in mind that it's just temporary.

13
00:00:51,710 --> 00:00:54,770
Eventually we will set up the.

14
00:00:55,440 --> 00:01:02,790
Onchange listener where every time we'll change the value in the input, we'll automatically make the

15
00:01:02,790 --> 00:01:04,140
request from the scratch.

16
00:01:04,140 --> 00:01:05,010
But not for now.

17
00:01:05,010 --> 00:01:08,820
I just want to showcase the default behavior of HTML forms.

18
00:01:08,820 --> 00:01:14,430
So all of these are coming from the same folder and therefore I can just go here with Dot and we also

19
00:01:14,460 --> 00:01:15,630
want to grab the wrapper.

20
00:01:15,630 --> 00:01:18,360
Remember, this is the dashboard form page.

21
00:01:18,540 --> 00:01:24,180
Also, we want to grab the form, use submit something we're going to use in this particular component,

22
00:01:24,210 --> 00:01:26,460
a link component as well.

23
00:01:26,460 --> 00:01:30,420
And then in this case, from the utils, basically we grab everything.

24
00:01:30,420 --> 00:01:38,790
So job type status and also the sort by and then at the very end we want to grab the use all jobs context

25
00:01:39,000 --> 00:01:42,690
and you'll see why we need that once we set up the functionality.

26
00:01:42,690 --> 00:01:49,350
So for starters, let's just navigate to our search container and one by one, let's set everything

27
00:01:49,350 --> 00:01:49,530
up.

28
00:01:49,530 --> 00:01:51,480
So I want to go here with the wrapper.

29
00:01:51,840 --> 00:01:56,620
Then inside of the wrapper, we're going to set up our form.

30
00:01:57,010 --> 00:01:59,350
Let's add a class form.

31
00:01:59,560 --> 00:02:03,880
Then inside of this component we want to go with heading five.

32
00:02:03,880 --> 00:02:09,910
Let's add a form title then as far as the value, I'm going to go with search.

33
00:02:10,729 --> 00:02:11,540
Form.

34
00:02:12,520 --> 00:02:16,330
And then we want to set up our form center.

35
00:02:16,600 --> 00:02:23,110
So we're going to go with dev form center and then one by one, let's set them up.

36
00:02:23,290 --> 00:02:26,170
First of all, I'm going to go with form Row.

37
00:02:27,170 --> 00:02:31,880
And in this case, type is going to be equal to a search.

38
00:02:32,030 --> 00:02:33,800
So it's not going to be text.

39
00:02:33,800 --> 00:02:35,110
It's actually a search.

40
00:02:35,120 --> 00:02:37,460
And this is straight up HTML.

41
00:02:38,030 --> 00:02:42,110
And effectively, it just provides a nice way how we can clear the values.

42
00:02:42,140 --> 00:02:47,900
Now, as far as the name, yes, it needs to basically match whatever we have on the server since we'll

43
00:02:47,900 --> 00:02:55,340
be adding this to a query string params, I want to make sure that the name is actually a search and

44
00:02:55,340 --> 00:02:58,730
yes, I'll go with some default value and I'll set it equal to a now.

45
00:02:58,760 --> 00:03:00,680
Most likely I'll remove it at the very end.

46
00:03:00,680 --> 00:03:01,670
But you know what?

47
00:03:01,670 --> 00:03:03,210
For now I want to use it.

48
00:03:03,230 --> 00:03:05,720
So let me just navigate back over here.

49
00:03:05,820 --> 00:03:07,670
Let me test whether everything works.

50
00:03:07,670 --> 00:03:10,040
And notice now I have my search form.

51
00:03:10,660 --> 00:03:11,860
It's my first input.

52
00:03:11,860 --> 00:03:16,060
And of course since the default value is a that's why I have it over here.

53
00:03:16,330 --> 00:03:17,290
Okay, awesome.

54
00:03:17,290 --> 00:03:24,730
So now let's add two select ones for job type and job status, and then at the very end we'll set up

55
00:03:24,730 --> 00:03:29,370
one for search or I'm sorry, one for the sort as well.

56
00:03:29,380 --> 00:03:32,430
So we want to look for form row select.

57
00:03:32,440 --> 00:03:33,910
That's my component.

58
00:03:33,940 --> 00:03:36,040
Then I want to go with label text.

59
00:03:36,040 --> 00:03:40,960
Since I have Camelcase here, I'll call this job status then.

60
00:03:40,960 --> 00:03:41,710
Name?

61
00:03:41,710 --> 00:03:42,190
Yes.

62
00:03:42,190 --> 00:03:48,520
It's going to be job status just like we had before and when it comes to list.

63
00:03:48,520 --> 00:03:52,510
So we're importing the values from the constants.

64
00:03:52,510 --> 00:03:53,050
Correct.

65
00:03:53,140 --> 00:03:58,900
But keep in mind that in the constants we don't have this all option, but we definitely want to use

66
00:03:58,900 --> 00:04:05,020
it because I don't want to limit all the time my search to a specific status value, correct.

67
00:04:05,860 --> 00:04:07,680
Remembering the constants over here.

68
00:04:07,690 --> 00:04:13,090
We only have pending interview in the client, so we don't have all but we definitely want to use it.

69
00:04:13,390 --> 00:04:18,800
And the way we'll set it up, remember, we're passing in the array and we can nicely hardcode.

70
00:04:18,850 --> 00:04:21,399
So we'll say, you know what, I'll pass in the array.

71
00:04:21,430 --> 00:04:22,630
Yeah, that's correct.

72
00:04:22,630 --> 00:04:25,960
And in here the first value actually is going to be all.

73
00:04:25,960 --> 00:04:31,750
And then I'll spread out object dot values and just like we did before.

74
00:04:31,750 --> 00:04:35,020
And in this case, of course, we're looking for job status.

75
00:04:35,020 --> 00:04:39,940
And as a result, you'll notice that we'll get that extra all value.

76
00:04:39,940 --> 00:04:44,950
And at the very, very end we want to go with default value and I'll set it equal to all.

77
00:04:44,950 --> 00:04:47,860
So by default, that's the value I'm going to use.

78
00:04:47,860 --> 00:04:50,500
So now we want to copy and paste.

79
00:04:50,500 --> 00:04:53,500
So this one will be for job type.

80
00:04:53,500 --> 00:04:54,790
So let me just.

81
00:04:55,440 --> 00:04:56,640
Change it over here.

82
00:04:56,670 --> 00:04:57,930
Job type.

83
00:04:58,580 --> 00:05:00,110
Job type over here.

84
00:05:00,530 --> 00:05:03,740
And then also we want to change this one.

85
00:05:04,290 --> 00:05:05,670
So our job type.

86
00:05:05,910 --> 00:05:09,270
As far as the default value, yep, it's going to be equal to all.

87
00:05:09,310 --> 00:05:13,180
Then let's go with form row select only.

88
00:05:13,200 --> 00:05:15,420
In this case we're looking for the sort one.

89
00:05:15,420 --> 00:05:21,660
So form row select name equals to sort then default value.

90
00:05:21,720 --> 00:05:23,190
Well, I'm going to go with newest.

91
00:05:23,190 --> 00:05:25,650
So in this case we don't want to provide all.

92
00:05:25,920 --> 00:05:32,150
So yes, in this case we only have four options and I'm just going to stick to the newest one.

93
00:05:32,160 --> 00:05:34,830
Then as far as the list, same deal.

94
00:05:34,830 --> 00:05:37,740
We go over here with our array.

95
00:05:38,580 --> 00:05:40,530
So let's pass it in.

96
00:05:40,650 --> 00:05:45,570
And then dot, dot, dot and then object dot values.

97
00:05:45,570 --> 00:05:48,720
And then we're looking for job sort by.

98
00:05:48,990 --> 00:05:51,300
I think we can close this component.

99
00:05:51,300 --> 00:05:52,620
And then like I said.

100
00:05:53,350 --> 00:05:54,340
Temporarily.

101
00:05:54,340 --> 00:05:56,950
We will set up the submit button.

102
00:05:56,950 --> 00:06:03,910
So still within this div, let me add them here because again, eventually we will set up a different

103
00:06:03,910 --> 00:06:04,570
logic.

104
00:06:04,570 --> 00:06:10,570
But for now I just want to go with submit button since it's in the form I'll provide over here this

105
00:06:10,570 --> 00:06:11,110
parameter.

106
00:06:11,140 --> 00:06:12,280
Let me close it.

107
00:06:12,280 --> 00:06:18,790
And then also let's add a link which is just going to navigate back to the all jobs.

108
00:06:18,790 --> 00:06:23,350
And I fully understand if it's going to look somewhat iffy right now.

109
00:06:23,380 --> 00:06:24,970
Don't worry, we'll get to it.

110
00:06:24,970 --> 00:06:31,060
Once you understand how in HTML we pass in the query params, it will make all of the sense in the world.

111
00:06:31,060 --> 00:06:37,510
So for now, above the submit button, we want to go here with link to where we want to navigate.

112
00:06:37,510 --> 00:06:43,900
And in my case I'm going to go with Dashboard then forward slash all jobs basically back to the same

113
00:06:43,900 --> 00:06:44,290
page.

114
00:06:44,290 --> 00:06:51,130
Yes, like I said, at the moment it looks a little bit iffy, but don't worry, you'll see why we need

115
00:06:51,130 --> 00:06:52,750
that in a few videos.

116
00:06:52,780 --> 00:06:59,570
Then we want to go with button, then form BTN and also we want to go with delete BTN.

117
00:06:59,720 --> 00:07:02,180
Let's close it or you know what?

118
00:07:02,210 --> 00:07:08,630
No, we want to set up the text and I'll just say reset search values.

119
00:07:08,630 --> 00:07:10,970
And at the very, very, very end.

120
00:07:11,000 --> 00:07:14,960
Now let's navigate to All Jobs page.

121
00:07:15,140 --> 00:07:18,440
Like I said in Loader, let's set up that log.

122
00:07:19,140 --> 00:07:21,030
So we're looking for all jobs.

123
00:07:21,210 --> 00:07:24,360
And anywhere here in the loader, it doesn't really matter where.

124
00:07:24,750 --> 00:07:25,950
Let's just type here.

125
00:07:25,950 --> 00:07:26,720
Hello.

126
00:07:26,730 --> 00:07:30,990
And now let's navigate to a browser and notice something interesting.

127
00:07:30,990 --> 00:07:42,090
So by default, if there is no method post on the form in the HTML, actually browser makes the get

128
00:07:42,090 --> 00:07:51,500
request back to the same URL and provides input values as query string parameters.

129
00:07:51,510 --> 00:07:53,730
So take a look at two things.

130
00:07:54,000 --> 00:07:57,210
Take a look at the URL and take a look at the console.

131
00:07:57,210 --> 00:08:00,570
And again for now we'll use this temporary submit button.

132
00:08:00,570 --> 00:08:01,950
So check it out.

133
00:08:01,980 --> 00:08:03,870
First of all, I see the hello.

134
00:08:03,870 --> 00:08:07,080
And essentially it means that we made another request.

135
00:08:07,080 --> 00:08:07,500
Correct.

136
00:08:07,500 --> 00:08:12,390
Back to our page, back to our dashboard all jobs page.

137
00:08:12,390 --> 00:08:15,570
And also notice the URL.

138
00:08:15,600 --> 00:08:22,270
We nicely provide all of the input values here as query string parameters.

139
00:08:22,270 --> 00:08:27,280
Now, of course, we haven't made the request back to the database using these values.

140
00:08:27,280 --> 00:08:28,630
That is coming up.

141
00:08:28,630 --> 00:08:36,220
But again, this is already a giant step because now we know that by default if the method is not post.

142
00:08:36,860 --> 00:08:43,970
Browser is going to make a get request back to the same URL and essentially React router.

143
00:08:43,970 --> 00:08:46,490
Dom is just implementing that logic.

144
00:08:46,490 --> 00:08:53,900
Remember, every time there was a method post, it was sending a post request back to the same URL.

145
00:08:53,930 --> 00:08:59,280
Unless we use the action like we did when we deleted the job.

146
00:08:59,300 --> 00:09:07,100
Now, in this case, since it's a get request, React router just implements the straight up HTML form

147
00:09:07,100 --> 00:09:07,970
behavior.