1
00:00:00,630 --> 00:00:05,880
Our users now have a big nice red button to click on when they want to create a new survey and send

2
00:00:05,880 --> 00:00:08,170
it out to a list of all their different customers.

3
00:00:08,430 --> 00:00:13,320
So when we click this right now we see our dummy survey new component.

4
00:00:13,320 --> 00:00:15,180
Eventually this is going to end up in our form.

5
00:00:15,180 --> 00:00:19,610
I think that before we actually start work in the form maybe we should go back and review our mockups

6
00:00:19,620 --> 00:00:22,020
just to remember what it's supposed to look like.

7
00:00:22,500 --> 00:00:23,020
OK.

8
00:00:23,070 --> 00:00:24,070
So we're back here.

9
00:00:24,120 --> 00:00:28,470
So we've seen this mockup before but I've added one additional little change to it and I'm not really

10
00:00:28,470 --> 00:00:32,250
going to mention what the change was because I'm going to assume that you don't quite remember all the

11
00:00:32,250 --> 00:00:34,470
different components that we had in the past.

12
00:00:34,680 --> 00:00:34,940
Okay.

13
00:00:34,950 --> 00:00:40,710
So anyways the overall form like the overall form component that we're going to be navigating to is

14
00:00:40,710 --> 00:00:42,960
going to be called survey new.

15
00:00:43,130 --> 00:00:43,800
Okay.

16
00:00:43,830 --> 00:00:49,140
So it's going to be this like really big overall container component and I'll show you why we need that

17
00:00:49,140 --> 00:00:51,360
big container in just a moment.

18
00:00:51,390 --> 00:00:53,310
Now the actual form itself.

19
00:00:53,310 --> 00:01:00,000
So the actual like fields and labels and all that kind of stuff we're going to call a survey form and

20
00:01:00,000 --> 00:01:03,780
then each individual field will be the survey field.

21
00:01:03,780 --> 00:01:08,420
So in this case we have currently four different survey fields visible on the screen.

22
00:01:08,430 --> 00:01:10,370
So one two three and four.

23
00:01:10,770 --> 00:01:14,760
So yeah we're going to break this forum down quite a bit but we're breaking it down this much because

24
00:01:14,760 --> 00:01:18,540
the form is going to be pretty darn complex than the logic that it contains.

25
00:01:18,540 --> 00:01:19,820
And let me tell you why.

26
00:01:20,520 --> 00:01:21,860
When our users.

27
00:01:21,900 --> 00:01:27,920
So like the startup owners or the product owners make use of our application and they enter in you know

28
00:01:27,960 --> 00:01:33,300
the survey title the subject line for the email the body the email and the list of emails to send it

29
00:01:33,300 --> 00:01:35,460
to when they click on submit right here.

30
00:01:35,460 --> 00:01:41,010
You can imagine that in our ideal world that would instantly send out an e-mail to all these different

31
00:01:41,010 --> 00:01:41,880
recipients.

32
00:01:41,880 --> 00:01:42,640
Right.

33
00:01:42,660 --> 00:01:43,770
Like you click submit.

34
00:01:43,800 --> 00:01:44,170
Boom.

35
00:01:44,190 --> 00:01:45,620
Email gets sent out.

36
00:01:46,080 --> 00:01:52,890
Well I can very easily imagine that our users like the startup owners the cuffs and the product owners

37
00:01:53,340 --> 00:01:59,130
might accidentally make a typo somewhere on this form right here and I'm not talking about like you

38
00:01:59,130 --> 00:02:02,640
know incorrectly put in the e-mail recipient list right here.

39
00:02:02,640 --> 00:02:07,390
I'm talking about like they might misspell a word in the subject line of the e-mail.

40
00:02:07,650 --> 00:02:13,840
And if our users send out a e-mail with a typo in the subject line that's really embarrassing for them.

41
00:02:13,950 --> 00:02:19,050
Now typos like that aren't something that we can really easily validate ourselves like validating for

42
00:02:19,050 --> 00:02:24,360
typos is pretty darn complex and we don't really want to take that on ourselves because maybe our users

43
00:02:24,360 --> 00:02:27,610
want to very purposefully make a typo somewhere.

44
00:02:27,840 --> 00:02:33,360
So how would we solve this issue of our users kind of accidentally embarrassing themselves by entering

45
00:02:33,360 --> 00:02:38,220
some bad text here and then clicking submit because you know in theory clicking submit that e-mail then

46
00:02:38,220 --> 00:02:42,200
boom instantly goes out and there's no more opportunity to like fix things up.

47
00:02:42,450 --> 00:02:50,130
Well I'm kind of thinking maybe if we gave them the opportunity to review all the inputs that they had

48
00:02:50,160 --> 00:02:56,250
entered on the previous form maybe if we make a new component called like survey form review and we

49
00:02:56,250 --> 00:02:59,700
allow a user to review all the inputs they added.

50
00:02:59,850 --> 00:03:03,410
And you know maybe you read over them just once and say like hey are you sure.

51
00:03:03,510 --> 00:03:06,350
Like do you have any typos here do you want to go back and make any changes.

52
00:03:06,360 --> 00:03:08,660
Because when you click send right here that's it.

53
00:03:08,670 --> 00:03:11,270
That's the end of the line the e-mails going to get sent out.

54
00:03:11,280 --> 00:03:16,590
So I think that adding in this additional review step to our form will be really nice for allowing our

55
00:03:16,590 --> 00:03:23,220
users to just review their inputs before clicking that button that really seals the deal and sends everything

56
00:03:23,220 --> 00:03:24,180
out.

57
00:03:24,180 --> 00:03:27,360
So I think that we'll have that in as a feature to our application.

58
00:03:27,360 --> 00:03:33,200
So just to be clear our form is now going to have like two separate steps to it or two separate screens.

59
00:03:33,540 --> 00:03:38,820
A user will first see the actual form they'll put in all their inputs.

60
00:03:38,820 --> 00:03:40,690
They'll click on the submit button right here.

61
00:03:40,860 --> 00:03:47,190
We will then hide this form and instead we will show them a different component that has still like

62
00:03:47,190 --> 00:03:48,710
you know very similar looking.

63
00:03:48,720 --> 00:03:54,180
It's still going to have the labels on here but rather than having text inputs these will be like hard

64
00:03:54,180 --> 00:03:59,820
coded text that's going to really force the user to look at their entries before clicking on the send

65
00:03:59,820 --> 00:04:00,770
button right here.

66
00:04:00,900 --> 00:04:03,020
So user comes to form.

67
00:04:03,060 --> 00:04:03,910
They see the form.

68
00:04:03,930 --> 00:04:07,650
They put the stuff in they click submit the screen then changes.

69
00:04:07,800 --> 00:04:10,790
They see the new component that allows them to review all their inputs.

70
00:04:10,890 --> 00:04:15,120
They click send and then the email gets sent out to everyone on the recipient list.

71
00:04:15,120 --> 00:04:16,120
Down here.

72
00:04:16,580 --> 00:04:17,030
OK.

73
00:04:17,250 --> 00:04:23,970
So I think that's a pretty fun feature because this is something that is very commonly seen in web applications

74
00:04:23,970 --> 00:04:24,620
of all types.

75
00:04:24,630 --> 00:04:25,930
You know review screens.

76
00:04:26,110 --> 00:04:32,400
It's also going to be a good demo of how you might handle multi-page forms or forms where you have like

77
00:04:32,400 --> 00:04:36,720
one page of inputs and then you click next and then you go to the next page and you fill that out.

78
00:04:36,720 --> 00:04:37,730
And so on.

79
00:04:37,770 --> 00:04:41,750
So very similar technique for handling that to what we're going to do here.

80
00:04:42,140 --> 00:04:47,190
Now there's a minder to go over to the component names again because we're going to have a lot of different

81
00:04:47,190 --> 00:04:51,700
components flowing around the overall like container of all this stuff.

82
00:04:51,750 --> 00:04:58,260
We're going to refer to as Survey new survey new is going to have some logic on how to advance between

83
00:04:58,260 --> 00:05:05,220
the survey form component and the survey form of view which is like basically you know the same inputs

84
00:05:05,250 --> 00:05:07,360
but in hard coded text form.

85
00:05:07,710 --> 00:05:14,310
So serving new is going to have that kind of like transition logic of showing first the form and then

86
00:05:14,310 --> 00:05:15,360
the review.

87
00:05:15,660 --> 00:05:18,270
The form is all about handling text input.

88
00:05:18,480 --> 00:05:25,920
The survey field is all about handling and rendering a single field and then survey form review again

89
00:05:25,950 --> 00:05:29,890
I know I've said it like three times now but that's your chance to review everything.

90
00:05:29,910 --> 00:05:35,610
So again you know we've got a lot of components floating around here and on top of that the form that

91
00:05:35,610 --> 00:05:40,680
we're trying to build is going to be pretty complex and on top of that we're going to use using a library

92
00:05:40,680 --> 00:05:45,980
called redux form to fill these forms together which is kind of a hard library in its own right.

93
00:05:45,990 --> 00:05:50,640
So this feature that we're about to take on right now this whole life form creation stuff.

94
00:05:50,780 --> 00:05:55,890
This is going to be some pretty tough stuff pretty advanced stuff but I'm really confident that if we

95
00:05:55,890 --> 00:05:59,850
take our time we make sure that we understand all the code that's going into this.

96
00:05:59,850 --> 00:06:03,690
We're going to have a lot of fun we're going to learn exactly what's going on here and we'll get some

97
00:06:03,690 --> 00:06:07,740
experience building a form that we can easily carry on to other applications.

98
00:06:07,740 --> 00:06:08,800
We're going to make in the future.

99
00:06:08,820 --> 00:06:11,310
So again might be all that challenging.

100
00:06:11,310 --> 00:06:12,080
Don't sweat it.

101
00:06:12,090 --> 00:06:13,060
We're going to get through it.

102
00:06:13,080 --> 00:06:17,610
And it is going to work out through the next couple of lectures because it definitely is going to take

103
00:06:17,610 --> 00:06:19,290
us a while to put this form together.

104
00:06:19,290 --> 00:06:21,420
Do you have any questions if you get any errors.

105
00:06:21,450 --> 00:06:24,650
Remember you can always post on the Tommy discussion forums.

106
00:06:24,810 --> 00:06:30,480
The only thing I ask is that if you post a question about some air that you're getting Please do post

107
00:06:30,480 --> 00:06:35,370
your project up to get hubby so I can review your code and help you troubleshoot the issue.

108
00:06:35,430 --> 00:06:40,950
If you just say something like it's not working well that makes it really hard for me to figure out

109
00:06:40,980 --> 00:06:42,600
because there is a lot of things that can go wrong.

110
00:06:42,600 --> 00:06:44,770
Let's be honest there's a lot of things that can go wrong.

111
00:06:44,810 --> 00:06:46,760
So when you just say it's not working.

112
00:06:46,940 --> 00:06:49,830
I can't I can't quite do a whole lot for you there.

113
00:06:50,320 --> 00:06:55,020
OK so enough talking enough preamble Let's start working on this farm in the next section.