1
00:00:00,690 --> 00:00:03,870
In the last section we spoke about the three outstanding tasks we have.

2
00:00:03,870 --> 00:00:07,020
So we've got to make sure that this button actually send some survey.

3
00:00:07,020 --> 00:00:10,920
We need to make sure that when user clicks that they get navigated back over to our dashboard.

4
00:00:11,130 --> 00:00:15,660
And then finally if the user clicks the cancel button over here and then goes back to the form I want

5
00:00:15,660 --> 00:00:17,660
to clear out all the form values.

6
00:00:18,000 --> 00:00:22,050
So I think that third item handling these form values being cleared out when the user clicks cancel

7
00:00:22,290 --> 00:00:24,280
is going to the easiest and the most straightforward.

8
00:00:24,300 --> 00:00:26,940
So it's take care of that inside the section.

9
00:00:26,970 --> 00:00:32,700
Now when we think about clearing out the form values I want to remind you that at present if we open

10
00:00:32,700 --> 00:00:38,600
up our survey form that G-S file and scroll down to the very bottom we've got the redux form helper

11
00:00:38,600 --> 00:00:46,240
in here where we had specifically said if this component is unmounted do not clear out the form values.

12
00:00:46,350 --> 00:00:47,360
Just keep them around.

13
00:00:47,370 --> 00:00:52,180
Assume that we want to come back to this thing assume we want to see it at some point in the future.

14
00:00:52,200 --> 00:00:56,320
And so now clearly that's not really quite the case 100 percent of the time.

15
00:00:56,370 --> 00:01:02,620
If I click Cancel I am now unmounting the component and really I would want to clear out the form values.

16
00:01:02,910 --> 00:01:07,710
Now you might be thinking OK Stephen that's really fine maybe let's add a click event handler to the

17
00:01:07,710 --> 00:01:12,890
cancel button right here and whenever a user clicks it lets just clear all the formalities manually.

18
00:01:13,010 --> 00:01:16,620
And I'm thinking about that and I'm thinking you know maybe that would work.

19
00:01:16,650 --> 00:01:21,750
However I want you to kind of think about something deeply right now remember that we've got a bunch

20
00:01:21,750 --> 00:01:24,800
of other links that we might have up inside of our.

21
00:01:25,170 --> 00:01:30,090
And so the cancel button right here is not the only way in which a user might navigate away from our

22
00:01:30,090 --> 00:01:30,870
form.

23
00:01:31,080 --> 00:01:36,660
The user might click on some other navigational link up here and they will navigate away from the form

24
00:01:36,810 --> 00:01:41,880
in which case we would also want to make sure that all these different values are cleared out as well.

25
00:01:41,880 --> 00:01:49,140
So we really cannot tie the form value clearing behavior to specifically just the cancel button.

26
00:01:49,200 --> 00:01:49,730
OK.

27
00:01:51,130 --> 00:01:55,630
So instead we're going to use a little bit of a trick with redux form and I'm kind of excited to show

28
00:01:55,630 --> 00:01:56,920
you this little trick.

29
00:01:57,250 --> 00:01:59,500
Now I've tried I'll be totally honest with you.

30
00:01:59,500 --> 00:02:02,440
Kind of like another Editor's note here.

31
00:02:02,500 --> 00:02:07,540
I recorded this section like five times trying to explain what's going to go on here.

32
00:02:07,540 --> 00:02:08,990
Just absolutely correct.

33
00:02:09,040 --> 00:02:12,360
I think that this time in those five times really turned out well.

34
00:02:12,360 --> 00:02:15,850
So this time around we're going to take a little bit of a different approach and I'm going to just add

35
00:02:15,850 --> 00:02:20,220
in the code that's going to make all this form value stuff work the way we expect.

36
00:02:20,250 --> 00:02:24,730
Gabriel the code first and then we'll come back and talk about exactly what it's doing because I think

37
00:02:24,730 --> 00:02:29,620
if you see the code first it makes a little bit more sense rather than me trying to explain what's going

38
00:02:29,620 --> 00:02:30,300
on.

39
00:02:30,680 --> 00:02:35,470
OK so let's wire up this code so it's going to be a little bit of a trick that we're going to use to

40
00:02:35,470 --> 00:02:40,830
make sure that the form values are cleared out when ever the user navigates away from this form.

41
00:02:40,930 --> 00:02:43,630
But not if the user clicks on next over here.

42
00:02:43,690 --> 00:02:44,120
OK.

43
00:02:44,290 --> 00:02:47,180
So that's what the trick is going to be that's what it's going to address.

44
00:02:47,830 --> 00:02:53,070
I'm going to find my components directory going to find the survey's folder and then cited there or

45
00:02:53,080 --> 00:02:56,020
find the survey new component.

46
00:02:56,020 --> 00:03:01,870
So your survey new numbers survey new is what is responsible for showing both the survey form and the

47
00:03:01,870 --> 00:03:03,180
survey form of view.

48
00:03:03,400 --> 00:03:06,550
So it really is the parent to both of those.

49
00:03:06,550 --> 00:03:10,160
So right now we are inside of survey new right here.

50
00:03:10,270 --> 00:03:19,540
Site serving you I'm going to import the redux form helper from the redux form library and then going

51
00:03:19,540 --> 00:03:24,550
to go down to the very bottom of this file and I'm going to hook up the redux form helper.

52
00:03:24,990 --> 00:03:26,700
It's a redux form.

53
00:03:26,830 --> 00:03:30,650
We get the one set of parentheses and the second set around survey new.

54
00:03:31,030 --> 00:03:36,010
And I'm going to make sure I put the options object inside of here and we're going to define just one

55
00:03:36,010 --> 00:03:42,760
property that we're going to pass we're going to say form is serve a form like so.

56
00:03:43,240 --> 00:03:43,630
OK.

57
00:03:43,840 --> 00:03:47,220
So again I told you that we're going to write the code first and then explain it.

58
00:03:47,230 --> 00:03:51,610
Let's test this out inside the browser and then we'll talk about exactly why this is going to work out

59
00:03:51,610 --> 00:03:55,180
correctly for clearing out all of our different form values.

60
00:03:55,180 --> 00:03:59,030
So I can go back to our application looks like I already got my automatic reload.

61
00:03:59,390 --> 00:04:02,980
I've put in all my different values.

62
00:04:02,990 --> 00:04:04,530
Click next.

63
00:04:04,530 --> 00:04:06,160
You can still see the values on the screen.

64
00:04:06,160 --> 00:04:10,270
If I click back they're still here so clearly I can toggle between these two and everything works the

65
00:04:10,270 --> 00:04:11,190
way I expect.

66
00:04:11,380 --> 00:04:18,880
But now if I click on cancel and then hit on out again all the form values are correctly cleared out

67
00:04:18,880 --> 00:04:20,770
the way I would expect.

68
00:04:20,770 --> 00:04:21,020
OK.

69
00:04:21,040 --> 00:04:22,710
So clearly this is working the way we expect.

70
00:04:22,720 --> 00:04:25,420
Now we get to talk about why it is working.

71
00:04:25,690 --> 00:04:30,820
So again you know I have tried a couple of different angles of explaining this in previous iterations

72
00:04:30,820 --> 00:04:31,750
of this video.

73
00:04:31,750 --> 00:04:34,120
So here is try number five.

74
00:04:34,330 --> 00:04:36,860
So to speak now that you've actually seen it work.

75
00:04:36,880 --> 00:04:42,890
So here's what's happening get a first go back to our survey form remember this is where we initially

76
00:04:42,890 --> 00:04:44,460
wired up the redux form helper.

77
00:04:44,570 --> 00:04:52,040
Inside here we had to specifically add a setting that said if this component if this survey form is

78
00:04:52,130 --> 00:04:58,760
unmounted then destroy or do not destroy Excuse me do not destroy any of the values contained within

79
00:04:58,760 --> 00:05:00,330
the survey form.

80
00:05:00,350 --> 00:05:01,750
And remember this form name right.

81
00:05:01,750 --> 00:05:07,610
Your survey form specifies where redux form is going to store all the values out of the form inside

82
00:05:07,610 --> 00:05:09,070
of our redux store.

83
00:05:09,560 --> 00:05:12,980
So let's now go over to the survey new component.

84
00:05:12,980 --> 00:05:19,100
Over here we wired up redux form and we said this component is tied to this form which is the exact

85
00:05:19,100 --> 00:05:21,710
same one that we just saw a second ago.

86
00:05:22,250 --> 00:05:28,420
However this time around we didn't not pass in that option of do not destroy the form values whenever

87
00:05:28,430 --> 00:05:30,260
the component is unmounted.

88
00:05:30,290 --> 00:05:31,530
So here's what happens.

89
00:05:31,580 --> 00:05:34,070
Here's what really happens behind the scene.

90
00:05:34,070 --> 00:05:39,710
When ever the survey form is unmounted and presumably we are toggling between these two components right

91
00:05:39,710 --> 00:05:42,050
here are toggling the visibility of the two.

92
00:05:42,140 --> 00:05:44,770
We are not clearing out the form values.

93
00:05:44,790 --> 00:05:49,040
However once a user navigates away from the serve a new component right here.

94
00:05:49,040 --> 00:05:54,710
So once they go back over to the dashboard or any other route that we define in the future as well if

95
00:05:54,710 --> 00:06:00,740
this component is unmounted we're seeing clear all the values just dumped the form dump everything in

96
00:06:00,740 --> 00:06:01,170
there.

97
00:06:01,520 --> 00:06:04,240
And we're not really seeing that explicitly inside of here right.

98
00:06:04,270 --> 00:06:07,820
We're not explicitly saying dump the form values we navigate away.

99
00:06:07,970 --> 00:06:11,310
That is just the default behavior of redux form.

100
00:06:11,390 --> 00:06:14,150
That is how redox form behaves by default.

101
00:06:14,150 --> 00:06:17,940
If this component gets a mounted dump all the values that are inside of here.

102
00:06:18,140 --> 00:06:21,690
And so that's why it's working out for us when we toggle between these two.

103
00:06:21,710 --> 00:06:23,720
We are saying keep the values around.

104
00:06:23,720 --> 00:06:29,450
However if we navigate away from survey new which basically means I don't want to deal with doing any

105
00:06:29,450 --> 00:06:36,840
new survey stuff whatsoever then yes please do use the default behavior and just dump all the form values.

106
00:06:37,320 --> 00:06:41,540
Ok so I think maybe this fifth time six time whatever it was came across a little bit more clearly.

107
00:06:41,540 --> 00:06:47,390
Again we're kind of exploiting redux form in a kind of clever way here to make sure that our form values

108
00:06:47,390 --> 00:06:51,400
are sometimes persisted and other times dumped entirely.

109
00:06:51,680 --> 00:06:55,740
So now that we've got that little bug in the I would call it a bug.

110
00:06:55,760 --> 00:07:00,080
You know you really would want the values to be dumped now that we've got that bug fixed.

111
00:07:00,080 --> 00:07:03,470
Let's take a quick break and when we come back we're going to start thinking about how we're going to

112
00:07:03,470 --> 00:07:07,220
handle the submit button on the review form.

113
00:07:07,340 --> 00:07:09,300
So I'll see you in the next section.