1
00:00:00,750 --> 00:00:04,980
As I've mentioned a couple of times now, we have finished up more or less a lot of the right side of

2
00:00:04,980 --> 00:00:08,460
our project, so we're going to start to connect a lot of that to the back side of things.

3
00:00:08,920 --> 00:00:13,730
I'm going to first begin by going into our components Aptos file at the very top.

4
00:00:13,740 --> 00:00:17,880
I'm going to import provider from REACT Redux.

5
00:00:18,060 --> 00:00:21,960
Remember, this is a component that we're going to use to get access to our Redock store throughout

6
00:00:21,960 --> 00:00:29,190
all of our different components and then going to also import store from up one directory state.

7
00:00:30,030 --> 00:00:31,470
So this is kind of the nice thing.

8
00:00:31,470 --> 00:00:36,360
By exporting all of our reduc stuff from that index status file, we don't really have to worry about

9
00:00:36,360 --> 00:00:40,020
digging through that state directory now to find our store or anything like that.

10
00:00:40,020 --> 00:00:44,100
We can just get all the different things we ever need to import from importing state.

11
00:00:44,160 --> 00:00:44,670
That's it.

12
00:00:46,000 --> 00:00:51,730
Once we've got all that stuff imported and then going to replace that one right there with provider.

13
00:00:53,970 --> 00:01:00,060
I'm going to provide a store argument or store up to it of store, and then we can start to show some

14
00:01:00,060 --> 00:01:01,260
content inside of here.

15
00:01:04,720 --> 00:01:07,360
Right now, I'm going to show how about some text of.

16
00:01:08,310 --> 00:01:12,450
And one that says search for a.

17
00:01:13,460 --> 00:01:18,170
Repository, let's call it package, because, again, that's technically what it is, and then after

18
00:01:18,170 --> 00:01:23,450
that, each one we can show some kind of new component, maybe we'll call it repository search repositories

19
00:01:23,450 --> 00:01:24,530
list or something like that.

20
00:01:24,690 --> 00:01:26,180
Let's just call it repositories list.

21
00:01:27,270 --> 00:01:29,610
We'll call it repositories list.

22
00:01:30,700 --> 00:01:36,250
So this will be a new component and that's going to contain all the logic around text input, searching,

23
00:01:36,250 --> 00:01:41,260
getting the information back out of Redox and eventually rendering a list of repositories onto the screen.

24
00:01:42,530 --> 00:01:46,150
I'm going to import that component, even though we haven't created it just yet.

25
00:01:48,160 --> 00:01:49,990
From repositories.

26
00:01:51,180 --> 00:01:54,500
List, then let's go and create that file right away.

27
00:01:55,140 --> 00:02:01,770
So inside of our components directory, I'll add in repositories such a tough word to spell list.

28
00:02:02,560 --> 00:02:03,080
There we go.

29
00:02:04,770 --> 00:02:05,490
Inside of here.

30
00:02:06,520 --> 00:02:07,390
I'll create.

31
00:02:08,610 --> 00:02:09,479
Hostelries list.

32
00:02:12,080 --> 00:02:19,370
I'm going to annotate this function as react F.C. functional component, and then I will export default.

33
00:02:22,190 --> 00:02:24,020
Repositories list at the bottom.

34
00:02:25,200 --> 00:02:28,830
Right now, inside that component, I'm going to return a div.

35
00:02:30,850 --> 00:02:34,710
But a form element inside there, why not let's just kind of get started on this thing.

36
00:02:37,000 --> 00:02:39,610
Inside the forum, I'll add a text input.

37
00:02:41,100 --> 00:02:45,000
A button right after it and I'll give the button the text search.

38
00:02:47,690 --> 00:02:52,790
OK, a lot of very fast typing there, but a lot of this stuff is kind of rote, just putting basic

39
00:02:52,790 --> 00:02:53,780
component stuff together.

40
00:02:54,470 --> 00:02:56,350
So let's say this go back over to our browser.

41
00:02:56,360 --> 00:02:58,730
Just make sure everything is showing up as expected.

42
00:02:59,610 --> 00:03:02,070
All right, so it looks like we might have a little air here.

43
00:03:02,670 --> 00:03:04,580
I completely made a little mistake.

44
00:03:04,590 --> 00:03:09,000
There is one last thing I wanted to talk about around the reducer, and I really just missed out on

45
00:03:09,000 --> 00:03:09,240
that.

46
00:03:09,460 --> 00:03:11,000
So let's take a quick pause right here.

47
00:03:11,010 --> 00:03:16,500
All we have to do is go back over to reduce her and add in a initial state or our state argument.

48
00:03:16,500 --> 00:03:16,950
That's all.

49
00:03:16,950 --> 00:03:20,250
Just a little thing, a little technicality that I just missed out on entirely.

50
00:03:20,500 --> 00:03:21,410
I apologize for that.

51
00:03:21,420 --> 00:03:23,030
So let's take care of that in just a moment.