1
00:00:02,000 --> 00:00:05,000
Now to explore working with those API routes

2
00:00:05,000 --> 00:00:09,000
let's go back to our standard index.js file.

3
00:00:09,000 --> 00:00:11,000
So to this standard homepage route

4
00:00:11,000 --> 00:00:15,000
which is not an API route, and in there

5
00:00:15,000 --> 00:00:18,000
I will add a basic form, which I'll not style

6
00:00:18,000 --> 00:00:22,000
in any way for the moment where I then want to add a input

7
00:00:22,000 --> 00:00:26,000
of type email, let's say, and above

8
00:00:26,000 --> 00:00:30,000
that a label where I say your email address

9
00:00:32,000 --> 00:00:36,000
with a htmlfor tag off email

10
00:00:37,000 --> 00:00:41,000
and then here an ideal email for accessibility.

11
00:00:41,000 --> 00:00:45,000
And then I'll put that into a div just to kind of put

12
00:00:45,000 --> 00:00:49,000
this into its own block and force a line break thereafter.

13
00:00:50,000 --> 00:00:54,000
And then I'll copy that div and create a never input

14
00:00:54,000 --> 00:00:59,000
with an id of message or let's name it, feedback.

15
00:01:01,000 --> 00:01:03,000
The type here is text however,

16
00:01:03,000 --> 00:01:07,000
and here we just say Your Feedback

17
00:01:07,000 --> 00:01:10,000
and actually let's use a text area

18
00:01:10,000 --> 00:01:12,000
that's more realistic I guess.

19
00:01:12,000 --> 00:01:14,000
So we have a text area with an id

20
00:01:14,000 --> 00:01:19,000
of feedback and let's say under a number of, five rows.

21
00:01:21,000 --> 00:01:25,000
And then we add a button to submit that form send feedback.

22
00:01:26,000 --> 00:01:28,000
If we adjust the homepage like

23
00:01:28,000 --> 00:01:32,000
this and we reload just local host free thousand

24
00:01:32,000 --> 00:01:34,000
we see this form here.

25
00:01:34,000 --> 00:01:35,000
Now it is ugly.

26
00:01:35,000 --> 00:01:37,000
You could add styling

27
00:01:37,000 --> 00:01:39,000
but this is totally not about the styling,

28
00:01:39,000 --> 00:01:42,000
this is just a dummy form, which I add

29
00:01:42,000 --> 00:01:46,000
so that I can show you how we can interact with API routes.

30
00:01:46,000 --> 00:01:49,000
We'll see a more beautiful example

31
00:01:49,000 --> 00:01:52,000
in the next course section when we apply what we learn

32
00:01:52,000 --> 00:01:56,000
in this section to our first course project.

33
00:01:57,000 --> 00:02:01,000
So, here we accept the email address and some user feedback.

34
00:02:01,000 --> 00:02:03,000
And of course, when that button is clicked

35
00:02:03,000 --> 00:02:07,000
the idea is that this feedback is sent to some database

36
00:02:07,000 --> 00:02:11,000
for example, that it's stored in some database.

37
00:02:11,000 --> 00:02:13,000
Now we shouldn't talk

38
00:02:13,000 --> 00:02:17,000
to a database from our front end application.

39
00:02:17,000 --> 00:02:20,000
It would be kind of difficult to implement

40
00:02:20,000 --> 00:02:21,000
and that would be difficult

41
00:02:21,000 --> 00:02:25,000
for a reason because it's highly insecure

42
00:02:25,000 --> 00:02:28,000
if we would try to add JavaScript code

43
00:02:28,000 --> 00:02:31,000
to this component to talk to a database

44
00:02:31,000 --> 00:02:35,000
because we would have to expose our database credentials

45
00:02:35,000 --> 00:02:37,000
in this front end code for this.

46
00:02:37,000 --> 00:02:39,000
And that would be highly insecure,

47
00:02:39,000 --> 00:02:41,000
attached you'll find an article

48
00:02:41,000 --> 00:02:45,000
and video where I talk about the dissident greater detail.

49
00:02:45,000 --> 00:02:47,000
So that's not what we wanna do.

50
00:02:47,000 --> 00:02:51,000
Instead that's the perfect scenario for an API route.

51
00:02:51,000 --> 00:02:54,000
We fetched that user input on the front-end

52
00:02:54,000 --> 00:02:57,000
and once the user then clicks that button

53
00:02:57,000 --> 00:03:00,000
we send the request queue to the API route.

54
00:03:00,000 --> 00:03:05,000
So to our own API, and then in that API route

55
00:03:05,000 --> 00:03:07,000
we could connect to a database.

56
00:03:07,000 --> 00:03:09,000
Because then there we can safely

57
00:03:09,000 --> 00:03:12,000
do so because the code written

58
00:03:12,000 --> 00:03:16,000
in the API route will not be exposed to the front end.

59
00:03:16,000 --> 00:03:20,000
It will not be exposed to our website visitors.

60
00:03:20,000 --> 00:03:23,000
So here we could securely talk to a database.

61
00:03:24,000 --> 00:03:29,000
And therefore now here in index.js

62
00:03:29,000 --> 00:03:31,000
I now wanna get that user input when the button

63
00:03:31,000 --> 00:03:34,000
is clicked and send the request.

64
00:03:34,000 --> 00:03:37,000
Now for this, I will work

65
00:03:37,000 --> 00:03:42,000
with references here to get references to my inputs.

66
00:03:42,000 --> 00:03:45,000
So I'll import { useRef } from 'react'

67
00:03:45,000 --> 00:03:48,000
to use this ref feature.

68
00:03:48,000 --> 00:03:51,000
And then I'll set up two references here.

69
00:03:52,000 --> 00:03:55,000
The first one is for the email input,

70
00:03:56,000 --> 00:03:58,000
and then the second one

71
00:03:58,000 --> 00:04:01,000
thereafter is for the feedback input.

72
00:04:03,000 --> 00:04:06,000
And once we got these references created, we can assign

73
00:04:06,000 --> 00:04:09,000
them to our elements with the special ref prop

74
00:04:09,000 --> 00:04:13,000
and that's just standard react code has nothing

75
00:04:13,000 --> 00:04:15,000
to do with API routes.

76
00:04:15,000 --> 00:04:18,000
And here I'll then just point at the emailInputRef

77
00:04:18,000 --> 00:04:22,000
and here I'll point at the {feedbackInputRef}.

78
00:04:23,000 --> 00:04:26,000
Now we need a handler for the form submission.

79
00:04:26,000 --> 00:04:30,000
So I'll add a function here, submit form handler,

80
00:04:30,000 --> 00:04:31,000
the name is up to you.

81
00:04:33,000 --> 00:04:36,000
Where we get an event object automatically

82
00:04:36,000 --> 00:04:40,000
because I'll bind that to the onSubmit prop on the form.

83
00:04:40,000 --> 00:04:43,000
So it will be triggered when that built

84
00:04:43,000 --> 00:04:46,000
in submit event is triggered when that is fired.

85
00:04:46,000 --> 00:04:49,000
And then we get access to that event object

86
00:04:49,000 --> 00:04:51,000
and we need access because here I wanna

87
00:04:51,000 --> 00:04:56,000
call preventDefault to prevent that browser default

88
00:04:56,000 --> 00:05:00,000
where the page would basically be reloaded

89
00:05:00,000 --> 00:05:04,000
because the browser sends a request automatically.

90
00:05:04,000 --> 00:05:07,000
I don't want that browser behavior here.

91
00:05:07,000 --> 00:05:09,000
Instead I wanna step in and send

92
00:05:09,000 --> 00:05:12,000
the request myself through JavaScript.

93
00:05:13,000 --> 00:05:18,000
For this year we can now extract the email text

94
00:05:18,000 --> 00:05:22,000
by reaching out to the emailInputRef, and then there

95
00:05:22,000 --> 00:05:25,000
since it's a Ref.current, that's always how refs work.

96
00:05:25,000 --> 00:05:29,000
And then .value because in .current

97
00:05:29,000 --> 00:05:32,000
a pointer at this input object is saved.

98
00:05:32,000 --> 00:05:36,000
And this input object just as the text area object

99
00:05:36,000 --> 00:05:40,000
in JavaScript always has a value property

100
00:05:40,000 --> 00:05:44,000
which holds the current value of those inputs.

101
00:05:44,000 --> 00:05:46,000
So it holds the value entered by the user.

102
00:05:47,000 --> 00:05:49,000
That's the entered email.

103
00:05:49,000 --> 00:05:52,000
And then we can also get the entered feedback,

104
00:05:52,000 --> 00:05:53,000
of course by reaching out

105
00:05:53,000 --> 00:05:56,000
to the feedbackInputRef.current.value; as well.

106
00:05:58,000 --> 00:06:00,000
Now we could add validation

107
00:06:00,000 --> 00:06:03,000
and check if the email or feedback is empty

108
00:06:03,000 --> 00:06:06,000
we could do that here to then show an error message

109
00:06:06,000 --> 00:06:08,000
to the user, but I'll not do it here

110
00:06:08,000 --> 00:06:10,000
because it's not the focus of this section.

111
00:06:11,000 --> 00:06:14,000
Instead now we've got these two values

112
00:06:14,000 --> 00:06:15,000
and we might wanna send them

113
00:06:15,000 --> 00:06:19,000
to our API route here to then, accept them,

114
00:06:19,000 --> 00:06:23,000
extract them and save them in a database.

115
00:06:23,000 --> 00:06:25,000
And therefore in the next step

116
00:06:25,000 --> 00:06:27,000
we will work on that API route.