Loading
Build a TypeScript Project From Scratch Tutorial (19 exercises)
Lesson

Write Logic to Increment Streak

In this lesson, you will write the logic to handle incrementing the streak.

Resources

The following resources provide more information for this lesson:

Transcript

Joe Previte: [0:00] We now need to write the logic to determine if an increment is the right move and then do it. Inside of our tests, inside of the describe block "with a pre-populated streak", we'll go to the bottom and paste in a couple more tests.
[0:00]

[0:13] We have three tests, "should increment the streak), it "should not increment the streak when login days are not consecutive", and finally, it "should save the incremented streak to local storage".

[0:00]

[0:22] We'll open up our terminal, cd into streak-counter, and run pnpm test. You'll see that we have two failing tests. Surprisingly, this one is actually passing. We'll break it later.

[0:00]

[0:35] Inside of here, we'll create a new variable called SHOULD_INCREMENT. We'll set that equal to true. We'll add some logic here, increment streak if necessary. We'll say, if (SHOULD_INCREMENT === true), then we'll increment and return.

[0:00]

[0:53] We'll create a new variable called updatedStreak equals, we'll spread streak, and then we'll increment currentCount by one. You'd notice we don't have any TypeScript typing. What we're actually going to do is to utilize the as keyword and say as Streak. Then, we get that beautiful, beautiful inference here or rather the correct typings. updatedStreak is going to be of type Streak as well. We'll return it.

[0:00]

[1:19] Now, if we go back to the terminal and we're looking for it "should increment the streak," that is now passing. We broke this other one, which is good. That's expected.

[0:00]

[1:27] The next test, it "should not increment the streak when login days not consecutive". For example, if you miss a day and next day you log in is not one day after, then it should reset it back to one. I'll write a TODO here. We'll say, reset if non-consecutive.

[0:00]

[1:45] Now, I'm going to add two helper functions up here at the top. The first one just gets the differenceInDays with a date on the left and a date on the right. The second is called shouldIncrementOrResetStreakCount. It takes in the currentDate and the lastLoginDate and returns a string called "increment", a string literal or undefined.

[0:00]

[2:05] Now, we're going to refactor down here. We're going to change this true to be shouldIncrementOrResetSteakCount. If we put our parens, we'll see the first argument is currentDate and the second is lastLoginDate. currentDate is going to be date. lastLoginDate is going to be streak.lastLoginDate. We're going to need to move this up like so.

[0:00]

[2:27] Come down here. We'll delete this. Instead of true, TypeScript is telling us, "Hey, this is going to be increment or undefined, not a Boolean." What we're going to do is change that to be "increment". There we go. Now, those two tests are passing.

[0:00]

[2:41] Let's see the third one, which is just saving it to localStorage. We'll delete that. We'll copy this function like so. We'll replace this with updatedStreak. We'll save that. We'll see that now, all of our tests are passing.

[0:00]