Implementing a Cascading Letter Functionality

[00:00 - 00:11] In module one, we set up basic functionality for our hook, finishing with a few cleanups and refactors. Now that we're at a clean base, let's start adding more advanced functional ities to our hook.

[00:12 - 00:26] The first will be designing a cascading letter functionality. For example, if we had the title "A Cool Title", we would see the following animation through the letters in our document title.

[00:27 - 00:41] So, I'll pursue and see the "A", then "AC", then "ACO", and so on. So, instead of iterating through all titles, it would iterate letter by letter.

[00:42 - 00:55] This new cascading letter functionality will be distinctly different than the current title iteration functionality. So, to keep the hooks code clean, it makes sense to define an enum to distinguish which animation we want to run.

[00:56 - 01:05] Let's make a new enum called "Animation Type". First, we'll make a new folder under the "SRC" folder called "Enums".

[01:06 - 01:24] Within this folder, we'll create a new file called "AnimationType.ts". So, this will be "ExportEnum Animation Type".

[01:25 - 01:41] And for now, we only have two animation types. The "Looping Title" functionality, which will designate as "loop", and the new functionality of cascading letters, which will designate as "Casc ade".

[01:42 - 01:59] We will use string enums because they're more easily debugable and understandable when logged out than numeric enums are. Now that we have our new animation type enum, we can add a new parameter to use "Please Stay".

[02:00 - 02:14] This new parameter will of course be "AnimationType", and its type will be " AnimationType". We'll also forward this animation type parameter onto the "Use Title Change Effect" hook.

[02:15 - 02:40] Within "Use Title Change Effect", let's add the new parameter we've introduced. And before we use it right away, let's do some small refactors within this hook so we can better extend it in the future.

[02:41 - 03:04] So, the first thing I'm going to do is take the existing iteration logic and put that into a new function called "Run Loop Iteration Logic". So, I'll pull this out and put it in here, and we'll write our new iteration logic but for "Cascade".

[03:05 - 03:25] So, "Run Cascade Iteration Logic". And this will essentially be the same except that we won't take the entire titles array but just the first title.

[03:26 - 03:35] Now within the "Use Interval" function, we can leverage our enum. So, we'll do a switch on that animation type.

[03:36 - 03:59] And if the type is "Cascade", we of course want to call our "Run Cascade Iter ation Logic". And if the case is the animation type loop, we want to run our loop iteration logic.

[04:00 - 04:23] And now extremely important whenever working with enums is to add the default case. And here, since it was our original implementation, we'll just make the default case using "JavaScript's Fall Through" ability in switch statements so that if animation type is forgotten or somehow type owed, we'll always fall through to run the loop iteration logic.

[04:24 - 04:38] Now we need to do the same for this second use effect here. So, first I'll take out the existing logic and create a new function called "Run Loop Title Logic".

[04:39 - 04:52] And we'll also write the new logic for our cascade function. So this function will be called "Run Cascade Title Logic".

[04:53 - 05:11] And again, it's fairly similar except we'll be using the first index of the titles array. And to iterate through the given letters in that first title, we'll use the " Substring" function.

[05:12 - 05:34] So starting at the first position of whatever the first title is, and we'll go all the way to the title index. And similarly to our "Use Interval" function switch case here, we will do the same within the "Use Effect". And instead of the iteration logic functions, we want the title logic functions .

[05:35 - 06:02] Now, since the animation type "Enum" is exposed as a type of a public parameter of our publicly exposed hook, we should also expose this type. So let's hop into index.ts and also expose the animation type "Enum". And that's within the "Enums" and "Animation Type File".

[06:03 - 06:09] That should be all there is to it for adding this new cascading functionality. So let's rebuild our hook.

[06:10 - 06:27] And move into the example project. And within app.tsx, let's first add the animation type of "Cascade".

[06:28 - 06:39] And since we know due to our implementation, it'll only take the first title. So let's just do something fun like "I am a cascading title".

[06:40 - 06:51] We can save that and start up our application with "MPMStart". And we can see as soon as we lose focus here, the "Cascade" effect is running.

[06:52 - 07:01] It should reach the end of the title and then it will repeat. So we successfully added a neat cascading letter functionality to use "Please Stay".

[07:02 - 07:12] In summary, we created a new enum called "Animation Type". We added a new parameter called "Animation Type" of this new type to our hook.

[07:13 - 07:26] We passed this animation type onto "Use Title Change" effect. And within "Use Title Change" effect, we made some small refactors, re-encapsulating the iteration logics and title logics into their own function.

[07:27 - 07:42] And we leveraged this enum type in a switch case of both the "Use Interval" and "Use Effect" hooks. Finally, we rebuilt our hook and tested it in the example app, seeing that our new functionality works exactly as expected.

[07:43 - 07:54] In the next lesson, we'll implement a marquee effect where the title will move from left to right and then reappear on the left side of the tab over and over again in a continuous loop.