1
00:00:01,290 --> 00:00:07,650
We are now done with our back and drought handler that allows a user to create a brand new survey at

2
00:00:07,650 --> 00:00:08,160
this point.

3
00:00:08,160 --> 00:00:12,600
There's really two different directions we can go for working on our next feature or the next aspect

4
00:00:12,600 --> 00:00:13,930
of our application.

5
00:00:13,980 --> 00:00:19,080
On the one hand we can continue on the back end side and make sure that we have some endpoint put together

6
00:00:19,110 --> 00:00:25,050
for our center grid web hook to make sure that whenever a user clicks on a button it gives us some feedback

7
00:00:25,050 --> 00:00:26,340
to our server.

8
00:00:26,340 --> 00:00:27,710
So that's kind of aspect number one.

9
00:00:27,750 --> 00:00:29,550
That's the first thing we could work on.

10
00:00:29,550 --> 00:00:34,340
The other thing we can work on is the front end component for creating a new survey.

11
00:00:34,650 --> 00:00:40,080
So to make sure that the user has some form that they can fill out to actually generate the new survey

12
00:00:40,320 --> 00:00:43,740
posted to this end point and email it out to all of our people.

13
00:00:44,100 --> 00:00:48,540
So just to make sure that we have a little bit of variety rather than working a super long time on the

14
00:00:48,540 --> 00:00:54,420
back end I'm thinking that we will put off some of that stuff and instead work on some the client side

15
00:00:54,420 --> 00:00:59,540
UI and build out a form that a user can use to make a new survey.

16
00:00:59,550 --> 00:01:05,310
So with that in mind let's get a review on exactly how our front end is going to look for creating a

17
00:01:05,310 --> 00:01:06,840
new survey.

18
00:01:07,140 --> 00:01:09,510
And now we've looked at these mockups a while ago.

19
00:01:09,510 --> 00:01:11,500
So I just want to do a quick once over.

20
00:01:11,490 --> 00:01:13,850
Just talk about what they're doing for us.

21
00:01:13,920 --> 00:01:16,470
So I'm going to zoom in here just a little bit.

22
00:01:16,800 --> 00:01:22,380
Creating a survey is going to be a two stage process when the user navigates to a route of something

23
00:01:22,380 --> 00:01:27,000
like surveys slash who will show the user a form to fill out.

24
00:01:27,010 --> 00:01:31,980
So something that has entry for the title is subject the body and so on.

25
00:01:32,010 --> 00:01:36,060
After the user fills all this stuff out and clicks on the next button we'll then make sure that the

26
00:01:36,060 --> 00:01:42,110
user has the opportunity to review all their inputs before it actually gets submitted to our backend.

27
00:01:42,180 --> 00:01:46,620
Now to make sure that the user can actually navigate to this form you know find the form to create the

28
00:01:46,620 --> 00:01:47,470
new survey.

29
00:01:47,640 --> 00:01:50,610
We're going to put a button on our dashboard.

30
00:01:50,610 --> 00:01:54,120
So here's our dashboard which we haven't really worked on at all so far.

31
00:01:54,180 --> 00:01:59,340
Now this big red button at the bottom right hand side right here that the user can click on to add a

32
00:01:59,340 --> 00:02:00,290
new survey.

33
00:02:00,300 --> 00:02:05,610
So this is really taking a page from material design standards and making sure that our users have this

34
00:02:05,610 --> 00:02:07,310
nice pretty thing to click on.

35
00:02:07,740 --> 00:02:14,220
So I think that will first start off by making sure that this button exists and that a user can navigate

36
00:02:14,310 --> 00:02:16,360
over to these forms.

37
00:02:16,440 --> 00:02:21,900
Once we get that link in place right here this link will then come back to the forms over here and start

38
00:02:21,900 --> 00:02:24,390
to dive into great deal detail on them.

39
00:02:24,750 --> 00:02:26,910
So I don't think there's any reason to take a pause.

40
00:02:26,970 --> 00:02:28,680
Let's just get to it right now.

41
00:02:28,830 --> 00:02:31,140
Let's change on over to our code editor.

42
00:02:31,140 --> 00:02:33,930
We're going to make a new dashboard component.

43
00:02:33,930 --> 00:02:39,580
Remember that's going to be the component that a user sees when the kind of first log into the application.

44
00:02:39,690 --> 00:02:44,090
And we're going to make sure that it has this big red ad button down here at the bottom right.

45
00:02:44,190 --> 00:02:51,660
And whenever a user clicks on it they should be automatically navigated over to surveys slash new Ok

46
00:02:51,780 --> 00:02:53,960
so I going to change on over to my code editor.

47
00:02:54,190 --> 00:02:58,750
I'm going to close out all the files I have open so that I'm making sure that I'm not going to accidentally

48
00:02:58,750 --> 00:03:00,930
mess around my server at all.

49
00:03:01,360 --> 00:03:07,270
I'm going to open up my client directory and find the SIRC directory and then inside of the components

50
00:03:07,270 --> 00:03:10,560
folder I'm going to make a new file called dashboard.

51
00:03:10,740 --> 00:03:19,260
Yes and this is going to be our route dashboard component woofs dashboard Yes and then inside if you're

52
00:03:19,330 --> 00:03:27,050
we'll put together a little bit of markup for just a normal old component will say oops import re-act

53
00:03:28,140 --> 00:03:34,270
from react at the top we will then declare our dashboard component and I'm thinking right now that it

54
00:03:34,270 --> 00:03:38,230
can just be a material or a functional component.

55
00:03:38,250 --> 00:03:41,090
One thing that we really need a class based component here at all.

56
00:03:41,500 --> 00:03:50,230
So let's say it's dashboard and from here I think that for right now we'll just return a div with a

57
00:03:50,230 --> 00:03:57,040
text dashboard and then down the bottom we'll make sure that we immediately export this component.

58
00:03:57,040 --> 00:04:04,920
So say export default dashboard like so get let's make sure that our app component remerge that's where

59
00:04:04,920 --> 00:04:09,960
we have all of our client side routing logic it's all inside the app lets make sure that the app shows

60
00:04:09,960 --> 00:04:14,640
this dashboard as opposed to the dummy component that we're showing in here right now.

61
00:04:14,640 --> 00:04:17,000
So here's the dummy component that we're currently showing.

62
00:04:17,220 --> 00:04:22,140
I'm going to remove this thing and replace it with an import statement for the dashboard component that

63
00:04:22,140 --> 00:04:23,520
we just made.

64
00:04:23,520 --> 00:04:30,440
So we'll say import dashboard from dashboard and then down a little bit lower.

65
00:04:30,450 --> 00:04:35,580
You'll notice that we still have dashboard wired up on the flash survey's route which is really exactly

66
00:04:35,580 --> 00:04:37,190
what we want.

67
00:04:37,190 --> 00:04:37,490
OK.

68
00:04:37,530 --> 00:04:41,020
So let's make sure our server is running.

69
00:04:41,130 --> 00:04:44,050
I think that looks like mine is running here.

70
00:04:44,120 --> 00:04:45,900
So I think that I killed mine at some point.

71
00:04:45,900 --> 00:04:51,190
So I started back up I think we'll take a quick break right now.

72
00:04:51,270 --> 00:04:55,380
When we come back in the next section we're just going to verify that the dashboard component is successfully

73
00:04:55,380 --> 00:04:55,990
showing up.

74
00:04:56,040 --> 00:04:59,440
Let's talk about how we're going to get that nice big red button to show up on the screen.

75
00:04:59,610 --> 00:05:01,540
So I'll see you in just a minute.