From d8a135224ce6d9b91e463cb10b76740498ba923a Mon Sep 17 00:00:00 2001
From: Dominik Hryshaiev <domhryshaiev@gmail.com>
Date: Thu, 2 Jan 2025 03:49:45 +0100
Subject: [PATCH] refactor: remove comments and use date-fns helpers

---
 .../calendar-month/CalendarCell.tsx           | 23 +++------
 .../calendar-month/CalendarGrid.tsx           |  2 -
 tailwind.config.ts                            | 50 -------------------
 3 files changed, 7 insertions(+), 68 deletions(-)

diff --git a/src/components/calendar-month/CalendarCell.tsx b/src/components/calendar-month/CalendarCell.tsx
index 1be6287..7b97fd2 100644
--- a/src/components/calendar-month/CalendarCell.tsx
+++ b/src/components/calendar-month/CalendarCell.tsx
@@ -10,7 +10,7 @@ import {
 import { useNotesStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import clsx from 'clsx';
-import { format } from 'date-fns';
+import { format, isToday, isFuture } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 
@@ -61,18 +61,10 @@ const CalendarCell = ({
   const { removeOccurrence, fetchingOccurrences, occurrencesByDate } =
     useOccurrencesStore();
   const { notes, fetchingNotes } = useNotesStore();
-  const today = new Date();
-  const isToday =
-    today.getDate() === dateNumber &&
-    today.getMonth() + 1 === monthNumber &&
-    today.getFullYear() === fullYear;
   const screenSize = useScreenSize();
-  const date = format(
-    new Date(fullYear, monthNumber - 1, dateNumber),
-    'yyyy-MM-dd'
-  );
-  const isFutureDate =
-    new Date() < new Date(fullYear, monthNumber - 1, dateNumber);
+  const cellDate = new Date(fullYear, monthNumber - 1, dateNumber);
+  const isTodayCell = isToday(cellDate);
+  const date = format(cellDate, 'yyyy-MM-dd');
 
   const occurrences = isCalendarDay(date) ? occurrencesByDate[date] || [] : [];
   const isMobile = screenSize < 768;
@@ -105,7 +97,6 @@ const CalendarCell = ({
 
     return onAddOccurrence(dateNumber, monthNumber, fullYear);
   }, [
-    isToday,
     dateNumber,
     fetchingOccurrences,
     fullYear,
@@ -161,14 +152,14 @@ const CalendarCell = ({
     position === 'top-right' && 'rounded-tr-md',
     position === 'bottom-left' && 'rounded-bl-md',
     position === 'bottom-right' && 'rounded-br-md',
-    isToday &&
+    isTodayCell &&
       'bg-background-200 hover:bg-background-300 dark:bg-background-800 dark:hover:bg-background-700'
   );
 
   const cellHeaderClassName = clsx(
     'flex w-full items-center justify-between border-b-1 border-neutral-500 px-1.5 py-1.5 text-sm dark:border-neutral-400 md:text-base',
     rangeStatus !== 'in-range' && 'text-neutral-400 dark:text-neutral-600',
-    isToday ? 'w-full self-auto md:self-start' : 'w-full'
+    isTodayCell ? 'w-full self-auto md:self-start' : 'w-full'
   );
 
   return (
@@ -183,7 +174,7 @@ const CalendarCell = ({
         <div className="flex items-center justify-between gap-2">
           {rangeStatus === 'in-range' && !isMobile && (
             <div className="flex items-center gap-1">
-              {!isFutureDate && (
+              {!isFuture(cellDate) && (
                 <Tooltip content="Log habit" closeDelay={0}>
                   <Button
                     className="h-6 min-w-fit px-4 opacity-100 transition-opacity group-hover/cell:opacity-100 md:opacity-0"
diff --git a/src/components/calendar-month/CalendarGrid.tsx b/src/components/calendar-month/CalendarGrid.tsx
index 46dea16..a50f9d8 100644
--- a/src/components/calendar-month/CalendarGrid.tsx
+++ b/src/components/calendar-month/CalendarGrid.tsx
@@ -39,8 +39,6 @@ const CalendarGrid = ({
   const weekIndexes = [...new Array(weeksInMonthCount).keys()];
   const { month: activeMonth } = state.visibleRange.start;
 
-  console.log({ activeMonth });
-
   const handleWeekClick = (startDate: CalendarDate | null) => {
     if (!startDate) {
       return;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 560f333..0124565 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,6 @@ export default {
   },
   plugins: [
     nextui({
-      // addCommonColors: true,
       themes: {
         light: {
           colors: {
@@ -199,52 +198,3 @@ export default {
     }),
   ],
 } satisfies Config;
-
-// Dark:
-// {
-//   "color-primary-100": "#D5FCE6",
-//   "color-primary-200": "#ACFAD5",
-//   "color-primary-300": "#81F1C6",
-//   "color-primary-400": "#5FE4BD",
-//   "color-primary-500": "#2FD3B3",
-//   "color-primary-600": "#22B5A6",
-//   "color-primary-700": "#179797",
-//   "color-primary-800": "#0E707A",
-//   "color-primary-900": "#095465",
-//   "color-success-100": "#F1FBD2",
-//   "color-success-200": "#E1F8A7",
-//   "color-success-300": "#C5EA78",
-//   "color-success-400": "#A6D553",
-//   "color-success-500": "#7DBA23",
-//   "color-success-600": "#649F19",
-//   "color-success-700": "#4D8511",
-//   "color-success-800": "#386B0B",
-//   "color-success-900": "#2A5906",
-//   "color-info-100": "#CEF4FF",
-//   "color-info-200": "#9CE4FF",
-//   "color-info-300": "#6CCFFF",
-//   "color-info-400": "#47B8FF",
-//   "color-info-500": "#0A94FF",
-//   "color-info-600": "#0772DB",
-//   "color-info-700": "#0555B7",
-//   "color-info-800": "#033C93",
-//   "color-info-900": "#012A7A",
-//   "color-warning-100": "#FEF8D0",
-//   "color-warning-200": "#FEEEA1",
-//   "color-warning-300": "#FEE272",
-//   "color-warning-400": "#FDD64F",
-//   "color-warning-500": "#FCC316",
-//   "color-warning-600": "#D8A110",
-//   "color-warning-700": "#B5820B",
-//   "color-warning-800": "#926407",
-//   "color-warning-900": "#785004",
-//   "color-danger-100": "#FFE7D5",
-//   "color-danger-200": "#FFC8AC",
-//   "color-danger-300": "#FFA382",
-//   "color-danger-400": "#FF8063",
-//   "color-danger-500": "#FF4530",
-//   "color-danger-600": "#DB2623",
-//   "color-danger-700": "#B71821",
-//   "color-danger-800": "#930F22",
-//   "color-danger-900": "#7A0922"
-// }