1
00:00:00,120 --> 00:00:04,170
In this lecture, we are going to update the title of the clip in the database.

2
00:00:04,470 --> 00:00:07,740
There are a couple of steps you'll need to perform during this process.

3
00:00:08,039 --> 00:00:12,750
We should provide feedback to the user to inform them of the status of their form submission.

4
00:00:13,020 --> 00:00:17,160
We can reuse the alert component to output the submission status.

5
00:00:17,550 --> 00:00:21,900
In fact, we can reuse some of the code we've written for the upload component.

6
00:00:22,170 --> 00:00:25,530
The forms for uploading a clip and editing a clip are similar.

7
00:00:25,860 --> 00:00:28,840
We'll be able to borrow code from the upload components.

8
00:00:29,160 --> 00:00:31,920
Open the upload template file in your editor.

9
00:00:34,570 --> 00:00:37,750
Search for the app alert component inside of the template.

10
00:00:40,350 --> 00:00:43,410
We're going to copy the entire component from the template.

11
00:00:45,940 --> 00:00:48,490
Next, open the edit template file.

12
00:00:50,910 --> 00:00:53,310
Paste the template above the form element.

13
00:00:55,600 --> 00:01:01,960
We can safely remove the second paragraph tag, which stores the percentage of the upload, this functionality

14
00:01:01,960 --> 00:01:03,910
won't be available from this component.

15
00:01:04,180 --> 00:01:10,540
After adding the template, we should define the properties used by this component there the show alert,

16
00:01:10,720 --> 00:01:13,840
alert color and alert message properties.

17
00:01:14,350 --> 00:01:20,800
Before defining these properties, we should bind the disabled attribute on the button element to disable

18
00:01:20,800 --> 00:01:21,430
submission.

19
00:01:21,910 --> 00:01:25,090
The button can be borrowed from the upload template file.

20
00:01:25,330 --> 00:01:29,140
Switch back to this file and grab a copy of the button element.

21
00:01:31,710 --> 00:01:35,340
Back in the edit template, scroll down to the bottom of the form.

22
00:01:35,580 --> 00:01:36,930
Let's replace the button.

23
00:01:39,470 --> 00:01:45,710
Pay close attention to the buttons bindings or using a property called in submission to manipulate the

24
00:01:45,710 --> 00:01:46,760
buttons appearance.

25
00:01:47,030 --> 00:01:52,610
One more thing we should handle the form submission with the Nji Submit Directive.

26
00:01:52,970 --> 00:01:56,630
Scroll back to the opening form tag on this tag.

27
00:01:56,780 --> 00:02:00,980
Bind the energy submit event to a function called Submit.

28
00:02:03,560 --> 00:02:04,800
Our template is ready.

29
00:02:05,060 --> 00:02:09,470
Let's open the edit component class file to define these properties.

30
00:02:11,890 --> 00:02:19,540
In this class, defined two properties called in submission and show alerts set both properties to false.

31
00:02:22,200 --> 00:02:28,980
The information property will be used to disable the submission button by default, it'll be false to

32
00:02:28,980 --> 00:02:29,640
enable it.

33
00:02:30,000 --> 00:02:34,500
The show alert property will be used to display the alert message.

34
00:02:34,950 --> 00:02:36,780
It'll also be false to hide.

35
00:02:36,780 --> 00:02:41,700
The alert message will create another property for the color of the alert box.

36
00:02:41,940 --> 00:02:45,000
The alert color property will be set to blue.

37
00:02:47,650 --> 00:02:53,200
Lastly, at a property called Alert Message, the value for it will be the following.

38
00:02:53,410 --> 00:02:54,160
Please wait.

39
00:02:54,310 --> 00:02:55,300
Updating clip.

40
00:02:57,900 --> 00:03:01,590
We'll use this property for the inner text of the alert box.

41
00:03:01,890 --> 00:03:03,270
Our property's already.

42
00:03:04,780 --> 00:03:11,200
The last step is to add the submit function at the bottom of the class defined the submit function.

43
00:03:13,800 --> 00:03:16,650
The submit function will perform two actions.

44
00:03:16,890 --> 00:03:21,030
Firstly, it should update the properties for the alert box and form.

45
00:03:21,390 --> 00:03:24,390
We should inform the user their submission has started.

46
00:03:24,990 --> 00:03:27,930
Secondly, it should send the data to Firebase.

47
00:03:28,140 --> 00:03:30,030
We will start with the alert box.

48
00:03:30,300 --> 00:03:37,230
The first properties will update are the information and show alert properties set both to true.

49
00:03:39,780 --> 00:03:46,320
Devalue will disable the button and make the alert box visible afterward, the alert colour property

50
00:03:46,320 --> 00:03:47,550
will be set to blue.

51
00:03:49,590 --> 00:03:54,850
It's already set to the blue class, but we should reset the form in case of submissions.

52
00:03:55,200 --> 00:03:57,900
The message will also be the same as the defaults.

53
00:04:00,430 --> 00:04:06,910
The alert box is ready, we can start to make a request to the database, the type of request we want

54
00:04:06,910 --> 00:04:08,860
to make is to update the data.

55
00:04:09,220 --> 00:04:13,090
We've learned how to insert and select data in Firebase.

56
00:04:13,450 --> 00:04:16,959
Updating data won't be too different than what we've done before.

57
00:04:17,320 --> 00:04:20,470
This request should be initiated by our service.

58
00:04:20,800 --> 00:04:23,890
This way, other components can update clips.

59
00:04:24,130 --> 00:04:26,590
Let's open the clip service file.

60
00:04:29,160 --> 00:04:33,240
Inside our service, we can define a method called update clip.

61
00:04:35,840 --> 00:04:42,560
We're going to ask for two pieces of information as arguments inside the functions, arguments add the

62
00:04:42,560 --> 00:04:46,070
ID and title, both arguments must be a string.

63
00:04:48,660 --> 00:04:55,860
The aid will help us select a document to update a document can be updated after we've selected it in

64
00:04:55,860 --> 00:04:56,550
the function.

65
00:04:56,670 --> 00:05:02,580
Let's select a document by calling the this short clip collection stopped document function.

66
00:05:05,240 --> 00:05:11,990
The document function allows you to select a document by its side will pass in the ID argument.

67
00:05:14,420 --> 00:05:18,920
The document function will return and object where we can access its data.

68
00:05:19,250 --> 00:05:25,670
In addition, we have access to functions for interacting with the document or going to chain of function

69
00:05:25,670 --> 00:05:26,750
called update.

70
00:05:29,300 --> 00:05:33,740
The update function will allow us to update any of the properties inside it.

71
00:05:34,100 --> 00:05:38,480
We're not required to update every property if we omit a property.

72
00:05:38,540 --> 00:05:41,390
Firebase will leave the original value alone.

73
00:05:41,900 --> 00:05:44,330
We don't have to pass in the whole object.

74
00:05:44,600 --> 00:05:48,200
Another option is to add additional properties to the object.

75
00:05:48,440 --> 00:05:49,850
It's a flexible function.

76
00:05:50,030 --> 00:05:51,560
Let's pass in the title.

77
00:05:54,140 --> 00:06:00,560
The update function will return a promise we're going to return the promise to allow components to handle

78
00:06:00,560 --> 00:06:01,420
the response.

79
00:06:03,870 --> 00:06:09,930
Let's start handling the response in the edit component, the clip service will need to be injected

80
00:06:09,930 --> 00:06:14,580
into the component at the top of the file import the clip service.

81
00:06:16,980 --> 00:06:20,370
Next, we can inject this service into our class.

82
00:06:25,700 --> 00:06:30,410
Finally, we can start using the update click function in the submit button.

83
00:06:30,740 --> 00:06:35,600
We're going to invoke this function after updating the properties for the alert component.

84
00:06:41,580 --> 00:06:48,000
The update clip function returns a promise the async await key words should be added in the appropriate

85
00:06:48,000 --> 00:06:49,770
locations of our functions.

86
00:06:52,290 --> 00:06:58,590
Otherwise, barcode after the function may run, we should wait until the promise is resolved before

87
00:06:58,590 --> 00:07:03,840
we display a success message, an error message should appear for problems with the request.

88
00:07:04,110 --> 00:07:07,950
Surround the update function with a try catch block statement.

89
00:07:10,400 --> 00:07:13,040
If we get an error, we'll do two things.

90
00:07:13,310 --> 00:07:15,710
First, we'll stop the function from running.

91
00:07:15,980 --> 00:07:20,960
Second, we'll update the alert properties to inform the user an error has occurred.

92
00:07:21,350 --> 00:07:24,260
The information property will be set to false.

93
00:07:24,590 --> 00:07:26,900
This value will re-enable the form.

94
00:07:29,510 --> 00:07:31,730
Update the alert color to red.

95
00:07:34,250 --> 00:07:35,810
The message will be the following.

96
00:07:35,990 --> 00:07:37,160
Something went wrong.

97
00:07:37,280 --> 00:07:38,390
Try again later.

98
00:07:40,830 --> 00:07:43,470
Lastly, will return the function.

99
00:07:46,020 --> 00:07:52,080
If the update function runs successfully, we'll update the alert properties to inform the user.

100
00:07:52,380 --> 00:07:55,110
We won't bother with redirecting or reloading.

101
00:07:55,110 --> 00:07:59,850
The page will even enable the form again if they want to make further changes.

102
00:08:00,090 --> 00:08:04,410
Like before we'll set the information property to false.

103
00:08:07,040 --> 00:08:10,100
The alert color property will be set to green.

104
00:08:12,550 --> 00:08:15,970
Lastly, the message will be the following success.

105
00:08:18,530 --> 00:08:20,660
The process is pretty straightforward.

106
00:08:20,840 --> 00:08:24,710
Keep in mind, this is one way of tackling form submissions.

107
00:08:25,010 --> 00:08:26,840
You may want to do it another way.

108
00:08:27,170 --> 00:08:27,920
That's fine.

109
00:08:28,160 --> 00:08:30,740
This is just how I check form submissions.

110
00:08:31,160 --> 00:08:33,820
Let's give things a test in the browser.

111
00:08:33,830 --> 00:08:35,419
Edit any of the clips.

112
00:08:37,900 --> 00:08:43,510
After making changes to a clip, we will be able to submit the form without them conflicting with one

113
00:08:43,510 --> 00:08:48,490
another, the form submission will work successfully or so it seems.

114
00:08:48,700 --> 00:08:52,570
If we go back, the changes are not being reflected on the page.

115
00:08:52,840 --> 00:08:57,340
If we were to refresh the page, the updates are being applied to our data.

116
00:08:57,910 --> 00:09:00,460
The update occurs in the edit component.

117
00:09:00,760 --> 00:09:05,260
The manage component does not get updated on the changes made to its data.

118
00:09:05,590 --> 00:09:12,010
Applying updates in both components will require sending the data back up to the parent component in

119
00:09:12,010 --> 00:09:12,970
the next lecture.

120
00:09:13,120 --> 00:09:17,380
We'll fix this problem by sending the data back to the parent component.