So let's work on the ordering part now.
Whenever a new order is placed,
we wanna send a notification, a push notification.
Now we are storing this owner push token
which we need for sending a notification.
And actually, we've got two options now.
Since this is all on the back end,
we could send this request to expose push server
from the back end, either by using one of the Expo SDKs
I showed you earlier, like the one for node and PHP,
depending on which language you are using on your back end,
or by simply sending that same HTTP request
we sent from inside the app earlier from your back end.
That would also be an option.
Now Firebase is a special back end, we don't fully own it.
We instead use the services that we have.
Indeed, with Cloud functions, there would be a service
that allows us to run server side code,
and we could make that all work.
But since using Cloud Functions isn't entirely free anymore,
I don't wanna show this here.
I just want you to know that you absolutely
could come up with code on the server,
that would cause the push notification to be sent
from inside this server
so that this triggering happens here on the server.
Now, I will do it from the app instead,
since that's easier for us here,
but that is only one possible option.
Now from inside the app, we'll send the notification
just as we did it before.
Here in add order, we do want to send it
and there we got our cart items.
Now the cart items we're getting,
let's have a brief look at what exactly is in there.
So if you go to the shop, to the orders, to the cart screen,
that's where we dispatch this action,
the add order action with the card items,
and if we have a look at our cart items,
we see that in the end, card items are fetched
from our Redux store.
And card items will be an array,
where we in the end have objects where every object
has a product ID, product, title, product price,
quantity, and so on.
So what we need here is we also need the product push token,
so the token of the creator of this product in the end,
and we can get this from inside our state
there from the cart, from the items for that key.
So basically, what we do up there,
and there, let's look for a push token.
Now this is a field which won't be there yet
because we first of all
need to make some changes to our store.
There, let's check out the cart reducer.
When a product is added to the cart,
we get information about this product here.
And from there we for example, extract the title
and the price.
And then in the end, we add this price and title
to our cart item.
Now we don't just need the price and the title,
we also need the push token.
So here, let's also extract the push token off this product.
So added product dot push token, for example.
This is also a field which won't exist on a product yet,
but we'll change this soon.
And then we can add this push token,
let's say as a third argument here, to cart item,
and also here, sorry, it's the fourth argument, of course.
So I'm adding this as a fourth argument
to the cart item constructor.
Now for that, we need to change the card item constructor.
So here card item should now actually get this push token
as a fourth argument, and then stored this here.
So this push token is equal to push token.
But we're still not there
because now I'm storing this for every card item.
But I'm getting this
from my product, and a product doesn't have a token yet.
Yes, it has one on Firebase,
but we're not fetching that data
or we're not using that data in our client side app
in this React Native app.
Instead, here in the products actions file here,
products.js in actions where we do fetch all products,
here, fetch products,
what we do is we extract things like the ID,
title, price, and so on and create a new product
based on our product model with that information.
Now here, we should also get that owner push token,
just like we're extracting the owner ID.
So here we wanna get the owner push token
for the individual products and add this
to our product model, for example, as a third argument.
So now with that, we need to go to the products model,
to the product model here, sorry, product in models,
and there as a third argument,
we now need to accept the owner push token and store this.
And I'll name this field push token
and store my owner push token in it
because push token is the field name
which I now also used here in the cart reducer.
There, I'm accessing added product dot push token.
So if you use the different name here to retrieve the token
for a given product, you also need to adjust this name here
in the product model.
But with all those changes, we're making sure
that we're fetching the token that is stored
for every product and we're using it
and storing it in the front end in our models as well.
And we're storing it in every product model
which we're creating every product instance.
And we're also storing it in our cart items
which we're adding to our cart here in the Redux store.
So now every card item will have a push token,
and our card item model also stores that
in a key named push token.
And therefore, now we'll finally be able to get that data
when an order is placed.
Now we don't just need to update how we create products here
in the products.js file in the actions file,
but also in the reducers.
In the product.js file in reducers,
there, we have to create product case
which we handle where we also instantiate our product.
Now since we changed our product model
to take the push token as the third argument here,
we also need to update this here, of course.
So here, the third argument,
the title, should no longer be the title,
but instead, it should be coming from our product data,
and there, it should be the push token.
Now for data, of course, in turn,
we need to check where we dispatch create product
to ensure that the action that adds product data
also adds a push token to that product data.
We also create a new product down there in update product.
And there, it's the same.
The new third argument which we get here
in the product constructor should in this case,
be state user products for the given product index,
and then there again, it's the push token.
Push token is the name we have here
because that here will act as a product stored
in our user products field and that product
will have the form a flower product model,
and there, I pick push token as a name,
so this also is push token as a name here.
So with that, back to the create product case,
as I said, we now need to go to the place
where this action is dispatched
to ensure that the proper data,
the push token is added to the action.
Now it's the products.js file in the actions folder,
and there, the create product action creator
where we do dispatch this create product action in the end.
And therefore here to product data, anywhere in this object,
we should make sure that we also add a push token,
and now this push token value is simply the push token
we already are using up there.
So we should store this here as well.
And with that, we ensure that we don't get an error
when we create a new product.
Otherwise, we won't be getting one.
So back here in the orders actions file,
in the add order action.
Here, we now want to get our token from inside the card item
and send such push notification request
maybe after adding the actual order on our server,
because sending the push notification is less important
than storing the data on the server, I would argue.
So therefore, after this request was sent here,
after we added the order in our Redux store,
after all of that, we want to send our push notifications.
Now for that, we'll have to go through
all the card items we have here
and send one notification per item.
That's another reason why you might wanna consider
doing this on the server side.
If you have a lot of items, this can take some time
and at the moment, that will all be worked that happens here
in our React Native app on the client, not on the server.
On the server might be better
because it takes that work off your client.
But for the reasons mentioned,
since we don't have our own server,
since we're using Firebase and Cloud Functions
aren't free to use anymore, because of all those reasons,
I will actually use the sub-optimal solution
of triggering that on the client.
So inside of the React Native app, and therefore here,
we wanna go through all the card items we have.
So through all our card items here, and for every card item,
we wanna get the push token
simply by accessing card item dot push token,
and then we wanna send our request.
So again, with the fetch API here,
we want to send the request to HTTPS.
And then that was x dot host,
slash dash dash slash API slash v2 slash push slash send,
and add the second object where we configure this request
to set its methods to post,
and to also add a couple of headers here.
And we wanted the accept header
which should be application, JSON,
we wanted the accept encoding header
which should be gzip, deflate,
and we want the content type header here
which should also be application JSON.
But now even more important,
we wanna add our body to the request
which should be a JSON stringified object,
in which we now point at this push token with the to field.
And then we can add extra information.
We could add extra metadata about the card item,
for example, for which there's notification's being sent.
But here, I'll just as a title of order was placed,
and then body for this push notification
where I simply shared, let's say,
the title of the product that was ordered.
Keep in mind that in every card title,
we store the product title on a product title field.
So therefore, back here in the orders actions file,
I can access card item dot product title
to share that product title as part of the push notification
that should be sent.
And this is in the end it.
With that, we're going to schedule a bunch of HTTP requests.
I'm not waiting for their responses,
I'm not handling the responses, you could look
into those responses and try handling possible errors.
But in the end, this should work.
And if for some reason,
one push notification shouldn't go through,
in this case, it's also not the end of the world,
but it should really work.
So let's now save this, and let's give it a try.
So back here in my application, I'll add a second product
simply to see if we get two push notifications.
I'll use the same image, though,
enter my price and a description.
Confirm this and now go to the products area,
and add both to my cart.
Now, these are my own products, but in this app,
I can still order them.
So now let's press ordered out
which should place the order and we don't see anything.
Now does this mean that we have an error?
Not necessarily, we don't see anything
because you might remember
that if the app is running in foreground by default,
no notification is shown.
And that's the same for push notifications
because as you also learned,
they just trigger local notifications in the end.
So let's fix that and let's make sure we can see something.