1
00:00:01,730 --> 00:00:10,480
Now if we look at '/profile/:id', well this isn't really useful for going to 'home' is it? Because once

2
00:00:10,480 --> 00:00:23,150
we sign in we have our user information and perhaps '/profile/:id' will be useful for us to grab our

3
00:00:23,150 --> 00:00:29,920
profile and perhaps update our name or our email.

4
00:00:30,010 --> 00:00:34,600
That's something that perhaps we can incorporate into our app in the future.

5
00:00:35,870 --> 00:00:45,110
But the one I really want to focus on is this our last route, which is 'image', which allows us to increment

6
00:00:45,500 --> 00:00:48,400
the number of our 'entries'.

7
00:00:48,460 --> 00:00:50,350
So let's work on that in this video.

8
00:00:50,350 --> 00:00:59,290
Every time we submit on the front-end we want the user to hit this route so that we can increase their

9
00:00:59,380 --> 00:01:03,750
entries count. Lets give that a go.

10
00:01:04,010 --> 00:01:15,450
If we go back to our react app, we can go into our App.js, and we have our Clarifai API.

11
00:01:15,470 --> 00:01:16,320
That's when we do

12
00:01:16,330 --> 00:01:22,210
'onButtonSubmit' and this is specific to that homescreen of ours.

13
00:01:26,860 --> 00:01:35,860
Looking at this then what we would want to do is if Clarifai gives us a response in that case on top

14
00:01:35,860 --> 00:01:41,970
of displaying and calculating as long as we have a response

15
00:01:48,790 --> 00:01:59,370
in that case we would want to fetch the localhost route at 3000.

16
00:01:59,590 --> 00:02:02,570
And this time run '/image'.

17
00:02:07,450 --> 00:02:09,380
This is a POST request.

18
00:02:09,490 --> 00:02:16,990
So in order to do a POST request – and actually lets do this as a PUT request.

19
00:02:17,050 --> 00:02:24,240
I think thats what we planned on initially and because we're updating the user's information PUT will

20
00:02:24,250 --> 00:02:27,800
be a better use of it but it will work both ways.

21
00:02:27,880 --> 00:02:34,390
Is just a way for us to keep with the standards – that PUT is the way to update things.

22
00:02:35,920 --> 00:02:39,760
And a PUT? request works the same way as we've done before.

23
00:02:39,760 --> 00:02:45,250
Instead of putting the method POST we will actually have

24
00:02:48,610 --> 00:02:49,780
the method PUT.

25
00:02:53,820 --> 00:02:54,850
Again, same thing

26
00:02:54,850 --> 00:03:04,590
'application/json as our 'Content-Type' and we want to send within the body – well, do we request any information?

27
00:03:04,590 --> 00:03:09,460
The only thing that the put request needs is 'id'.

28
00:03:09,750 --> 00:03:10,910
So let's do that.

29
00:03:10,950 --> 00:03:18,130
We will just send 'id', which we have of the user when they sign in.

30
00:03:18,390 --> 00:03:29,600
And that is 'this.state.user.id'.

31
00:03:29,740 --> 00:03:30,890
Let's see if that works.

32
00:03:31,870 --> 00:03:32,870
I'm going to save

33
00:03:37,710 --> 00:03:48,410
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.

34
00:03:53,250 --> 00:03:57,390
Do this face this time.

35
00:03:57,480 --> 00:04:02,050
View Image. If I go to 'here' and I click Detect ...

36
00:04:06,770 --> 00:04:08,570
I get the face.

37
00:04:08,570 --> 00:04:13,090
But our current rank isn't updated.

38
00:04:13,320 --> 00:04:15,840
And if you remember our rank is more of the 'entries'.

39
00:04:15,970 --> 00:04:18,589
So let's change the wording there so it doesn't confuse us.

40
00:04:20,670 --> 00:04:33,140
"your current entry count is..." and we want to update the 'entries'. If we go back here once we send this we

41
00:04:33,140 --> 00:04:38,440
want to say that again '.then()' we'll get a response.

42
00:04:40,320 --> 00:04:45,080
And this response will go through the motions of running

43
00:04:45,210 --> 00:04:49,040
'json'

44
00:04:49,550 --> 00:05:02,640
And finally we'll say 'count' will now have to be updated by using 'this' 'setState' 'users'

45
00:05:05,700 --> 00:05:10,470
'id' or 'entries' to the 'count' number.

46
00:05:10,800 --> 00:05:14,720
Let's try that again.

47
00:05:17,420 --> 00:05:18,970
I'm going to sign in as John.

48
00:05:22,560 --> 00:05:26,610
'cookies'. Let's copy and paste that face again

49
00:05:30,130 --> 00:05:30,700
Detect

50
00:05:34,420 --> 00:05:35,750
Let's look at the Console.

51
00:05:35,770 --> 00:05:39,340
Let's just go through the network and see what we had.

52
00:05:43,290 --> 00:05:44,520
I see that the image

53
00:05:47,980 --> 00:05:52,160
the Payload that we recieve is '123'.

54
00:05:52,260 --> 00:05:57,990
When we look at the response we have '2'. All right, so looks like everything is working.

55
00:05:57,990 --> 00:06:01,240
We've sent this twice but it hasn't been updated.

56
00:06:03,920 --> 00:06:15,530
Let's look at our – and we want to make sure that it's 'user' not 'users'.

57
00:06:15,670 --> 00:06:17,250
And let's try that again.

58
00:06:17,800 --> 00:06:18,270
We have

59
00:06:18,310 --> 00:06:26,740
'john@gmail.com' and it'll be 'cookies'. If I click Sign in.

60
00:06:27,180 --> 00:06:27,920
All right.

61
00:06:27,960 --> 00:06:29,600
"Your current count is 3".

62
00:06:29,610 --> 00:06:30,980
If I add another picture

63
00:06:34,200 --> 00:06:34,800
Look at that.

64
00:06:34,900 --> 00:06:38,090
I get "your current entry count is 4".

65
00:06:38,160 --> 00:06:46,570
Ah, but you see how the name gets changed to 'undefined'? Well it's because the way we have it here you see

66
00:06:46,570 --> 00:06:51,090
how 'this.setState' just changes the entire user object?

67
00:06:52,300 --> 00:07:02,030
That's not good is it? Because we need to make sure that 'user' is still the same but we're just updating

68
00:07:02,960 --> 00:07:05,030
the 'user' object.

69
00:07:08,850 --> 00:07:15,420
Now the way to get around this – because like I said before, we're just changing the user object

70
00:07:15,660 --> 00:07:19,870
We can use something called 'Object.assign'.

71
00:07:21,880 --> 00:07:23,210
And you can read up on it.

72
00:07:23,210 --> 00:07:28,120
It's part of the JavaScript spec but you get the target object.

73
00:07:28,120 --> 00:07:32,560
In our case it's 'this.state.user'.

74
00:07:32,560 --> 00:07:36,670
And the second parameter is where you want to extend it with.

75
00:07:36,820 --> 00:07:43,040
In our case the'entries' and 'count'. If we do it like this and save

76
00:07:47,590 --> 00:07:57,900
and let's do 'john@gmail.com' 'cookies' Sign In.

77
00:07:58,050 --> 00:08:00,460
We had to restart the server so now it's at zero.

78
00:08:00,540 --> 00:08:04,200
But if I had a picture ...

79
00:08:08,350 --> 00:08:12,560
Look at that. "John, your current entry count is 1".

80
00:08:12,790 --> 00:08:14,600
And there you go.

81
00:08:14,740 --> 00:08:18,690
The name doesn't change.

82
00:08:18,810 --> 00:08:20,300
So we can sign out.

83
00:08:20,490 --> 00:08:21,710
We can register.

84
00:08:21,870 --> 00:08:24,070
We can sign in.

85
00:08:24,240 --> 00:08:33,270
We have our end points , and using this you can imagine how you can expand your app – you can add

86
00:08:33,299 --> 00:08:39,809
a DELETE for example to '/profile/:id' to delete your account.

87
00:08:39,809 --> 00:08:44,410
You can add a PUT method to update your account.

88
00:08:44,430 --> 00:08:51,420
There's many many things that we can do but I hope you saw the power of the server and the front-end

89
00:08:51,480 --> 00:08:55,750
finally connecting through 'fetch' to create some real functionality.

90
00:08:57,320 --> 00:08:58,860
I'll see you in the next one.