1
00:00:00,240 --> 00:00:02,380
In this video, we'll be integrating our frontend

2
00:00:02,380 --> 00:00:04,320
application with the backend endpoint

3
00:00:04,320 --> 00:00:06,100
that we just created.

4
00:00:06,100 --> 00:00:07,920
In order to proceed with that, we need to

5
00:00:07,920 --> 00:00:10,120
first see what we are working with in our

6
00:00:10,120 --> 00:00:11,820
seed project.

7
00:00:11,820 --> 00:00:15,640
If we scroll down, we can see our form for

8
00:00:15,640 --> 00:00:17,380
the image search.

9
00:00:17,380 --> 00:00:19,220
Here's the image search panel.

10
00:00:19,220 --> 00:00:21,600
And if we scroll down, you can see the input

11
00:00:21,600 --> 00:00:24,520
type file, which represents the form widget

12
00:00:24,520 --> 00:00:26,980
for users to upload images with features of

13
00:00:26,980 --> 00:00:29,640
the type of destinations they would like to

14
00:00:29,640 --> 00:00:31,600
We scroll down a little bit, we also have

15
00:00:31,600 --> 00:00:35,540
a preview section for the image that was selected

16
00:00:35,540 --> 00:00:40,000
and we have our travel preferences checkboxes.

17
00:00:40,000 --> 00:00:42,500
These have all been given IDs in order to

18
00:00:42,500 --> 00:00:44,840
target them in our JavaScript code.

19
00:00:44,840 --> 00:00:47,260
So now let us head over to app.js

20
00:00:47,260 --> 00:00:51,040
where we'll be doing our integration.

21
00:00:51,040 --> 00:00:55,560
Let's pull that up and scroll to the very

22
00:00:55,560 --> 00:00:57,440
top.

23
00:00:57,440 --> 00:00:59,680
Now here in the Tag Selection section, that

24
00:00:59,680 --> 00:01:02,820
is the DOM element section, we have ImageForm

25
00:01:02,820 --> 00:01:05,640
and ImageInput that help us select our form

26
00:01:05,640 --> 00:01:08,860
and input fields respectively.

27
00:01:08,860 --> 00:01:12,600
Then we have ImagePreview and PreviewIMG.

28
00:01:12,600 --> 00:01:14,320
These help us select the preview container

29
00:01:14,320 --> 00:01:17,540
and the image tag for the preview to be loaded

30
00:01:17,540 --> 00:01:19,000
respectively.

31
00:01:19,000 --> 00:01:21,980
All other utility functions like GetSelectedPreferences

32
00:01:21,980 --> 00:01:25,760
and LimitPreferences perform the same functions

33
00:01:25,760 --> 00:01:28,860
we described in the previous section.

34
00:01:28,860 --> 00:01:32,100
A change event, let us search for that, not

35
00:01:32,100 --> 00:01:36,400
this, the next one, has been added to our

36
00:01:36,400 --> 00:01:40,220
image input such that when a user selects

37
00:01:40,220 --> 00:01:43,900
an image, it is then loaded into our preview

38
00:01:43,900 --> 00:01:45,140
section.

39
00:01:45,140 --> 00:01:46,820
To implement our integration for this image

40
00:01:46,820 --> 00:01:50,000
feature, let's add a submit button handler

41
00:01:50,000 --> 00:01:52,980
to the image form selector.

42
00:01:52,980 --> 00:01:54,840
Just as with the first integration, I have

43
00:01:54,840 --> 00:01:57,000
also set apart a section for that.

44
00:01:57,000 --> 00:01:58,280
So let us scroll down.

45
00:01:58,280 --> 00:02:00,660
This is our first integration.

46
00:02:00,660 --> 00:02:03,400
And just under that, we have our second integration

47
00:02:03,400 --> 00:02:07,460
task, which is to undo the image form submission.

48
00:02:07,460 --> 00:02:09,740
To begin, let us add our submitEventHandler

49
00:02:09,740 --> 00:02:14,760
to our image form selector.

50
00:02:14,760 --> 00:02:17,120
We add an async function to that because we

51
00:02:17,120 --> 00:02:23,060
are going to be running asynchronous operations.

52
00:02:23,060 --> 00:02:25,940
Inside the handler, let us first prevent the

53
00:02:25,940 --> 00:02:28,840
default form submission behavior and then

54
00:02:28,840 --> 00:02:30,940
handle our inputs.

55
00:02:30,940 --> 00:02:36,720
So first we say, e.preventDefault.

56
00:02:36,720 --> 00:02:39,220
Then let us get our data.

57
00:02:39,220 --> 00:02:49,140
Say const file equals imageInput.files.

58
00:02:49,140 --> 00:02:55,440
Then we also get our preferences, and that

59
00:02:55,440 --> 00:03:02,000
can be handled using GetSelectedPreferences.

60
00:03:02,000 --> 00:03:05,660
And we can simply pass it the image preference

61
00:03:05,660 --> 00:03:09,140
checkboxes because we are selecting a different

62
00:03:09,140 --> 00:03:10,720
set of preferences for that.

63
00:03:10,720 --> 00:03:11,860
Scroll down.

64
00:03:11,860 --> 00:03:13,960
Yeah, here.

65
00:03:13,960 --> 00:03:21,880
Scroll back down and now we can check the

66
00:03:21,880 --> 00:03:26,360
file if the user submitted any file and if

67
00:03:26,360 --> 00:03:35,060
they didn't, show a message and say please

68
00:03:35,060 --> 00:03:42,660
select an image and this will be of type warning.

69
00:03:42,660 --> 00:03:45,520
we can return from this.

70
00:03:45,520 --> 00:03:48,020
With our data collection and checks in place,

71
00:03:48,020 --> 00:03:50,780
we can now kickstart the API request by showing

72
00:03:50,780 --> 00:03:53,280
our progress indicator and opening a try catch

73
00:03:53,280 --> 00:03:54,520
block.

74
00:03:54,520 --> 00:03:56,740
Here we can just come down and say show loading

75
00:03:56,740 --> 00:04:11,060
and say try catch our error and be all set

76
00:04:11,060 --> 00:04:13,700
to write our request.

77
00:04:13,700 --> 00:04:15,980
To begin our request, inside the try block,

78
00:04:15,980 --> 00:04:19,700
let us package the form data for our request.

79
00:04:19,700 --> 00:04:23,880
Do that by saying const, and create a new

80
00:04:23,880 --> 00:04:29,840
form data.

81
00:04:29,840 --> 00:04:33,020
And here we can simply append our file to

82
00:04:33,020 --> 00:04:34,740
this form data.

83
00:04:34,740 --> 00:04:37,320
Let me scroll this into view.

84
00:04:37,320 --> 00:04:38,560
Not too much.

85
00:04:38,560 --> 00:04:39,760
Okay.

86
00:04:39,760 --> 00:04:45,140
Let's say append and we set the value to file

87
00:04:45,140 --> 00:04:48,060
because that is what our endpoint expects

88
00:04:48,060 --> 00:04:51,820
and we pass it our file.

89
00:04:51,820 --> 00:04:54,480
Next we check if we have preferences and if

90
00:04:54,480 --> 00:04:57,440
we do we want to append those also.

91
00:04:57,440 --> 00:05:02,160
So just quickly say if preferences.length

92
00:05:02,160 --> 00:05:08,040
is greater than zero then we want to append

93
00:05:08,040 --> 00:05:11,660
that to our form data also.

94
00:05:11,660 --> 00:05:16,640
The backend expects it as a preferences key.

95
00:05:16,640 --> 00:05:19,780
And here we can just simply send a string

96
00:05:19,780 --> 00:05:28,540
that is comma-separated.

97
00:05:28,540 --> 00:05:31,220
Now that we have our data all sorted out,

98
00:05:31,220 --> 00:05:32,880
let us send our request to the endpoint that

99
00:05:32,880 --> 00:05:35,620
we just developed in the previous video.

100
00:05:35,620 --> 00:05:41,140
So here, we'll say response const response

101
00:05:41,140 --> 00:05:48,000
equals await fetch.

102
00:05:48,000 --> 00:05:53,760
Then we're going to send this to our API base

103
00:05:53,760 --> 00:05:55,880
URL.

104
00:05:55,880 --> 00:05:57,640
And we're going to target the forward slash

105
00:05:57,640 --> 00:05:59,200
API forward slash

106
00:05:59,200 --> 00:06:04,740
suggest by image endpoint.

107
00:06:04,740 --> 00:06:07,380
With the URL in place, we can then start setting

108
00:06:07,380 --> 00:06:08,660
our request

109
00:06:08,660 --> 00:06:10,000
configuration.

110
00:06:10,000 --> 00:06:15,700
For the method, we want it to be post.

111
00:06:15,700 --> 00:06:21,720
And for the body, we want to use form data.

112
00:06:21,720 --> 00:06:24,180
Next, let us check our response to see if

113
00:06:24,180 --> 00:06:25,660
there are any errors.

114
00:06:25,660 --> 00:06:27,300
And if there are no errors, let us display

115
00:06:27,300 --> 00:06:33,980
our results.

116
00:06:33,980 --> 00:06:38,000
If no errors then let us just get our data

117
00:06:38,000 --> 00:06:54,500
and hide our progress bar and finally display

118
00:06:54,500 --> 00:06:58,660
our destinations, which we can get from data.destinations.

119
00:06:58,660 --> 00:06:59,660
Good.

120
00:06:59,660 --> 00:07:06,260
We're almost done.

121
00:07:06,260 --> 00:07:08,340
Let us quickly wrap this up by making sure

122
00:07:08,340 --> 00:07:10,500
that we take care of error cases that can

123
00:07:10,500 --> 00:07:13,660
be captured by our cat block.

124
00:07:13,660 --> 00:07:19,060
First we hide our loading indicator.

125
00:07:19,060 --> 00:07:21,780
Then we print out the useful error to our

126
00:07:21,780 --> 00:07:30,900
console using the error object that was returned.

127
00:07:30,900 --> 00:07:34,340
And finally, for the user to be aware of what

128
00:07:34,340 --> 00:07:37,320
just happened, we're going to show an error

129
00:07:37,320 --> 00:07:43,120
message that says, error processing image.

130
00:07:43,120 --> 00:07:45,700
Please try again.

131
00:07:45,700 --> 00:07:47,660
I'm gonna simply make it an important looking

132
00:07:47,660 --> 00:07:50,640
message by setting the type to danger.

133
00:07:50,640 --> 00:07:51,740
Awesome.

134
00:07:51,740 --> 00:07:53,900
We're done integrating and in the next video,

135
00:07:53,900 --> 00:07:55,480
we'll be testing this out to make sure that

136
00:07:55,480 --> 00:07:57,940
there are no errors and everything works as

137
00:07:57,940 --> 00:07:59,000
expected.