Jonas: Welcome back.
Now that the search functionality is fully implemented,
let's start working on the model for a single recipe
selected from the search results.
And so let's start by creating a new file,
in our models folder of course.
So recipe.js.
And this one will actually be a bit similar
to the search model, okay, so let's open up this one here,
side by side, I can close these files.
For now I no longer need them.
So again we're going to use axios here for
our ajax call, and we will also create
a class for this recipe to hold all the data
for one recipe object.
So import
axios from axios,
and we will export a default class
called Recipe.
We give ourselves a constructor, and this time
what we're going to press in, will be the ID.
And then we say this.id equals the ID that we press in.
So each recipe is identified by an ID,
and when we create a new recipe object,
what we will press in is that exact ID.
And based on that ID we can then later
do the ajax call to get the rest of the data for the recipe.
So that's actually the next method that we're going to code,
which will be called get recipe.
And we already know that we're going to use
an async here, and so for now you're
super familiar with this stuff already.
Let's then use a try catch such as before.
And here just console.log the error in case there is any.
But what really matters is of course
what happens here in the try block.
So let's set the result
to what we await
from the ajax call using axios again.
So that's again very similar to what we had here.
Now we need again our key and our proxy,
and so we could now go ahead and copy these here
to the recipe model, but that's not ideal,
because then imagine that we had a new key, or a new proxy,
then we would have to change it in two places,
and that's not ideal.
So instead of doing that, let's create
a configuration file where we can store
these two variables, then import this file
into these two files, so into these two models,
so that we can then use these variables in there.
So we're going to do that right in the home,
and so in the home java script folder, in here,
and so we're gonna call it config.js.
And so I'm going to take these out of here,
and put them right here, okay?
Now it's not actually the best practice
to have this kind of data here,
stored on the client side, because everyone using
your app can easily access this for example, your key.
Now in this case, it's not really a big deal,
but please remember to never store
any real sensitive data like this,
so on the JavaScript client side, okay?
And ideally you would do maybe this ajax calls
on your own server, and then have your own API
from that server, from where you would then
do the ajax call in the front end client.
But for now, in this example, this is perfectly acceptable.
Let's then go ahead and import it here,
first into the search,
and we're going to do a name export, so key and proxy
from another path through the module,
which is one folder above, so dot, dot and then config.
Okay, and so with that our proxy and key variables
are back here in this file.
Just copy them to this other file, to the recipe.
And so now we're good to go.
Now let's go ahead and actually copy what we have here,
then do some changes because URL is really the same,
at least up until this point.
Let's take out this part, and in order to figure out
how we get the recipe, let's then go back
to the documentation.
We have to search, and we have to get recipe, remember.
And the search request should be to api/search,
the one that we used before,
and in order to get the recipe we use api/get.
And then the parameter is again the key,
and then also the recipe ID, which is here called rId.
So we use the get route, then we press the key into.
Also the recipe ID, and that recipe ID
will be the one stored in our object.
So this.id, right? And that's it.
So again, this axios call here will then return
a premise, which we await, because we're
in an async function, and so again we're using async await,
which I believe is the best way of using async
in this challenge script.
And now just to test this out actually, so in order to see
what kind of data we get back from the server,
let's just log the result to the console,
so that we can then figure out what exactly
from the response we need to save.
So this will work for now, let's go head into
our main controller, import this recipe model,
and then create a new recipe from it.
So import
recipe from
same folder models,
and that's it.
Let's add some small comments here,
So this was the search controller,
and then let's also have the recipe controller.
So we're not going to do the recipe controller just yet,
but we already then have our code ready for that.
So let's simply create a new variable here for now,
just to have a new recipe, and let's press in an ID.
Now what ID do we actually want to press in here?
Well, let's try out one of the ones we already have,
so let's try to get one from our search results
So we use pizza again, and something did not work here,
so we get this error here, and here we see that we have
the proxy and the key both set to undefined.
So there was probably something wrong with the config file.
Yeah, in here we have to add two exports.
In order to actually export these variables from the file.
And now that should be working, so let's reload it,
and now we should get back
results very soon, and here we are.
Now if we click on one of these,
we will actually have the ID here, displayed in the URL bar,
because we remember that back in the view,
let's take a look at that, so in the search view,
where we displayed the search result,
so where is that?
Here. So we put the recipe ID in the href.
So this hash symbol, and then the recipe ID.
That ID is exactly what we need to search for recipes.
Let's go ahead and copy this number here,
and then plug it in here into this new recipe.
And so all we need to do now is to call
the get recipe method on this newly created object.
Because of course this object here inherits
this get recipe method from its prototype.
So that's basically how the ES6 class works
behind the scenes with prototypal inheritance.
So R.getrecipe, and that should then
trigger this console log log here,
right after we receive back the data from
the recipe with the ID that we paste in here, this number.
So let's give it a try, it should now reload.
It actually already did it here, down here.
So you already have the data here,
and if you open up the data property,
then we have our recipe in here.
So we have data.recipe, and then in there we have
all kinds of stuff, so we have the image URL,
then we have an array of ingredients here.
Then we have the publisher, the URL of the publisher,
the recipe ID again, and the source, and the title.
So the source is where the recipe actually comes from,
and where the directions are.
We're actually going to use most
of the properties that we have in here.
So we need the title, we need the publisher,
so the author basically, we need the image,
we need the URL itself, and we also need the ingredients.
And all of this data here lives at data.recipe.
So let's now go ahead and save all of these to our object.
So we want to have the title so this.title will be remember
res.data.recipe.title.
So res is the actual result, and then remember that
on the console we have data.recipe,
where all of this data lives that we need now.
So this.author, I'm going to call it author
and not publisher, is at res.data.recipe.publisher.
Next up we want the image,
and let's actually just duplicate this a couple of times.
So URL,
which is called the source URL here in the data,
and then finally we want the ingredients,
and so that should be working now.
So let's get rid of this console.log here
and what I'm going to do instead here is to log our object.
So again this is just for testing, of course.
But now I want to actually see the entire recipe,
and so here it goes, and indeed we have our
author, the ID, the image, which for some reason
is not really working, then we have
the ingredients, and the title, and the URL.
So that's all that we need in order to
display the recipe on the UI here in one of the next steps.
Now something wrong here with the img.
So probably there was some typo there.
And in here I guess it's just image.
Okay, so let's wait for it again, and here you go.
So now it's actually there.
All right, so that's the data that
comes back from the server.
Now let's just add a couple more things to our data model.
So let me show you how our EP works in the end.
What we have here is not only the stuff
that we got from the server, but we also have
the cooking time, and we have the amount of servings.
So let's now add some methods to calculate these.
let's do
calc time.
Now of course we don't have an accurate way
to estimate the time it takes to cook one of these recipes.
So let's just do a very very rough estimate, and assume
that for every three ingredients, we need 15 minutes.
So let's start by saying that the number of ingredients
is this.ingredients.length,
because remember that this ingredients here will be an array
of all of the ingredients, and so with lengths
we get how many ingredients are in there.
Then let's calculate how many 15 minutes periods we have,
so periods,
so we have the number of ingredients,
divided by 3, and we want to round it up
to the highest integer, so math.cell,
and we already used this one before, right?
And so finally we can calculate the time
with this just periods times 15.
Let's add that comment here in order
to make sense of this code.
Okay, so something very simple here.
And now for the servings,
we're actually not going to do any calculations at all,
we're just gonna say that this.servings is four.
So again we could have very complex algorithm here
trying to figure out how many servings we are
based on the amount of ingredients,
but that's not necessary at all, we just say
that we have four servings on each of the recipes.
And okay, that's it for our data model.
We're going to add some more stuff to it later,
but for now this is enough to
get us started with the recipes.
Now to finish, let's just test out
our error handling here as well.
And let's add an alert here so the user
can actually see the error, and let's say
"Something went wrong," and a sad face.
So let's assume that we put in the wrong key.
Let's just add a couple of random numbers here,
so this of course will be a wrong key,
and we should then have an error message.
So let's try it out, and indeed we get this error here,
which says we have no access to this resource,
which of course is because we have a wrong key.
And the user also gets this message here,
Something went wrong, okay?
So this also works, the try catch here again, is working.
And so let's now start working on the controller
of this recipe part, right in the next video.