Original subtitles

So let's now make sure that data can be added

or items can be added to the cart.

And for that, I wanna use context.

I wanna manage the overall cart data

through context because we will need it in different places

off the application.

On the meal items,

we need to update the cart and the cart component,

we need to output it, of course.

And we also will need to manage it

in the future because inside of that cart,

later the cart items can also be added or removed again.

So therefore let's start by setting up that cart context.

And for this, I'll add a store folder side by side

to the components and the assets folder.

The name is up to you

but since we are going to store our application

wide state here, store is kind of a convention

in React world

as a name for this application wide state management.

And in there, I'll add a cart-context JS file.

The naming of this file is up to you though.

In here, I will import React from react

because we can then call React, create context.

And I will initialize this context

with some default data, which will not actually be used

but which will give us better auto-completion later.

And here, we'll have an items array

since we are going to manage a couple of cart items.

We'll have a total amount, which is zero,

let's say initially,

and then we'll have two functions

which allow us to update that context.

And that's the add item function

which let's say receives the item that should be added.

And it's the remove item function,

which receives let's say an ID to identify the item

which should be removed from the cart like this.

Now I'll store this in a cart context constant

and I will export this cart context here.

So that's step number one.

Now we've got this context generally created

but now we will also need to manage that context

in some component with use state

or use reducer as you saw it earlier in this course

so that this context can also change

over time and can update parts of the application over time.

And we could do this in the same file here

but I will trade a new file for this

and name it cart provider JS.

Because in here I wanna add our cart provider component

which receives props and of course

which I export and the goal

of this component is simply to manage the current context

to data and provide that context

to all components that want access to it.

And for that here, I will import cart context

from ./cart-context and then return JSX code

because this is a component where I simply

access cartcontext.provider.

And now we can simply pass props.children

between cart context provider.

And this allows us to wrap any components

that should get access

to this context with this cart provider component.

And we can also add all the logic

for managing the context data to this component,

so that all about that is contained in one component

and no other component needs to deal with that.

Now for that, I will add a cart context

helper constant in this component function.

And that is simply an object with items total amount.

So all the fields we set up for the context itself,

this will be the concrete context value though

which will also be updated over time.

And this also holds pointers

for the add item function and for the remove item function.

And we can already add these functions here

and add a add item to cart handler here

where we get the item and then do something with it

in the future and the remove item from card handler function

where we get the ID and do something with it in the future.

And now it's simply point us at these functions

which are stored as values

for add item and remove item in this card context object.

And it's now discard context object here,

which is set as a value or as a value for the value prop

on the cart context provider component here.

And again, this will be dynamic soon.

It's not right now, but it will be dynamic soon.

And with that added,

we can now use this cart provider component

to wrap all components that need access to the cart.

And in our application,

that's actually all the components which are rendered

in the app component.

The cart of course needs access to render the cart items

and also to edit them later

the header needs access to update this batch

in the header button, this batch

where we output the number of cart items,

so the header also needs access to the cart

and the meals need access to the cart

because there we wanna add items to the cart.

So therefore we can replace this fragment here

with cart provider, as a wrapping component.

And of course we should now also import cart provider

from the store folder and then the cart provider file

and we can remove the fragment import.

Now, we could manage that entire context also

in the app JS file therefore,

since we needed an all the components there.

But by using a separate cart provider component,

we keep the app component lean

and don't have to put all the cart management

logic in there.

Simply imagine that you are working

on a bigger application with different app wide states.

Let's say you have a product state and a cart state

and a user state and anything like that.

If you would manage all

of that in the app component, it would become super large.

So having dedicated store components which manage that,

makes a lot of sense.

Now with that, we provide that context

to all of these components.

Now we can leverage it.

For example, in the header cart button,

there we need it to update the appropriate amount

of cart items in that batch.

And hence, what we can do,

is we can use the context in there.

So therefore, definitely try using that context on your own.

In the next lecture, we're going to do it together.