1
00:00:02,460 --> 00:00:08,530
Let's move on to the burger builder. The burger builder here is also a class-based component,

2
00:00:08,730 --> 00:00:10,330
so time to convert it,

3
00:00:10,440 --> 00:00:11,940
you know the game.

4
00:00:12,300 --> 00:00:15,300
We change it to a functional component like that

5
00:00:15,600 --> 00:00:21,360
and in there, I'm managing state and I have componentDidMount, so we automatically see we'll need to import

6
00:00:21,900 --> 00:00:28,980
useState and useEffect. So back in the functional component body,

7
00:00:28,980 --> 00:00:31,240
we're managing the purchasing state,

8
00:00:31,320 --> 00:00:40,710
so I'll useState here and set this to false initially and here, extract purchasing and set purchasing

9
00:00:41,520 --> 00:00:49,030
as elements and componentDidMount is of course replaced with a call to useEffect where we pass in

10
00:00:49,030 --> 00:00:56,410
a function where I then call just props onInitIngredients and to only call this is when the

11
00:00:56,410 --> 00:01:03,490
componentDidMount, we pass a second argument which is this empty array. Now updatePurchaseState should become a

12
00:01:03,490 --> 00:01:10,360
constant here and let's adjust the syntax to fit an arrow function here or to be an arrow function,

13
00:01:10,360 --> 00:01:14,850
the rest here can stay as it is and purchaseHandler also is a constant now.

14
00:01:14,860 --> 00:01:23,060
Now all the places where we have this props should become just props

15
00:01:23,160 --> 00:01:29,700
and when we call this set state purchasing true, we simply call set purchasing true using that function

16
00:01:29,700 --> 00:01:35,480
returned by useState. The purchaseCancelHandler should also be turned into a constant,

17
00:01:35,490 --> 00:01:41,430
so into a constant holding that function and in here where I call set state to set purchasing to false,

18
00:01:41,490 --> 00:01:49,620
I call set purchasing and pass in false, again using that function returned by useState. The

19
00:01:49,620 --> 00:01:54,840
purchaseContinueHandler also is turned into or is converted into a constant here,

20
00:01:54,960 --> 00:02:03,440
this props in the entire application should be converted to just props.

21
00:02:03,530 --> 00:02:09,210
So I did this for all occurrences in this component here by selecting them all simultaneously,

22
00:02:09,260 --> 00:02:15,200
you can also do this with search and replace in your IDE if you have no multi-cursor feature as I do.

23
00:02:15,200 --> 00:02:18,620
And with that, let's also remove that render method here of course

24
00:02:18,650 --> 00:02:24,830
and one closing curly brace and since I'm down here, we can already adjust the export name.

25
00:02:24,830 --> 00:02:30,740
So here it should be burger builder with a lowercase b because I named my constant like that, the constant

26
00:02:30,770 --> 00:02:33,530
that holds this functional component.

27
00:02:33,530 --> 00:02:38,590
So scrolling up again, I got all these functions now stored in constants,

28
00:02:38,750 --> 00:02:41,730
we now need to work on the places where we use them.

29
00:02:41,780 --> 00:02:48,200
So if I scroll down, here when I call this updatePurchaseHandler should be just updatePurchaseHandler

30
00:02:48,200 --> 00:02:48,830
.

31
00:02:48,830 --> 00:02:52,190
This purchaseHandler should be just purchaseHandler.

32
00:02:56,940 --> 00:03:02,580
Scrolling further down, this purchaseCancelHandler and this purchaseContinueHandler should also

33
00:03:02,580 --> 00:03:07,040
be converted to just the function calls without this

34
00:03:07,260 --> 00:03:13,170
and in places where we call this state purchasing, we should just use purchasing because purchasing

35
00:03:13,290 --> 00:03:22,070
is that constant we extract from the array we get back from our useState call. So let's scroll down

36
00:03:23,470 --> 00:03:26,050
and here where I call this purchaseCancelHandler,

37
00:03:26,050 --> 00:03:29,550
this should also be converted in just purchaseCancelHandler.

38
00:03:29,550 --> 00:03:31,310
Now let me search for this,

39
00:03:31,330 --> 00:03:31,530
yes

40
00:03:31,540 --> 00:03:37,750
here in the comment, that is OK, no other this keyword to be found here and therefore let's reload. The

41
00:03:37,750 --> 00:03:42,040
burger builder should still work by the way,

42
00:03:42,040 --> 00:03:46,800
I noticed a bug here which we had in the final project too unfortunately.

43
00:03:46,870 --> 00:03:50,420
If you deduct an ingredient, the price still goes up,

44
00:03:50,440 --> 00:03:53,940
this has nothing to do with React hooks or with Redux,

45
00:03:54,070 --> 00:04:00,340
this is simply a little error here in the burger builder reducer. There if you go to remove ingredient,

46
00:04:01,000 --> 00:04:06,790
you should of course deduct that price and not add it,

47
00:04:06,820 --> 00:04:09,410
so I use a minus here for the total price

48
00:04:09,520 --> 00:04:14,950
and after doing that, if you remove an ingredient, the price goes down as it should. But other than that,

49
00:04:14,950 --> 00:04:22,800
the more important part is that indeed, the rest here works just as it worked before.

50
00:04:22,810 --> 00:04:23,230
Awesome.