1
00:00:00,200 --> 00:00:02,850
All right, so now let's render our jobs.

2
00:00:02,870 --> 00:00:05,450
Now we'll start nice and slow.

3
00:00:05,480 --> 00:00:09,700
We're just going to display some kind of element for each job.

4
00:00:09,710 --> 00:00:12,980
And then, of course, we'll work on the proper return.

5
00:00:13,010 --> 00:00:17,300
For starters, we want to create a new component, and this is going to be job.

6
00:00:17,540 --> 00:00:21,920
So this is where we're going to display info about each job.

7
00:00:21,950 --> 00:00:28,010
It's going to be JSX and we don't need to actually set up the export.

8
00:00:28,010 --> 00:00:31,190
So this is not something we're going to use globally.

9
00:00:31,190 --> 00:00:36,410
Basically in our pages, we're going to use it only in the jobs container.

10
00:00:36,410 --> 00:00:38,420
So this is going to be equal to job.

11
00:00:38,420 --> 00:00:42,470
And in my case, I'm going to set it equal to heading three, for example.

12
00:00:42,800 --> 00:00:43,540
Okay, good.

13
00:00:43,550 --> 00:00:45,830
Then let's navigate to Jobs container.

14
00:00:45,830 --> 00:00:48,320
And we want to set up two imports.

15
00:00:48,320 --> 00:00:50,480
First of all, we want to grab the job.

16
00:00:51,180 --> 00:00:53,250
Essentially the component we just created.

17
00:00:53,250 --> 00:01:00,330
Then we want to grab the wrapper and yes, it's going to give me a bunch of suggestions, but we're

18
00:01:00,330 --> 00:01:02,010
not looking for big sidebar.

19
00:01:02,690 --> 00:01:07,070
Essentially the component name is Jobs container.

20
00:01:07,100 --> 00:01:08,480
Our styled component.

21
00:01:08,480 --> 00:01:12,620
And then also let's grab that use all jobs context.

22
00:01:12,620 --> 00:01:14,990
And I think this is the case where I can.

23
00:01:15,950 --> 00:01:17,590
Rely on auto import.

24
00:01:17,600 --> 00:01:24,500
So let's invoke this is going to get us that data and we'll right away the structure it.

25
00:01:25,060 --> 00:01:31,240
So again, the reason why we have access to it because in the all jobs, remember, we're getting data

26
00:01:31,240 --> 00:01:34,250
from loader and now we're just pass it down.

27
00:01:34,270 --> 00:01:37,840
So now in the jobs container, I want to access it.

28
00:01:37,840 --> 00:01:40,570
And of course I'll set up my functionality.

29
00:01:40,630 --> 00:01:47,530
Now, not only we're going to grab the data, but we'll also destructure jobs here and we'll set it

30
00:01:47,530 --> 00:01:49,510
equal to our data.

31
00:01:49,510 --> 00:01:56,260
And then first let's just set up a logic where if we have no jobs, I want to simply display heading

32
00:01:56,290 --> 00:01:58,690
two with some kind of text.

33
00:01:58,780 --> 00:02:02,230
So let's go here with if then jobs length.

34
00:02:02,560 --> 00:02:10,360
So essentially, if we have nothing in the array, if it's equal to zero, then we want to go with return.

35
00:02:12,110 --> 00:02:13,910
And we're going to go with rapper.

36
00:02:14,940 --> 00:02:17,700
And instead of the wrapper, let's place a heading two.

37
00:02:18,000 --> 00:02:21,480
And let's just say no jobs to display.

38
00:02:21,510 --> 00:02:22,560
Dot, dot, dot.

39
00:02:22,770 --> 00:02:23,520
Okay, good.

40
00:02:23,550 --> 00:02:25,890
And then if everything is correct.

41
00:02:27,120 --> 00:02:27,840
Pretty much.

42
00:02:27,840 --> 00:02:29,640
I want to return the same wrapper.

43
00:02:29,640 --> 00:02:31,650
So that is not going to change.

44
00:02:31,650 --> 00:02:36,690
However, inside of the wrapper, we want to go with Div with a class of jobs.

45
00:02:36,690 --> 00:02:40,380
And then in here let's iterate over, let's say jobs.

46
00:02:40,380 --> 00:02:41,390
So that's our array.

47
00:02:41,400 --> 00:02:47,100
Then we're going to go with map and then inside of this callback function I'll reference each and every

48
00:02:47,100 --> 00:02:49,080
job as job because why not?

49
00:02:49,410 --> 00:02:55,860
And as far as the return, we want to go with job component, then key is going to be equal to job and

50
00:02:55,860 --> 00:03:00,000
ID remember that's the property of course we're getting from Mongo.

51
00:03:00,000 --> 00:03:04,740
And as a side note, this needs to be underscore ID, that's more correct.

52
00:03:04,740 --> 00:03:08,310
And then also I want to pretty much pass all of the properties.

53
00:03:08,310 --> 00:03:10,950
So I'm going to go here with dot, dot, dot and then job.

54
00:03:10,960 --> 00:03:14,460
So I'm spreading them out and if everything is correct.

55
00:03:15,090 --> 00:03:21,010
We should see, at least in my case, quite a few of those heading twos or heading threes.

56
00:03:21,030 --> 00:03:23,880
I don't remember which one I set up and check it out.

57
00:03:23,910 --> 00:03:31,740
Of course I have right now the search container and also at the moment the job container just consists

58
00:03:31,740 --> 00:03:34,010
of a bunch of job components.

59
00:03:34,020 --> 00:03:40,650
And if you have the same result, we are moving in the right direction and we can proceed to the next

60
00:03:40,650 --> 00:03:41,310
step.