Instructor: Let's continue CodingUp or SearchView.
And so as I mentioned, in the last video the goal
for this video is to now reduce this title size here
whenever it occupies more than one line.
Okay?
So basically like we want is for these main titles
always to occupy just one line.
Now we also don't want to cut words in half.
So in this case here, imagine we don't
want to see our U for example, to be up here.
And then having the rest of the word cut out.
So the only one entire words here
are then followed by three dots.
Okay?
So that's kind of a tricky small algorithm
that we have to write here.
And so let's see if we can pull it off.
Okay?
So I'm going to add a new function in here.
And once more, it will be like a private function.
So it's a function that we don't need in the outside world.
So const.
Limit recipe, title.
And what we receive here is a recipe.
And we can also receive a limit.
So limit off characters that is acceptable
as the maximum length of the title.
Okay?
And let's now actually use something
that we've talked about in the ES2015 or ES6 section
which has default perimeters.
So let's add this one here to 17.
And I found out through experimentation
that 17 is really the sweet spot here.
So it's the best limit for this kind of layout here.
But of course we could pass other limits into here.
But if we don't pass any limit into the function
then 17 is the one that will be used.
Okay?
Now the first thing that we're gonna do
is to test if the length of the title
is actually longer than the limit.
Because only then we need to do something.
Right?
In here it should actually be title and not recipe.
So we're only going to pass the title into this one.
So if the title dot length.
Is greater than the limit than we have to do something.
And else we will also be returned to title again.
And I'm not going to write the L statement here actually.
So I'm not going to do this one here
and then put return title in here
because we are going to have a return statement
in here as well.
But that is a good practice to just leave it like this.
Okay?
So we're either gonna return something from here
and then the function finishes anyway.
And if this test here turns out to be false
then we move on to this one here
and return the title as it was before.
Okay?
So this of course only applies if the title
is longer than the limit that we defined.
So how are we going to pull this off?
Well, the best strategy that I came up with
is to split the title into its words
and then you use the reduce method on the resulting array
which then allows us to have an accumulator.
And that accumulator is just like a variable
that we can add to in each iteration of the loop.
And what we're then gonna do in each iteration of the loop
is to test if the current titling plus
the next word is still under the maximum length.
Okay?
So that sounds probably a bit complicated
so let me write it out in code here
and then it will make total sense.
Okay?
So, we take the title and then split it.
So a split is a method that is available in all strings.
And you split it by space.
Okay?
So let's simply write an example string here.
As a comment.
So pasta with tomato and spinach.
For example.
Okay?
And so, by splitting it by the space
this will turn into an array with five elements.
Pasta, with, tomato, and, spinach.
Okay?
And so since we now have an array
we can use the reduced method on it.
So reduce and then we pass a callback function
which has the accumulator and a current value as the input.
So "acc" stands for accumulator and then the current.
Okay?
Oh, this is right.
Cool.
Current like this.
All right.
So this callback function is the first perimeter
to the reduced method and then the second one
is the initial value of the accumulator.
Which should be zero.
So we start with an accumulator of zero
and then throughout these loops we will add to it.
Okay?
And that will explain you how and why
here in the next steps.
So that's actually experiment with this example string here.
And go through each of these iterations here.
Just to show you how this actually works.
All right?
So in the first iteration, the accumulator
is of course zero, right?
As we defined down here.
Now we are gonna test now in each iteration
if the accumulator.
Plus the current.
Dot length.
So that's the length of the current word.
If it's still under or equal the limit.
Okay?
And if it is so, then we will push
this word into a new array.
So it's actually create that array.
Like up here.
So, a constant new title and just a new array.
Okay?
And this is a constant which we cannot really mutate.
Right?
So why are we starting it as a new array
and then keep adding stuff to it?
Well, that's possible because adding stuff to an array
is not really mutating the underlying variable itself.
And so the title can perfectly be a constant
and we can still keep adding stuff in to the array.
And the same goes of course for objects.
Okay?
So new title.
Dot push the current word.
So, let's see why this makes sense.
So again the accumulator in the first one is zero.
Then the accumulator plus the current length
will be zero plus five, right?
And five, which is the result of this here
is still under the limit of 17.
And so we can push this word into the new title array.
So let's write it out here.
That the new title.
Now has the word pasta in it.
Okay.
And finally we have to update the accumulator.
And this works in the reduced function by returning a value.
So the value that we return in each iteration off this loop
and the collect function off the reduced method
will be the new accumulator.
So we return accumulator plus the current length.
So that's exactly what we did up there in the test.
Okay?
And so now in the next iteration
the accumulator will be five.
Right?
I like to actually copy this part here
so that we don't have to do it over and over again.
And so again, this is here just to assimilate
what happens in each iteration as we go through this.
Okay?
So in a second iteration, we're
now looking at the word "with".
Right?
And so five plus four is nine.
Okay?
And so nine is still less than the limit of 17.
And so we can add the word "with" to the array.
So let's do that.
And then next, we return the accumulator
plus current length, which will be nine.
So in the next iteration, we will
have nine as the accumulator.
The next word is tomato.
So six plus nine is 15.
And 15 is still less than 17.
So we can add the word "tomato".
Right?
Then next iteration, now the accumulator is 15.
And the next word is "and".
Which if three.
So the current length is now 18
which is, of course, more than the limit.
And so this word is not pushed
into the array for the new title.
Okay?
Now up here I'm actually missing the word "tomato" here.
It's not a problem really.
It's just so that it doesn't confuse you.
Okay?
Then in the next iteration we will look
at the word "spinach" here.
And so just to make it really complete
we now have eight in here.
And accumulator plus the length of spinach makes it 24.
And so of course it still doesn't pass this test here.
And so spinach is also not pushed into the new array
and that's actually it.
So we looked at all the five words
and our final array is "pasta with tomato".
Okay?
So that's now actually returned the result.
So, let's return.
And I'm going to put us in a tablet string again.
Or a new title.
And then we can use the joint method.
And this is basically the opposite of split.
So what this will do, instead of both joining
the elements of the array into a string separated by spaces.
And so that puts it back into a sentence
with spaces between the words.
Okay?
And then the three dots.
And I forgot to close this one here.
And okay.
So we have our new title, which is
just array of the words.
Which will be joined by putting spaces
into the words and then add the three dots
to show that the title is longer
than just the words that are displayed.
So I hope this made sense to you.
And we could have done this here
with the for each method and having
an external variable here for the accumulator.
And we could have then, in each of
these iterations, have updated that external variable.
But the reduced method already has
the accumulator built in and so I thought it's a good idea
and a good use case to use this method here.
So we had to go through all of this.
A bit complex algorithm here.
Just because we don't want to cut the words into halves
and want full words always in our title sentence.
And if you found a simpler way of doing this
then please let me know in the Q and A.
But I think this is here actually good solution
and a good use case for some of
the jobs and features like reduced.
And it's also always a good thought experiment
to come up with this kind of code.
Right?
So let's now actually use this method here.
So I'm gonna copy it and where we need it
is here in the render recipe function.
So here is where we print the title.
And so all we need to do is to insert it here.
And pass in the title.
And that's it.
So we could now pass here the limit.
But as you know, we have it preset to 17.
And so there's no need to pass
the additional argument into it.
So you notice that here in these curly braces
in the template string, we cannot
only use the variables directly.
But we can also include functions like I did here.
And so that's pretty handy here as well.
Okay.
So let's now actually test this out.
So I'm using pizza again.
And let's see.
And indeed, here we go.
Well, there's something wrong here
so a small bug somewhere where
I'm inserting the parenthesis.
And yeah, here it is.
So that shouldn't be there.
And so let's now check it out again.
Writing pizza.
So if you count the characters here now
you will see that they're never more than 17.
So four and nine.
And 14.
So that's less than 17.
Here I have four, eight.
13.
Here we didn't even need to apply the algorithm.
And so we immediately just returned the title
because it's only eight characters long.
This one is also less than 17.
And so you see that all of them are just on one line now.
If we were to increase this here let's say, to 20.
Then there were probably already be some words.
That are different.
Let's actually do it here.
So we can pass 20 now to override that 17.
Let's give it a try now.
Yeah, we really need that spinner here for the feedback.
And so you see it here, there's these three dots.
They now moved to the second line already.
So that one was too long.
Here's the same situation.
Here is the same thing.
And so, 17 is really the sweet spot.
That's best here.
Okay.
So that's done.
And now all there really is to do
is to implement this small spinner here
that rotates while we are fetching our data from the API.
So in order to give the user the feedback
that we're actually doing something here
and that the app is working.
So let's do that right in the next video.