1
00:00:02,150 --> 00:00:04,710
Besides these improvements we already applied,

2
00:00:04,760 --> 00:00:08,420
there are other things we can optimize in our application,

3
00:00:08,420 --> 00:00:17,420
for example we do we use this updateObject utility from our reducers, there we call updateObject all

4
00:00:17,420 --> 00:00:18,810
the time.

5
00:00:18,810 --> 00:00:27,810
Now if we have a look at our contact data component, there we will see that in the inputChangedHandler,

6
00:00:27,920 --> 00:00:35,080
we're also kind of updating objects to the order form and to order form elements in there.

7
00:00:35,390 --> 00:00:39,150
So we're also updating objects here,

8
00:00:39,170 --> 00:00:45,990
why don't we use our utility function here then? Right now, it's placed in the store folder, 

9
00:00:46,220 --> 00:00:51,580
I'll now create a new subfolder directly in the source folder which I'll name shared

10
00:00:51,830 --> 00:00:58,370
and in there, I'll add my or I'll move my utility file into that folder,

11
00:00:58,670 --> 00:01:02,870
that of course means that the imports in my reducers need to be adjusted.

12
00:01:02,900 --> 00:01:07,040
Now it's imported from one level up, an additional level up,

13
00:01:07,040 --> 00:01:09,780
then the shared folder and then the utility file.

14
00:01:09,950 --> 00:01:17,690
So this adjusted import path has to go into all my reducers so that the application then works again.

15
00:01:18,350 --> 00:01:23,270
With that it's now placed in a path where it makes sense because now we can access it from anywhere in the

16
00:01:23,270 --> 00:01:29,460
application without the path looking strange because why would a general utility be placed in the store folder,

17
00:01:29,720 --> 00:01:39,860
and now we can go to contact data and import this utility function. So we can import our updateObject

18
00:01:39,860 --> 00:01:41,960
function from

19
00:01:41,960 --> 00:01:49,370
and now we just go up all the way to the top to the shared folder and there to the utility file.

20
00:01:49,370 --> 00:01:52,300
Now we can use updateObject in this file too

21
00:01:52,490 --> 00:02:00,680
and I want to use it in my inputChangedHandler for updatedFormElement.

22
00:02:00,890 --> 00:02:09,710
In the end, we can call updateObject here and pass my order form and there, it shows the control.

23
00:02:09,770 --> 00:02:18,750
So I can pass this.state.orderForm and access the input identifier as the old object,

24
00:02:18,750 --> 00:02:21,520
this is essentially what I want to update, the object

25
00:02:21,530 --> 00:02:27,560
I plan to update and then I need to pass a second argument which is a javascript object with all the

26
00:02:27,560 --> 00:02:30,080
properties I want to overwrite.

27
00:02:30,140 --> 00:02:32,440
Now these properties can be found here,

28
00:02:32,450 --> 00:02:34,210
value, valid and touch

29
00:02:34,430 --> 00:02:43,040
so I can simply set up value here, valid and touched and copy the respective values I use down there

30
00:02:43,400 --> 00:02:46,220
without semi-colons at the end because we're inside an object

31
00:02:46,250 --> 00:02:48,770
so let's add a comma instead.

32
00:02:48,950 --> 00:02:55,980
The same for checkValidity here and the same for true on touched,

33
00:02:56,020 --> 00:02:58,830
so let's replace the semi-colon here

34
00:02:58,830 --> 00:03:06,670
too. And now we're updating the form element by taking the old one and updating it safely with the update

35
00:03:06,700 --> 00:03:11,110
object helper method, we can now get rid of all these lines of code

36
00:03:11,410 --> 00:03:15,910
and now we want to update the overall order form for a given input identifier.

37
00:03:16,060 --> 00:03:24,220
Well for this, we can now take this code here and create this constant but create it by also calling

38
00:03:24,840 --> 00:03:26,830
updateObject here,

39
00:03:26,980 --> 00:03:33,580
passing this.state.orderForm as the old object and a javascript object where we want to configure the

40
00:03:33,580 --> 00:03:40,600
new properties and the new property should be this dynamic input identifier where we pick a specific

41
00:03:40,600 --> 00:03:46,940
control, which we of course store as properties in our order form object in the state,

42
00:03:46,990 --> 00:03:49,840
like name, street and so on.

43
00:03:51,270 --> 00:03:58,510
So this is now what I want to update and the value will be the updatedFormElement here

44
00:03:58,510 --> 00:04:00,590
so now we can get rid of this line too.

45
00:04:01,050 --> 00:04:06,260
And now we optimize this a bit and we're using to utility function we already used before,

46
00:04:06,630 --> 00:04:11,660
well one note checkValidity here where we use updatedFormElement value,

47
00:04:11,820 --> 00:04:14,820
that of course has to be event.target.value now

48
00:04:14,970 --> 00:04:20,910
and here for validation, it should be this.state.orderForm,

49
00:04:21,010 --> 00:04:26,190
essentially it should be this input identifier here. With that let's see if that works,

50
00:04:26,220 --> 00:04:34,230
if we now save that and go back to our application, let's expand this, let's quickly login here,

51
00:04:35,030 --> 00:04:36,630
switch to sign in,

52
00:04:36,910 --> 00:04:43,320
now if I go on to the contact data form here, let's see if that still works.

53
00:04:44,800 --> 00:04:45,540
Looks good,

54
00:04:45,610 --> 00:04:48,940
I'm still getting validation errors and so on,

55
00:04:48,970 --> 00:04:53,650
so i seemed to be required to enter valid information here,

56
00:04:53,800 --> 00:05:01,060
so that is a good sign that our orders still is processed correctly and if we send that auth to the back

57
00:05:01,060 --> 00:05:03,310
end, we expect this new order,

58
00:05:03,310 --> 00:05:06,430
we also see that all the data was passed on correctly.

59
00:05:06,430 --> 00:05:11,790
So now this is working, we're using updateObject and we're not limited to this file,

60
00:05:11,840 --> 00:05:14,020
the auth container is similar. There

61
00:05:14,130 --> 00:05:15,670
we also handle a form

62
00:05:15,910 --> 00:05:26,380
and there, we also update our controls. So we can also import this function there, import updateObject

63
00:05:26,770 --> 00:05:27,730
from

64
00:05:27,730 --> 00:05:34,120
and now let's go up to our shared folder and there, to the utility file.

65
00:05:34,120 --> 00:05:38,930
Now let's grab updateObject and use it in the auth container too, here

66
00:05:39,220 --> 00:05:48,010
I want to update my total controls so I'll pass this.state.controls as the old object which I want to

67
00:05:48,010 --> 00:05:53,720
update and then I'll pass a javascript object with the properties I want to change

68
00:05:53,740 --> 00:05:59,210
and here it's this control name where I can just cut this code and paste it in here,

69
00:05:59,380 --> 00:06:04,450
get rid of the old one and in control name I again update an object,

70
00:06:04,450 --> 00:06:11,980
so I simply nest another updateObject call where I update this object which I distributed prior to

71
00:06:11,980 --> 00:06:20,480
my utility function and the properties I passed to this internal object are value, valid and touched,

72
00:06:20,740 --> 00:06:22,990
just like in the contact data.

73
00:06:23,500 --> 00:06:30,950
And now again I'm using updateObject to have a little bit leaner code and less duplication,

74
00:06:31,050 --> 00:06:34,460
of course you might find more places in the application where you can use it,

75
00:06:34,530 --> 00:06:40,660
definitely feel free to dig through with the application and use updateObject or other utility functions

76
00:06:40,680 --> 00:06:41,860
you can come up with

77
00:06:42,030 --> 00:06:43,540
whenever they make sense.