At the end of the last section, I was getting a little error message on the screen right here.
This is due to a little typo that I made inside the app header component.
Down here on line ten, I accidentally misspelled router, so I'm going to fix that up really quick.
I'm going to save the file and then if I go back over to the browser, everything's back to working
the way we would expect.
Now I can click on galleries or upload and I can successfully navigate between the image list and the
upload components.
So that's looking pretty good.
I think that we've got a good handle on navigation and authentication inside of our app now.
So now that those systems are under wraps, we're going to start to move forward and think about how
we're going to attempt to retrieve a list of images from the Imgur API and eventually handle the upload
process as well.
Now we're probably going to take care of fetching images first rather than doing any type of upload
and that might not make a lot of sense.
You might be thinking Stephen, how are we going to fetch images that we have not yet uploaded?
Well, in reality we can actually go directly over to the imgur.com site itself and upload an image
over there using their upload form and then we should be able to come back over to our application and
see those images appear on this component right here.
Doing the image fetching is going to be a lot easier than doing the upload.
So I think it would make a lot of sense to probably do the easier part first and then save the harder
upload portion for later on.
So with that in mind, in this section, we're going to start talking about the initial design of our
images module.
So remember, we've worked on one view module so far, the auth module, and inside that module we defined
our state getters actions and mutations.
So we're going to have a completely separate module inside of our view modules folder right here.
And this separate module is going to be related to working with the images resource.
So handling, fetching them like the big list of all the images we have as a user and also work around
uploading images as well.
So let's take a look at a diagram that's going to walk us through the design of this module.
All right.
So we're going to do this on kind of an ad hoc basis here as well.
In other words, we're going to try to put the design together rather than me just telling you, hey,
here's how it is.
So the first thing we're going to think about is going to be the state of this module.
Remember, the state is kind of like the very raw data that we're going to be working with inside this
module.
So for this particular case, when we reach out to the imgur API to get a list of images that have been
uploaded by our present user, the imgur API is going to send back a big array of objects to us.
And each object inside that array is going to represent one uploaded image.
And so in essence, it's going to be very similar to the YouTube API that we worked with much earlier
in the course where we had an array of videos, and inside that array was an object that represented
each particular video.
So when we start thinking about the state design of our images module here, I think that it's going
to make a lot of sense to just have maybe a single property called images.
And this might point at some value, like maybe an array that contains a list of all the images that
we fetched from the imgur API.
So because I expect it to eventually be an array of images, I'm going to set up an initial value for
this images piece of state of an empty array.
So when our application first boots up, we're just going to assume that images is an empty array.
And then at some point in time we'll do our API request over to imgur, get our list of images and update
that array with all the ones that we just fetched.
So with that in mind, since this is just an array of images, our getters design is going to be really
straightforward in this case.
So there's not going to be a lot of complexity on this end.
So for our getters, really, the only thing that we're doing inside this application is showing a list
of all of the images that the user has uploaded directly to them on the screen.
So we're not really doing any filtering or any advanced computation or anything like that.
So we're probably going to end up with just one getter called something maybe like, I don't know,
all images.
And if someone calls this getter right here, we're just going to return back to them a list of all
the images inside of our state.
So maybe that would be something like state dot images like so.
Remember that these jitters are functions.
So all images right here is going to be a function that will call and it will return all the images
that are stored inside of our state object over here.
Now mutations in actions.
Let's first go down to actions and then we'll figure out the mutations that we probably need to create.
So in the case of actions, our application really has two primary purposes to it.
On the one hand, we should have the ability to fetch a list of all of our images.
And then secondly, we should probably have the ability to upload an image because that's really the
two big portions of our application or the two big functions we're trying to implement.
So let me do a quick copy here.
Come on, let's copy it.
There we go.
So because we are only showing a list of all of our images to the user and uploading, I think that
we're probably going to end up with two separate actions.
Maybe we'll have one action called Fetch images that will attempt to fetch a list of all the images
for this user from the imgur API.
And then we'll probably have a second action called something like Upload Image where we will take a
image that the user is trying to upload or maybe multiple images and send them over to the imgur API.
Now we're going to be in a very interesting situation here, very much like we were back on the authentication
module.
You'll recall that back on the auth module we put together that login action and the login action did
not actually modify our state or call any mutations.
And so it's actually going to be very similar in this case as well.
Upload image right here is going to attempt to take an image or multiple images and upload them to to
the imgur API.
But there's really probably not a lot of stuff beyond that that the upload image action really needs
to do because whenever we upload an image that's going to be on the upload form and the upload image
is going to have no reason to ever try to modify the state object over here.
You might be thinking, well Steven, don't we want to like say, attempt to upload all these images
and then fetch all the image or like the newly updated list of images from the API?
Well, yeah, we definitely do.
We want to do the upload and then get the newly updated list, but we don't want to duplicate that functionality
of fetching all of our images between fetch images and upload image.
So any time that we upload an image, we'll probably separately call the fetch images action right after
that.
So in other words, I don't think upload image right here is really going to have to update any state
or really have to call any mutations whatsoever.
On the other hand, we have fetch images which without a doubt is going to have to call a mutation to
update this images piece of state.
So I think that very similar to our auth module will probably make a mutation called something like
set images.
That will be something very similar to that set token mutation that we had in the auth module as well.
We'll probably say that after this.
Fetch images action makes a network request over to the imgur API to get a list of all of our images.
It should probably call this set images mutation.
An attempt to update the list of images stored inside of our state.
Uh, there we go.
So that's pretty much it.
And as you might imagine, set images.
Mutation right here is just going to update our list of images, and that's pretty much it.
So I think that the design of this image module is ultimately going to be pretty darn similar to the
auth module that we just took care of.
So this will be a good opportunity to reinforce a lot of the stuff that we just learned.
Now that we've got a good design put together, let's continue in the next section and we're going to
start working on the actual implementation of this image module.
A quick break and I'll see you in just a minute.