1
00:00:00,820 --> 00:00:05,320
We've now got a producer put together and we need to make sure that we get that off piece of states

2
00:00:05,500 --> 00:00:07,570
back into our Google component.

3
00:00:07,570 --> 00:00:12,730
Now remember this is the part of this retractor or introducing redux that gets to be a little bit kind

4
00:00:12,730 --> 00:00:14,440
of awkward or confusing.

5
00:00:14,680 --> 00:00:19,590
We already had our Google off component wired up to have component level state inside of it.

6
00:00:19,690 --> 00:00:23,380
And so the component itself knew whether or not the user was signed in.

7
00:00:23,380 --> 00:00:28,160
So we've now Accenture essentially extracted that information to a redux store.

8
00:00:28,180 --> 00:00:33,820
And so now we need to pipe that information back into the component that was already containing that

9
00:00:33,820 --> 00:00:34,240
data.

10
00:00:34,240 --> 00:00:38,640
And so I know it feels a little bit awkward to do this but this is the correct way to do it.

11
00:00:38,860 --> 00:00:45,430
So I'm going to open up my components directory and find that Google file and inside of here we're going

12
00:00:45,430 --> 00:00:50,950
to go down to the very bottom and add in a map state to prop's function so right above my export default

13
00:00:50,950 --> 00:00:51,460
statement.

14
00:00:51,490 --> 00:00:58,390
I'll put in Konst map state to prop's So that will be called it's my state object.

15
00:00:58,390 --> 00:01:05,270
And then inside if you're going to return an object with a property is signed in that's going to have

16
00:01:05,360 --> 00:01:09,400
state DOT DOT is signed in like so

17
00:01:12,710 --> 00:01:18,150
it's now the value of is signed in is going to be either Null true or false just as the state value

18
00:01:18,180 --> 00:01:19,820
of is signed in.

19
00:01:19,830 --> 00:01:24,170
Inside of your Was value added value of before.

20
00:01:24,170 --> 00:01:28,360
So now we're going to go through this component and do a pretty good refactor to update.

21
00:01:28,590 --> 00:01:30,430
Yeah a couple of different things inside of your.

22
00:01:30,450 --> 00:01:34,000
And make sure that we're not making use of component level state anymore.

23
00:01:34,010 --> 00:01:41,670
So first off inside of my class at the very top on which removed the state initialization.

24
00:01:41,700 --> 00:01:44,310
Next up inside the then statement right here.

25
00:01:44,340 --> 00:01:50,560
I need to make sure where we need to make sure that we dispatch some initial action when we finish initializing

26
00:01:50,610 --> 00:01:54,190
our library to indicate whether or not the user is actually signed in.

27
00:01:54,210 --> 00:01:56,200
Right now we are immediately calling set state.

28
00:01:56,280 --> 00:02:01,950
So essentially we want to call either sign in or sign out depending upon whether or not the user is

29
00:02:01,950 --> 00:02:04,520
signed in now to do so.

30
00:02:04,540 --> 00:02:09,570
We could either write out some if statement like this right here inside that door then what.

31
00:02:09,580 --> 00:02:15,250
Another way that we could write this to reuse a little bit of code is to just call on or change directly

32
00:02:15,640 --> 00:02:18,310
with whether or not the user is signed in.

33
00:02:18,310 --> 00:02:21,820
So we can call on all change will pass and whether or not the user signed in.

34
00:02:21,820 --> 00:02:25,530
And then this function is going to call the appropriate action creator member.

35
00:02:25,540 --> 00:02:28,240
This is all code that is going to be running at initialization.

36
00:02:28,240 --> 00:02:31,180
So right when this library first boots up.

37
00:02:31,220 --> 00:02:38,000
All right so we went to remove the set state and I'm going to instead call this start on off change

38
00:02:39,410 --> 00:02:44,420
and I'm going to pass in the users current authentication status so I'll say this spot on we're going

39
00:02:44,450 --> 00:02:45,590
to stuff off.

40
00:02:45,710 --> 00:02:50,610
Dot is signed in Dot get like so.

41
00:02:50,670 --> 00:02:55,010
So now when we finished initializing our library we're going to assign the author instance to this start

42
00:02:55,030 --> 00:03:00,870
off well then immediately update our state inside of our redux store and then we will basically sit

43
00:03:00,870 --> 00:03:04,990
around and wait for that authentication status to change at some point in the future.

44
00:03:07,290 --> 00:03:11,100
All right cool so I think there's probably just one other thing we have to change.

45
00:03:11,320 --> 00:03:17,060
So down inside of render off button we are currently looking at state is signed in.

46
00:03:17,260 --> 00:03:19,520
So we no longer have a state object inside of here.

47
00:03:19,540 --> 00:03:23,740
So rather than referencing state we're just going update that to process because that is where the is

48
00:03:23,740 --> 00:03:25,990
signed in property is now going to be coming from.

49
00:03:26,260 --> 00:03:29,990
So a data inside the if statement I'll update it in the is it else.

50
00:03:30,040 --> 00:03:32,710
If right here so this stop Propst is signed in.

51
00:03:33,070 --> 00:03:34,590
And I think that's about it.

52
00:03:34,600 --> 00:03:40,120
Inside this file I can do one quick search and search for state and make sure I don't have any other

53
00:03:40,120 --> 00:03:43,520
references to state besides inside the map stage props function.

54
00:03:43,960 --> 00:03:45,470
Ok I think I'm good to go.

55
00:03:45,730 --> 00:03:50,470
So I'm going to save this and we'll flip on over to our browser and do a test.

56
00:03:50,480 --> 00:03:50,930
All right.

57
00:03:50,930 --> 00:03:55,820
So I want you to know that as you go to this test right here is entirely possible that we might have

58
00:03:55,820 --> 00:03:58,230
made a typo or a mistake at some point.

59
00:03:58,250 --> 00:04:03,110
So if you see any error message I would highly encourage you to take a look at the error message you

60
00:04:03,110 --> 00:04:07,130
got and try to figure out exactly you know what is going wrong here.

61
00:04:07,220 --> 00:04:09,940
Now I'm already getting a warning message right here.

62
00:04:09,960 --> 00:04:12,960
A classic mistake that I personally make all the time.

63
00:04:13,040 --> 00:04:17,710
I define that state to props at the bottom of the file and I never actually passed it into K'NEX so

64
00:04:17,710 --> 00:04:19,970
I'll make sure that I do that right now.

65
00:04:21,170 --> 00:04:25,130
Like so OK it's now going to flip back over.

66
00:04:25,260 --> 00:04:29,320
And now I should be able to click on the sign in button I'll see the pop up appear.

67
00:04:29,340 --> 00:04:30,130
That's good.

68
00:04:30,360 --> 00:04:31,600
I'll select an account.

69
00:04:32,640 --> 00:04:35,930
And then I see the button flip back over to sign out.

70
00:04:35,970 --> 00:04:38,010
Now I can refresh the page.

71
00:04:38,010 --> 00:04:42,960
I still see it say sign out and when it doesn't say sign out when the page is first initialising I don't

72
00:04:42,960 --> 00:04:45,740
see any button there at all which is definitely good.

73
00:04:45,790 --> 00:04:49,720
Now Asheville The click on sign out and it's going to go back to sign in with Google.

74
00:04:49,860 --> 00:04:53,700
Now Asheville to refresh again and still sees sign it with Google.

75
00:04:53,700 --> 00:04:56,040
All right that's it looks perfect to me.

76
00:04:56,070 --> 00:05:00,660
So again if you saw anything that didn't not quite go correct here that's totally fine.

77
00:05:00,660 --> 00:05:03,660
First off check to see if you have any error messages.

78
00:05:03,660 --> 00:05:08,400
The other thing that might be going wrong is something that we're going to talk about in this next video.

79
00:05:08,430 --> 00:05:13,110
So if it feels like you are clicking that button but nothing is actually happening then what's the next

80
00:05:13,110 --> 00:05:13,500
video.

81
00:05:13,500 --> 00:05:18,470
Because we're going to go over a little refactor to our reducer that might fix an issue that you have.

82
00:05:18,630 --> 00:05:23,780
So quick pause and we'll take a look at some little retractor that we're going to do in the next video.