Now if we look at '/profile/:id', well this isn't really useful for going to 'home' is it? Because once
we sign in we have our user information and perhaps '/profile/:id' will be useful for us to grab our
profile and perhaps update our name or our email.
That's something that perhaps we can incorporate into our app in the future.
But the one I really want to focus on is this our last route, which is 'image', which allows us to increment
the number of our 'entries'.
So let's work on that in this video.
Every time we submit on the front-end we want the user to hit this route so that we can increase their
entries count. Lets give that a go.
If we go back to our react app, we can go into our App.js, and we have our Clarifai API.
That's when we do
'onButtonSubmit' and this is specific to that homescreen of ours.
Looking at this then what we would want to do is if Clarifai gives us a response in that case on top
of displaying and calculating as long as we have a response
in that case we would want to fetch the localhost route at 3000.
And this time run '/image'.
This is a POST request.
So in order to do a POST request – and actually lets do this as a PUT request.
I think thats what we planned on initially and because we're updating the user's information PUT will
be a better use of it but it will work both ways.
Is just a way for us to keep with the standards – that PUT is the way to update things.
And a PUT? request works the same way as we've done before.
Instead of putting the method POST we will actually have
the method PUT.
Again, same thing
'application/json as our 'Content-Type' and we want to send within the body – well, do we request any information?
The only thing that the put request needs is 'id'.
So let's do that.
We will just send 'id', which we have of the user when they sign in.
And that is 'this.state.user.id'.
Let's see if that works.
I'm going to save
go back to our app, sign in as our best friend by now, John. I'll click Sign In and let's find a face again.
Do this face this time.
View Image. If I go to 'here' and I click Detect ...
I get the face.
But our current rank isn't updated.
And if you remember our rank is more of the 'entries'.
So let's change the wording there so it doesn't confuse us.
"your current entry count is..." and we want to update the 'entries'. If we go back here once we send this we
want to say that again '.then()' we'll get a response.
And this response will go through the motions of running
'json'
And finally we'll say 'count' will now have to be updated by using 'this' 'setState' 'users'
'id' or 'entries' to the 'count' number.
Let's try that again.
I'm going to sign in as John.
'cookies'. Let's copy and paste that face again
Detect
Let's look at the Console.
Let's just go through the network and see what we had.
I see that the image
the Payload that we recieve is '123'.
When we look at the response we have '2'. All right, so looks like everything is working.
We've sent this twice but it hasn't been updated.
Let's look at our – and we want to make sure that it's 'user' not 'users'.
And let's try that again.
We have
'john@gmail.com' and it'll be 'cookies'. If I click Sign in.
All right.
"Your current count is 3".
If I add another picture
Look at that.
I get "your current entry count is 4".
Ah, but you see how the name gets changed to 'undefined'? Well it's because the way we have it here you see
how 'this.setState' just changes the entire user object?
That's not good is it? Because we need to make sure that 'user' is still the same but we're just updating
the 'user' object.
Now the way to get around this – because like I said before, we're just changing the user object
We can use something called 'Object.assign'.
And you can read up on it.
It's part of the JavaScript spec but you get the target object.
In our case it's 'this.state.user'.
And the second parameter is where you want to extend it with.
In our case the'entries' and 'count'. If we do it like this and save
and let's do 'john@gmail.com' 'cookies' Sign In.
We had to restart the server so now it's at zero.
But if I had a picture ...
Look at that. "John, your current entry count is 1".
And there you go.
The name doesn't change.
So we can sign out.
We can register.
We can sign in.
We have our end points , and using this you can imagine how you can expand your app – you can add
a DELETE for example to '/profile/:id' to delete your account.
You can add a PUT method to update your account.
There's many many things that we can do but I hope you saw the power of the server and the front-end
finally connecting through 'fetch' to create some real functionality.
I'll see you in the next one.