1
00:00:00,970 --> 00:00:05,470
In this section we're going to do a little bit of cleanup on our on search submit function.

2
00:00:05,470 --> 00:00:09,850
Right now it contains a lot of code that is related to X-posts and the network requests that we're trying

3
00:00:09,850 --> 00:00:16,230
to make and it's not necessarily appropriate to put all this configuration directly into our app component.

4
00:00:16,480 --> 00:00:18,230
So here's what we're going to do.

5
00:00:18,280 --> 00:00:23,940
I'm going to create a new folder inside of my SIRC directory and I'm going to call it API.

6
00:00:24,340 --> 00:00:27,000
So inside let me zoom in so you can see that very easily.

7
00:00:27,010 --> 00:00:31,990
So here's the SLAC folder I created a new API folder right next to the components one.

8
00:00:32,230 --> 00:00:36,150
And then inside there I'm going to make a new file called on Splash.

9
00:00:36,190 --> 00:00:37,290
Yes.

10
00:00:37,360 --> 00:00:42,930
So the goal of this file right here is to put together some amount of code that's going to contain every.

11
00:00:42,940 --> 00:00:48,000
Oh and you know I just realized i misspell on Splash let me fix that before I go on too far.

12
00:00:49,730 --> 00:00:50,390
There we go.

13
00:00:50,480 --> 00:00:50,690
All right.

14
00:00:50,690 --> 00:00:51,290
That's better.

15
00:00:51,380 --> 00:00:57,830
So we want to put all the code in here related to configuration of X-posts or related to somehow getting

16
00:00:58,220 --> 00:01:01,020
on splash to accept our request.

17
00:01:01,130 --> 00:01:05,570
Remember right now we've got to provide that authorization thing and that's really long your L.

18
00:01:05,570 --> 00:01:10,240
All that stuff that probably should not belong directly inside of our app class.

19
00:01:10,400 --> 00:01:15,770
So to fix this stuff up I'm going to flip back over to the n splashed G-S file and at the top I'm going

20
00:01:15,770 --> 00:01:20,370
to import X-ers from access.

21
00:01:20,390 --> 00:01:26,480
Now the nice thing about ASIO's is that you can kind of set up a preconfigured instance of the axioms

22
00:01:26,510 --> 00:01:33,770
client that has default properties set for where it's going to make a request to or headers and even

23
00:01:33,770 --> 00:01:36,100
perhaps if you wanted to as well.

24
00:01:36,380 --> 00:01:41,390
So we could try to shorten up the code here by defining a function inside this file called something

25
00:01:41,390 --> 00:01:48,470
like Konst search images and that would take a term and then you'll respond with whatever we need it

26
00:01:48,470 --> 00:01:49,190
to respond to it.

27
00:01:49,190 --> 00:01:54,350
That would be one approach but I gonna show you another approach that's going to be a much more useful

28
00:01:54,350 --> 00:01:58,080
way of doing this on some future applications for going to work on.

29
00:01:58,100 --> 00:02:05,830
So I'm going to take X-posts and call it different method on it called create and then pass it onto

30
00:02:05,840 --> 00:02:12,020
object like so that create method is going to create a instance of the axioms client with a couple of

31
00:02:12,110 --> 00:02:13,570
defaulted properties.

32
00:02:13,610 --> 00:02:18,770
So actually just not create just allows us to create a customized little copy of it that is customized

33
00:02:18,830 --> 00:02:24,150
just towards making requests to some specific you are ill with just these headers.

34
00:02:24,170 --> 00:02:31,890
So now I'm going to in the file find the header section I'm going to cut that entire property and put

35
00:02:31,890 --> 00:02:41,950
it over here inside of axemen creates I'm going to add another property to this object called a u r

36
00:02:42,040 --> 00:02:42,490
l

37
00:02:45,480 --> 00:02:49,780
I'll go back over to the file and I'm going to get just the route you are l.

38
00:02:49,830 --> 00:02:54,100
Or just the domain and the CPS over here and I'm going to copy that.

39
00:02:55,500 --> 00:02:58,660
And then move it over here inside westering as well.

40
00:02:58,660 --> 00:03:00,690
And I'll make sure I get a comma at the end.

41
00:03:02,310 --> 00:03:08,960
And then finally right before that call I'll put a export default statement and that's it.

42
00:03:08,960 --> 00:03:14,660
So now rather inside the app file rather than importing from the CEO's library we are going to import

43
00:03:14,690 --> 00:03:22,280
the API on Splash file and that's going to give us this pre customized version of X-posts that has preprogrammed

44
00:03:22,280 --> 00:03:22,960
into it.

45
00:03:23,060 --> 00:03:27,110
The base you are l and the headers as well.

46
00:03:27,110 --> 00:03:32,690
Now like I said this is not going to completely clean up all the code inside of on search submit or

47
00:03:32,690 --> 00:03:36,890
it's still going have to put a fair amount of configuration inside of your including having to specify

48
00:03:36,890 --> 00:03:42,400
some pre-amps so we could absolutely have clean this up more by creating a function.

49
00:03:42,410 --> 00:03:46,470
As I mentioned called like find me some pictures or writing or you want to call it.

50
00:03:46,550 --> 00:03:51,160
And then we could have completely isolated all this Actio stuff into some separate file.

51
00:03:51,320 --> 00:03:52,890
Totally an option we could totally do that.

52
00:03:52,940 --> 00:03:57,920
But like I said taking this approach right here of creating a customized instance is going to have big

53
00:03:57,920 --> 00:04:00,290
benefits on some later apps we're going to work on.

54
00:04:00,290 --> 00:04:04,940
So I just wanted to show you this technique right now where it's a lot easier to see and understand

55
00:04:04,970 --> 00:04:06,490
what's going on.

56
00:04:06,500 --> 00:04:10,670
All right so let's finish this refactor back inside of my outtalk genius file.

57
00:04:10,730 --> 00:04:13,080
I no longer need to import access.

58
00:04:13,190 --> 00:04:19,180
Instead I'm going to import an splash from up one directory.

59
00:04:19,190 --> 00:04:23,660
Right now we're inside the components directory and we want to get over to that on splosh file.

60
00:04:23,720 --> 00:04:27,260
So to write out the path to that file I'm going to put two dots right there.

61
00:04:27,290 --> 00:04:34,230
Which means go up out of the components directory to the S or see folder then go into the API folder

62
00:04:34,710 --> 00:04:37,250
and get the on Splash file.

63
00:04:39,060 --> 00:04:45,310
And now inside of my on search submit function rather than making a request to actually start get.

64
00:04:45,400 --> 00:04:51,190
I will make it to you on Splash doget and then I'll reformat this thing just a little bit to make it

65
00:04:51,190 --> 00:04:51,820
nicer.

66
00:04:53,310 --> 00:04:53,700
OK.

67
00:04:53,730 --> 00:04:55,200
So that's definitely better.

68
00:04:55,290 --> 00:05:00,990
Now as I mentioned twice now it's not as good as making a completely separate function that extracts

69
00:05:00,990 --> 00:05:04,390
out all this stuff but it's at least an improvement for now.

70
00:05:04,670 --> 00:05:09,100
So I gonna save this and I'll flip on over to the browser and just make sure everything is still working.

71
00:05:09,090 --> 00:05:12,660
So put in cars and you I can still get my list of images.

72
00:05:12,960 --> 00:05:13,160
OK.

73
00:05:13,170 --> 00:05:14,090
So it looks good.

74
00:05:14,340 --> 00:05:15,620
Let's take a quick pause right here.

75
00:05:15,660 --> 00:05:21,420
Now that we've got our list of images we need to think about creating a new component called the image

76
00:05:21,480 --> 00:05:25,740
list that is going to render out a list of all the images that we just fetch.

77
00:05:25,740 --> 00:05:27,540
So quick pause and I'll see you in just a minute.