1
00:00:02,350 --> 00:00:06,760
So we spent some time on the input but handling user input is important,

2
00:00:06,760 --> 00:00:09,970
you want to do it in a way that feels natural to the user,

3
00:00:09,970 --> 00:00:11,470
that makes sense to the user

4
00:00:11,590 --> 00:00:17,000
and where you'll never trust your user and you always validate what the user enters

5
00:00:17,020 --> 00:00:19,750
and we'll dive deeper into this whole validation thing,

6
00:00:19,750 --> 00:00:24,760
user input handing things later in the course where we also accept more complex input than a simple

7
00:00:24,760 --> 00:00:25,520
number

8
00:00:25,540 --> 00:00:31,030
but for now, this was a great first look at how you can style such an input and how you can make sure

9
00:00:31,210 --> 00:00:37,910
you get the data you need. With that, I don't know about you but I think it's time to also progress

10
00:00:37,920 --> 00:00:40,710
with our game because we're kind of stuck here,

11
00:00:40,710 --> 00:00:45,600
these are all important steps but we're not really progressing with our game or with our app here.

12
00:00:45,600 --> 00:00:49,520
So let's make sure we do that as a next step and for that,

13
00:00:49,530 --> 00:00:56,690
why don't we make sure that our buttons do something? Let's start with the reset button real quick because

14
00:00:56,690 --> 00:00:58,760
that will be a simple one. When you press it,

15
00:00:58,790 --> 00:01:04,400
I of course simply want to reset the entered value. So I'll register a new function up there in the start

16
00:01:04,410 --> 00:01:10,310
game screen component, name it reset input handler and that's just the naming convention I like, name

17
00:01:10,310 --> 00:01:17,450
these functions which are triggered upon a user event something handler at the end just to make it clear

18
00:01:17,450 --> 00:01:19,840
that these handle certain events,

19
00:01:19,970 --> 00:01:26,210
it's not a must do, just a preference I have for React apps in general and therefore also for React Native

20
00:01:26,210 --> 00:01:27,040
apps.

21
00:01:27,260 --> 00:01:34,040
This will be a function which then calls set entered value which is our state setting function here

22
00:01:34,220 --> 00:01:39,370
to update the state we feed back into the input and set this to an empty string

23
00:01:39,460 --> 00:01:46,690
and yes, with that we can connect this to the reset button here, onPress should now simply execute

24
00:01:46,700 --> 00:01:49,540
the reset input handler like that.

25
00:01:49,700 --> 00:01:50,780
Let's give it a quick try,

26
00:01:50,780 --> 00:01:53,760
let's enter something here, reset and it's gone,

27
00:01:53,780 --> 00:01:55,110
that's looking good

28
00:01:55,310 --> 00:01:57,440
and also make sure that

29
00:01:57,470 --> 00:01:58,790
this button here, the confirm

30
00:01:58,790 --> 00:02:09,390
button does something. For that, I'll add another button, confirm input handler and we could simply start

31
00:02:09,420 --> 00:02:12,600
the game immediately here but also just to practice this,

32
00:02:12,600 --> 00:02:20,030
I want to give the user one final chance of changing his choice, so here I just want to kind of output a

33
00:02:20,200 --> 00:02:21,090
this is your choice,

34
00:02:21,090 --> 00:02:27,050
do you want to start message, where then the user gets a button to start the game, just an extra step

35
00:02:27,360 --> 00:02:30,910
so we have some extra practice here. For that,

36
00:02:30,930 --> 00:02:38,800
I'll add a new state which manages the has the user confirmed yet state and initially, that is false

37
00:02:38,910 --> 00:02:43,020
but of course we can change this and we want to be able to get the current state.

38
00:02:43,020 --> 00:02:45,980
So here we get whether the user has confirmed or not

39
00:02:45,990 --> 00:02:52,410
and we can set this confirmed state with that second element in the array we're extracting. So down

40
00:02:52,410 --> 00:03:00,160
there in confirm input handler, I set confirm to true, on the reset input handler by the way, I set this

41
00:03:00,160 --> 00:03:05,710
to false because if the user clicks reset, the user certainly has to confirm the values so we should reset

42
00:03:05,710 --> 00:03:09,110
this and then here in the confirm input handler,

43
00:03:09,160 --> 00:03:12,750
I also want to do two different things, two other things.

44
00:03:12,880 --> 00:03:20,530
One is reset the entered value but also of course save the entered value as the value with which we would

45
00:03:20,530 --> 00:03:22,300
start the game.

46
00:03:22,390 --> 00:03:24,840
We can do that with yet another state

47
00:03:24,880 --> 00:03:34,430
we're managing which initially holds nothing, has no value, is undefined initially because that should

48
00:03:34,430 --> 00:03:40,370
be the selected number and that should now also really be a number and not some text.

49
00:03:40,910 --> 00:03:44,400
So here, we have the selected number and a function to set it

50
00:03:44,480 --> 00:03:51,560
and when the user clicked confirm before I reset my entered value, though this here will all be batched

51
00:03:51,610 --> 00:03:57,290
together anyway so we can also use the entered value here after setting it to an empty string because

52
00:03:57,470 --> 00:04:02,540
this will only be done in the next render cycle and not immediately after this line is executed.

53
00:04:02,540 --> 00:04:07,530
So we can still safely execute or access this entered value thereafter if we want to

54
00:04:07,730 --> 00:04:17,930
because here, I want to set my entered value with parseInt by passing the entered value, so I set this

55
00:04:18,050 --> 00:04:19,300
to be my selected number

56
00:04:19,340 --> 00:04:24,980
and again, I can still access entered value here even though we reset it because this reset thing here

57
00:04:25,190 --> 00:04:30,740
will basically be queued by React and will only be processed the next time the component is rendered

58
00:04:30,740 --> 00:04:31,480
thereafter

59
00:04:31,580 --> 00:04:38,660
and these three state changes are all batched together to result in one render cycle, so we can safely

60
00:04:38,660 --> 00:04:42,850
access entered value here but we can also simply do it before we reset it,

61
00:04:42,860 --> 00:04:44,200
it does not matter.

62
00:04:44,210 --> 00:04:49,520
The important thing is however that we parse this as an integer so that we convert this text to a number

63
00:04:49,520 --> 00:04:57,050
here and actually, I'll add yet another extra step before I do that. Right at the beginning,

64
00:04:57,140 --> 00:05:00,410
I'll have my chosen number here which is that parsed number

65
00:05:00,410 --> 00:05:08,660
and before I do anything, I want to check if chosen number is not a number which is a default Javascript

66
00:05:08,660 --> 00:05:09,110
value,

67
00:05:09,110 --> 00:05:16,550
so if it somehow is still not a number even though we're trying to check for invalid characters or if

68
00:05:16,550 --> 00:05:20,730
chosen number is smaller or equal to zero.

69
00:05:21,200 --> 00:05:24,140
If it is, then I just want to return,

70
00:05:24,140 --> 00:05:25,430
I don't want to continue,

71
00:05:25,460 --> 00:05:31,580
so return will finish the function execution and will not confirm, will not use this as a value because

72
00:05:31,850 --> 00:05:33,710
the value is invalid,

73
00:05:33,830 --> 00:05:39,010
only positive numbers are allowed and no invalid numbers are allowed.

74
00:05:39,020 --> 00:05:46,340
In addition, I also want to add one extra check and check if the chosen number maybe is greater than

75
00:05:46,350 --> 00:05:48,770
99 because that would also not be allowed,

76
00:05:48,770 --> 00:05:56,600
I want to have a number between 1 and 99 and it should be a number. If it's not fitting that criteria,

77
00:05:56,840 --> 00:06:03,740
then we'll return, now otherwise we'll set this chosen number as the selected number and then reset the

78
00:06:03,740 --> 00:06:09,440
input and then these three set state calls will be batched together and the component will re-render and we'll

79
00:06:09,440 --> 00:06:17,790
have our new state that has this number taken into account as the selected number. So now we can connect

80
00:06:17,790 --> 00:06:23,700
the confirm input handler to the confirm button here and now some visual feedback would also be nice

81
00:06:23,700 --> 00:06:32,220
to see that confirming worked or to also get an error if we violated one of these rules here, so that

82
00:06:32,220 --> 00:06:34,440
we don't just return but also show an alert.

83
00:06:35,320 --> 00:06:41,870
Now let's maybe start with the feedback before we then work on the alert. For the feedback,

84
00:06:42,650 --> 00:06:51,710
here below this function but inside of our functional component, I want to check if we have confirmed and

85
00:06:51,710 --> 00:06:54,990
then set some special content that should be output.

86
00:06:55,010 --> 00:06:58,900
So here, we have the confirmed output which normally is just undefined

87
00:06:58,970 --> 00:07:07,340
but if we have confirmed, then confirmed output is some jsx code where we kind of summarize what the

88
00:07:07,340 --> 00:07:11,330
user entered and give the user the start game button.

89
00:07:11,330 --> 00:07:18,990
Now just to see whether it works, let's go that with some text here and just say chosen number and output

90
00:07:19,020 --> 00:07:22,470
the selected number here, selected number,

91
00:07:22,470 --> 00:07:25,700
this is our state we're managing here.

92
00:07:25,770 --> 00:07:32,100
So since we call set confirmed and so on, the component will re-render when this is chosen,

93
00:07:32,100 --> 00:07:38,010
so this whole component function will execute again and that means that confirmed will then be true

94
00:07:38,040 --> 00:07:43,470
for this next run because we set it to true here and therefore we'll set confirmed output to be that

95
00:07:43,500 --> 00:07:44,310
text

96
00:07:44,310 --> 00:07:51,820
and now we can add the confirmed output, let's say here below our card.

97
00:07:51,820 --> 00:07:57,340
So there I want to output the confirmed output and that's either undefined, not printing anything to the

98
00:07:57,340 --> 00:07:57,940
screen

99
00:07:58,060 --> 00:08:05,900
or it's this text. With that saved if we go back and I enter number and confirm it here, we see the

100
00:08:05,900 --> 00:08:06,410
number.

101
00:08:06,950 --> 00:08:10,210
If I enter something invalid like zero, we don't see it,

102
00:08:10,250 --> 00:08:15,360
so our check seems to work and a valid number is output though.

103
00:08:15,400 --> 00:08:19,200
Now that's not the final design I want to have but that proves that it works.

104
00:08:19,390 --> 00:08:26,170
Before we finalize this design, let's make sure that we also show an alert if something invalid is entered.