1
00:00:01,300 --> 00:00:06,730
We've now initialized our ESKILD service, and there's just one problem, we have initializes service

2
00:00:06,730 --> 00:00:09,070
inside of the START service function.

3
00:00:09,470 --> 00:00:11,190
So we've got this service variable right here.

4
00:00:11,620 --> 00:00:16,450
We want to get access to the service and use it to actually do some transpiring and eventually bundling

5
00:00:16,720 --> 00:00:18,580
over inside of unclick.

6
00:00:18,850 --> 00:00:23,230
So in other words, we want to get that service thing available or accessible inside this function.

7
00:00:24,040 --> 00:00:26,140
To do so, we've got two possible solutions.

8
00:00:26,560 --> 00:00:31,210
We can either create a new piece of state and use that piece of state to share the service throughout

9
00:00:31,210 --> 00:00:32,170
this entire component.

10
00:00:32,650 --> 00:00:35,580
Alternatively, we could instead use a ref.

11
00:00:36,100 --> 00:00:40,270
Now, you might be familiar with refs in react and you might be very much used to using them to get

12
00:00:40,270 --> 00:00:42,060
a reference to a react component.

13
00:00:42,550 --> 00:00:47,890
It turns out that you can actually use a ref to keep a reference to any kind of JavaScript value inside

14
00:00:47,890 --> 00:00:50,680
of a component, not just to a component itself.

15
00:00:51,410 --> 00:00:55,060
Let me just give you a very quick example, because once you see this code, everything gets a little

16
00:00:55,060 --> 00:00:55,860
bit more obvious.

17
00:00:56,650 --> 00:00:59,860
I'm going to first begin by going up to my react import statement.

18
00:01:01,640 --> 00:01:04,010
And I'm going to import the U.S.

19
00:01:04,459 --> 00:01:04,849
Hook.

20
00:01:06,150 --> 00:01:10,500
Then inside of my component, I'm going to create a new roof that I'll call simply ref.

21
00:01:11,960 --> 00:01:15,530
We are working with typescript here, so we should assign a type to this ref.

22
00:01:16,160 --> 00:01:18,680
We're going to do so by putting in a set of brackets.

23
00:01:18,800 --> 00:01:21,680
And right now I'm going to mark this things type as any.

24
00:01:22,570 --> 00:01:26,300
That means that refought current can refer to any type of variable.

25
00:01:28,730 --> 00:01:31,830
Then down inside of start service, remove the console log.

26
00:01:31,880 --> 00:01:33,080
We don't really need that anymore.

27
00:01:34,780 --> 00:01:38,090
I'm not going to assign our service to a service variable anymore.

28
00:01:38,890 --> 00:01:42,910
Instead, I'm going to assign the service to ref, not current.

29
00:01:45,450 --> 00:01:51,720
So now, after calling start service, we can refer to refought current anywhere inside of our component

30
00:01:52,050 --> 00:01:55,740
and that will give us a reference to the service we created through E build.

31
00:01:56,370 --> 00:02:00,020
And we can use that to then do our transport and bundling and all that kind of stuff.

32
00:02:01,780 --> 00:02:03,400
So now inside of our unclick function.

33
00:02:04,280 --> 00:02:09,860
I'm going to first add in a little check and make sure that we never attempt to do any transpiring unless

34
00:02:09,860 --> 00:02:12,650
we are 100 percent sure that we have already initialized our service.

35
00:02:13,030 --> 00:02:20,210
I can say if there is no current, if that value is undefined or null and just return early, that's

36
00:02:20,210 --> 00:02:25,430
going to handle the case in which a user might start up our application and then instantly start clicking

37
00:02:25,430 --> 00:02:26,510
on that submit button.

38
00:02:27,020 --> 00:02:29,000
They click on it right away before our service is ready.

39
00:02:29,210 --> 00:02:30,860
We would definitely end up with an error message.

40
00:02:33,220 --> 00:02:39,370
Then after that, right now, let's just do a council log of refought current and make sure that we've

41
00:02:39,370 --> 00:02:42,160
actually got access to the build stuff inside of your.

42
00:02:43,430 --> 00:02:50,420
We're going to see this go back to my browser refresh, and now if I click on Submit, I'll see a log

43
00:02:50,600 --> 00:02:51,500
of that service.

44
00:02:51,510 --> 00:02:55,730
So there are the same build and transform functions that we want to get access to.

45
00:02:56,720 --> 00:03:01,850
Let's say this looks pretty good now we can use that service, we can call transform pass in whatever

46
00:03:01,850 --> 00:03:06,680
text the user entered into the text area and then show the result down inside that element.

47
00:03:07,310 --> 00:03:09,950
That's wire up this very last step in just a moment.