1
00:00:00,680 --> 00:00:05,090
In the last section we able to handle an error occurring during our geolocation requests.

2
00:00:05,220 --> 00:00:09,450
But like I mentioned at the end it's probably not for the best for us to just put the word air right

3
00:00:09,450 --> 00:00:10,030
here.

4
00:00:10,050 --> 00:00:12,560
It's definitely pretty unsettling for our users.

5
00:00:12,750 --> 00:00:17,270
So in this section we're going to figure out how to handle the case in which we do not have an air where

6
00:00:17,280 --> 00:00:18,610
the case in which we do.

7
00:00:18,990 --> 00:00:24,720
Now I want to first begin by thinking about all the different combinations of state that we can have

8
00:00:24,720 --> 00:00:27,240
inside of our Complan right now in total.

9
00:00:27,270 --> 00:00:32,720
There's three different combinations of latitude in air message that we could run into.

10
00:00:32,880 --> 00:00:38,540
So we can run into a situation where we have a latitude but we do not have an error message.

11
00:00:38,790 --> 00:00:43,160
If we have a latitude and no error message we probably want to show the user our latitude.

12
00:00:43,260 --> 00:00:44,710
You know it just prints on the screen.

13
00:00:44,880 --> 00:00:48,020
Remember that the final version of our app is not going to show the latitude.

14
00:00:48,120 --> 00:00:54,060
But right now let's just try to show the lead to then the second case we might have our latitude or

15
00:00:54,060 --> 00:00:56,800
something not have the latitude but we might have an error.

16
00:00:56,820 --> 00:01:00,740
So this would occur in the case that a user denied our geolocation request.

17
00:01:01,020 --> 00:01:07,410
So if that's the case then I want to show the error and not show the latitude not even show the TX latitude

18
00:01:07,440 --> 00:01:08,510
or anything like that.

19
00:01:08,520 --> 00:01:13,770
I just want to show an error message by itself and then finally I also want to handle the case in which

20
00:01:13,770 --> 00:01:20,760
our application is still loading up and still making that geolocation request remember right now I am

21
00:01:21,300 --> 00:01:23,130
faking my location.

22
00:01:23,160 --> 00:01:27,840
So whenever I do a request you see that it loads up instantaneously and I'm doing this just so that

23
00:01:27,870 --> 00:01:32,220
as you see me doing this work you don't have to sit around and watch me wait for five seconds for something

24
00:01:32,220 --> 00:01:33,170
to show up.

25
00:01:33,180 --> 00:01:39,120
But when the user first uses our application it is going to take about two three four or five seconds

26
00:01:39,270 --> 00:01:41,980
for something to load up during that time.

27
00:01:42,000 --> 00:01:46,680
We probably want to tell the user that they are waiting for something we want to let them know hey like

28
00:01:46,800 --> 00:01:47,810
just hold on a second.

29
00:01:47,880 --> 00:01:50,430
We're going to show you something interesting in just a moment.

30
00:01:50,700 --> 00:01:53,750
So I want to handle all three of these different scenarios.

31
00:01:54,770 --> 00:02:00,730
So to do so we're going to flip back over to my code editor and we're going to find my render method.

32
00:02:00,780 --> 00:02:07,350
So in order to kind of conditionally return some different GSX all we have to do is put a simple collection

33
00:02:07,410 --> 00:02:10,140
of statements into this render method.

34
00:02:10,140 --> 00:02:13,470
Now this is going to be the most simple and straightforward way of doing this.

35
00:02:13,530 --> 00:02:17,720
And we're going to eventually come back and refactor it into a slightly more elegant way.

36
00:02:17,730 --> 00:02:19,350
But let's start simple.

37
00:02:19,630 --> 00:02:24,360
So I'm going to delete everything inside the render method for right now and I'll put in three different

38
00:02:24,360 --> 00:02:25,350
statements actually.

39
00:02:25,350 --> 00:02:27,060
And what does two if statements.

40
00:02:27,060 --> 00:02:31,410
First off I will say if we have an error message

41
00:02:34,570 --> 00:02:45,780
and we did not have a latitude then I want to return a diff that contains my error message.

42
00:02:45,810 --> 00:02:53,770
So I'll say error this state error message like so so that's going to handle this case right here the

43
00:02:53,770 --> 00:02:56,730
case in which we do not have a latitude but we have an error message.

44
00:02:56,740 --> 00:02:59,360
So in that case I want to show an air.

45
00:02:59,560 --> 00:03:04,810
So if we have an error message and know that great show The air is straightforward enough.

46
00:03:04,810 --> 00:03:08,210
So now I'll get myself a little bit space I'll put down my next statement.

47
00:03:08,310 --> 00:03:12,070
I'll say if I do not have an error message

48
00:03:15,390 --> 00:03:20,720
and I have a latitude so nervous in this case I don't have the knot on there.

49
00:03:20,780 --> 00:03:23,190
I've got the knot right there in the knot right there.

50
00:03:23,340 --> 00:03:29,440
So if I have a latitude then I want to return a div with the latitude.

51
00:03:29,590 --> 00:03:33,450
This does LET.

52
00:03:33,540 --> 00:03:37,860
And then finally for the third case down here this would be the scenario in which I have no latitude

53
00:03:37,890 --> 00:03:40,860
and no no error message I want to show loading.

54
00:03:40,860 --> 00:03:46,260
So for this case down here this would be kind of like a catchall I could turn these into some if else

55
00:03:46,260 --> 00:03:48,580
statements then put an else for the final case.

56
00:03:48,630 --> 00:03:52,630
But personally I like to just do if statements with returns in them and then for the final Keystone

57
00:03:52,710 --> 00:03:54,410
here I don't really need an if statement.

58
00:03:54,420 --> 00:04:00,090
I can just say if we failed these two checks then chances are we have neither latitude nor error message.

59
00:04:00,090 --> 00:04:05,880
So I'll say simply return a div that says Loading.

60
00:04:06,100 --> 00:04:09,420
Like so OK so that's it.

61
00:04:09,420 --> 00:04:12,490
Now this right here is what I refer to as conditional rendering.

62
00:04:12,660 --> 00:04:18,200
We are returning different GSX depending upon the state or the props of our components.

63
00:04:18,420 --> 00:04:22,500
We're going to use conditional rendering quite a bit throughout this course and this is the most simple

64
00:04:22,500 --> 00:04:24,310
and straightforward way to go about it.

65
00:04:24,470 --> 00:04:28,920
Even in this application once we understand how this block right here works we're going to refactor

66
00:04:28,920 --> 00:04:32,410
it into something that looks a little bit nicer than what you see.

67
00:04:32,430 --> 00:04:34,980
All right so I'm gonna flip back or my browser.

68
00:04:35,040 --> 00:04:39,900
Now I see that I already have my latitude on here I can do another refresh and I see just the latitude

69
00:04:39,900 --> 00:04:40,980
by itself.

70
00:04:41,010 --> 00:04:43,430
So let's test out the two other scenarios here.

71
00:04:43,440 --> 00:04:49,890
I'm going to reset my location by setting it to ask default and then reload the page.

72
00:04:49,890 --> 00:04:57,120
Now in the background here we do not yet have a error message or a latitude so I know this darn pop

73
00:04:57,120 --> 00:04:58,240
up right here makes it hard to see.

74
00:04:58,260 --> 00:05:03,360
But again I do an inspect you'll see that it says right there loaded and well I mean you can see the

75
00:05:03,360 --> 00:05:04,110
background.

76
00:05:04,530 --> 00:05:06,090
So I do not have an error message.

77
00:05:06,120 --> 00:05:13,150
I do not have a lot of tude so I'm going show loading but if I then allow it's going to turn into latitude.

78
00:05:13,620 --> 00:05:17,440
And now I'll try the other case so I'll do another Ask default.

79
00:05:17,580 --> 00:05:18,990
I will refresh.

80
00:05:18,990 --> 00:05:21,150
Now I'm going to block it this time around.

81
00:05:21,360 --> 00:05:23,130
And now I see the error instead.

82
00:05:23,900 --> 00:05:25,850
OK so that's pretty much it.

83
00:05:25,860 --> 00:05:29,020
So now we now have a better idea of how to do conditional rendering.

84
00:05:29,020 --> 00:05:33,310
And like I said this is something we're going to practice many many times throughout this course.

85
00:05:33,330 --> 00:05:34,770
All right so let's take a quick pause right here.

86
00:05:34,770 --> 00:05:37,500
We'll continue in the next section and will continue working on our.