In this section we're going to do a little bit of cleanup on our on search submit function.
Right now it contains a lot of code that is related to X-posts and the network requests that we're trying
to make and it's not necessarily appropriate to put all this configuration directly into our app component.
So here's what we're going to do.
I'm going to create a new folder inside of my SIRC directory and I'm going to call it API.
So inside let me zoom in so you can see that very easily.
So here's the SLAC folder I created a new API folder right next to the components one.
And then inside there I'm going to make a new file called on Splash.
Yes.
So the goal of this file right here is to put together some amount of code that's going to contain every.
Oh and you know I just realized i misspell on Splash let me fix that before I go on too far.
There we go.
All right.
That's better.
So we want to put all the code in here related to configuration of X-posts or related to somehow getting
on splash to accept our request.
Remember right now we've got to provide that authorization thing and that's really long your L.
All that stuff that probably should not belong directly inside of our app class.
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
to import X-ers from access.
Now the nice thing about ASIO's is that you can kind of set up a preconfigured instance of the axioms
client that has default properties set for where it's going to make a request to or headers and even
perhaps if you wanted to as well.
So we could try to shorten up the code here by defining a function inside this file called something
like Konst search images and that would take a term and then you'll respond with whatever we need it
to respond to it.
That would be one approach but I gonna show you another approach that's going to be a much more useful
way of doing this on some future applications for going to work on.
So I'm going to take X-posts and call it different method on it called create and then pass it onto
object like so that create method is going to create a instance of the axioms client with a couple of
defaulted properties.
So actually just not create just allows us to create a customized little copy of it that is customized
just towards making requests to some specific you are ill with just these headers.
So now I'm going to in the file find the header section I'm going to cut that entire property and put
it over here inside of axemen creates I'm going to add another property to this object called a u r
l
I'll go back over to the file and I'm going to get just the route you are l.
Or just the domain and the CPS over here and I'm going to copy that.
And then move it over here inside westering as well.
And I'll make sure I get a comma at the end.
And then finally right before that call I'll put a export default statement and that's it.
So now rather inside the app file rather than importing from the CEO's library we are going to import
the API on Splash file and that's going to give us this pre customized version of X-posts that has preprogrammed
into it.
The base you are l and the headers as well.
Now like I said this is not going to completely clean up all the code inside of on search submit or
it's still going have to put a fair amount of configuration inside of your including having to specify
some pre-amps so we could absolutely have clean this up more by creating a function.
As I mentioned called like find me some pictures or writing or you want to call it.
And then we could have completely isolated all this Actio stuff into some separate file.
Totally an option we could totally do that.
But like I said taking this approach right here of creating a customized instance is going to have big
benefits on some later apps we're going to work on.
So I just wanted to show you this technique right now where it's a lot easier to see and understand
what's going on.
All right so let's finish this refactor back inside of my outtalk genius file.
I no longer need to import access.
Instead I'm going to import an splash from up one directory.
Right now we're inside the components directory and we want to get over to that on splosh file.
So to write out the path to that file I'm going to put two dots right there.
Which means go up out of the components directory to the S or see folder then go into the API folder
and get the on Splash file.
And now inside of my on search submit function rather than making a request to actually start get.
I will make it to you on Splash doget and then I'll reformat this thing just a little bit to make it
nicer.
OK.
So that's definitely better.
Now as I mentioned twice now it's not as good as making a completely separate function that extracts
out all this stuff but it's at least an improvement for now.
So I gonna save this and I'll flip on over to the browser and just make sure everything is still working.
So put in cars and you I can still get my list of images.
OK.
So it looks good.
Let's take a quick pause right here.
Now that we've got our list of images we need to think about creating a new component called the image
list that is going to render out a list of all the images that we just fetch.
So quick pause and I'll see you in just a minute.