Pro Tailwind

02. Status detection logic

🐇 TL;DR

  • Our statusClasses styles are working correctly
  • Let’s write the logic to determine which Status each calendar day is in!

⬇️ Skip to the challenge

🐢 Background

In the previous challenge, we ported our calendar day styles to a new statusClasses object, which now looks like this:

const statusClasses: Record<Status, string> = {
  DISABLED: 'text-slate-300 pointer-events-none',
  SELECTED: 'bg-indigo-600 text-white font-bold bg-stripes',
  NO_VACANCY: 'text-slate-900 hover:bg-slate-100',
  TODAY_NO_VACANCY: 'text-indigo-600 font-bold hover:bg-slate-100',
  VACANCY: 'bg-indigo-100 text-indigo-600 font-bold hover:bg-indigo-200',
}

We have verified that those styles work properly. The crucial part we’re missing is some logic to determine what status a given calendar day is in.

Remember the complex conditional logic we had in our component’s className attribute to begin with?

Yeah, we want to avoid doing that again.

Instead, let’s determine the Status of a calendar day earlier in the code.

Limited logic in the className attribute

If we can define the status of a given day early, we’d be able to use statusClasses[status] in our className attribute:

<div className={cx(statusClasses[status], ...)} />

Just like we did for impactClasses[impact] in our Button component:

<button className={cx(impactClasses[impact], ...)} />

Or sizeClasses[size] in our Modal component.

<div className={cx(sizeClasses[size], ...)} />

That’s nice and simple to read.

Let’s write a getStatus() function

There is a bit of conditional logic to determine what Status a day is in. Which is exactly why our className attribute got messy in the first place.

I think that building a getStatus() function that returns one of the possible Status values is a good way to encapsulate the logic for determining that status.

type GetStatus = () => Status

const getStatus: GetStatus = () => {
  // TODO: Return the correct status
}

Notice I created a GetStatus type. It’s a function that returns one of the possible Status values.

Ummmm… What goes in this getStatus() function?

How exactly do we determine this status? Well, this is your next challenge! 😅

🏆 Your challenge 🏆

In the Gitpod workspace below:

  1. In the src/components/calendar/calendar-day.tsx file, delete the legacy dynamicClasses styles object below.

    This will break the page 💥, so you’ll also need to remove the references to that dynamicClasses object in the component’s className attribute!

  1. Write the logic to determine the calendar day status. Make sure the function has different code paths to return each possible Status, but only one of them.

    Hint: the code in lines 15 - 22 in this file contains critical things you need to use to determine the Status.

  1. Add the appropriate statusClasses to the component’s className attribute.

Check in the browser

If you’ve done things successfully, the “Refactoring” calendar should look identical to the “Reference” calendar in your browser!

✌️ Good luck!

Open in Gitpod →