1
00:00:01,380 --> 00:00:06,030
All right, let's take care of data, air and loading, these are all three different pieces of state

2
00:00:06,030 --> 00:00:08,370
that we want to use to somehow customize the JSF.

3
00:00:08,490 --> 00:00:09,930
So we returning from this component.

4
00:00:10,470 --> 00:00:12,660
So this will be just some kind of basic Riak stuff.

5
00:00:13,150 --> 00:00:15,090
All I want to do is print out air.

6
00:00:15,090 --> 00:00:17,040
If there's an error, I want to print out loading.

7
00:00:17,040 --> 00:00:22,890
If we're loading and if we do not have an error and if we are not loading, I want to instead map over

8
00:00:22,890 --> 00:00:25,800
this data thing and print out all the different libraries that we just fetched.

9
00:00:26,950 --> 00:00:33,640
So down underneath our form, I'm going to add in a check, I'm going to say if air is defined, then

10
00:00:34,060 --> 00:00:35,470
go ahead and do an H three.

11
00:00:37,240 --> 00:00:42,970
That prints out er inside of it, so if er is null, then we are not going to show in three.

12
00:00:43,990 --> 00:00:49,330
We'll do something very similar for loading as well, if loading is true, then print out an H3.

13
00:00:51,620 --> 00:00:53,510
That says loading DataDot.

14
00:00:55,070 --> 00:01:00,620
And then finally, if there is no air and there is no loading.

15
00:01:01,710 --> 00:01:04,230
And just go ahead and print out.

16
00:01:05,360 --> 00:01:10,220
Our list of library names or package names, so I'll just put in here data, which will just take that

17
00:01:10,220 --> 00:01:13,400
entire rate and just print it out, we might get a warning around that.

18
00:01:13,670 --> 00:01:14,510
It's totally fine.

19
00:01:15,290 --> 00:01:17,090
So let's save this and do a quick test.

20
00:01:18,560 --> 00:01:19,340
Quick refresh.

21
00:01:20,830 --> 00:01:26,770
I'm going to look for react when I click on Search, I should see very briefly the text loading up your

22
00:01:26,770 --> 00:01:27,330
on the screen.

23
00:01:27,580 --> 00:01:28,390
Yep, there it is.

24
00:01:28,690 --> 00:01:32,020
And then I see my list of fetch packages printed up.

25
00:01:32,940 --> 00:01:38,880
Likewise, if I open up my network request tab, I'm going to find this no throttling dropdown right

26
00:01:38,880 --> 00:01:40,620
here, I'm going to change it to offline.

27
00:01:40,830 --> 00:01:42,840
That's going to stimulate an air with our request.

28
00:01:43,320 --> 00:01:47,970
So if I now change the text inside of here to anything else and then click on search, that's going

29
00:01:47,970 --> 00:01:49,530
to result in an error with the request.

30
00:01:49,980 --> 00:01:54,780
I'll then see our text updated right here to print out this error message we got back, which in this

31
00:01:54,780 --> 00:01:56,190
case is simply network error.

32
00:01:56,910 --> 00:01:59,340
I could change it back to no throttling.

33
00:02:00,870 --> 00:02:06,150
Search again, we see the loading and then nothing appears because in this case we got no actual matches

34
00:02:06,150 --> 00:02:10,710
for react, blah, blah, blah, but of course I can always search for react again and see those results

35
00:02:10,710 --> 00:02:11,039
appear.

36
00:02:12,250 --> 00:02:13,840
Well, that's pretty much it looks pretty good.

37
00:02:13,960 --> 00:02:17,920
Last thing we might want to do very quickly is just print out our list of best libraries a little bit

38
00:02:17,920 --> 00:02:18,910
better than we are right now.

39
00:02:19,360 --> 00:02:22,800
So for that, we might just do a very quick mapping statement.

40
00:02:22,810 --> 00:02:24,520
So I'll do a data map.

41
00:02:25,660 --> 00:02:26,770
I'll take name.

42
00:02:28,450 --> 00:02:30,640
And I'll just return a div.

43
00:02:31,930 --> 00:02:38,260
With name and side of it, but on a key prop, make sure the list warning is not printed.

44
00:02:40,640 --> 00:02:41,650
And that's pretty much it.

45
00:02:44,290 --> 00:02:46,990
So now we see all the different libraries burnt out on a separate line.

46
00:02:49,440 --> 00:02:55,290
Well, that is it, that is our example of Redox in typescript together, the big takeaways I want you

47
00:02:55,290 --> 00:02:55,890
to understand.

48
00:02:55,920 --> 00:02:59,970
Let's cover those the next video and just make sure that a couple of different aspects around this project

49
00:02:59,970 --> 00:03:01,440
are super crystal clear.