refactor: update components

HereEast · Sep 10, 2024 · d392221 · d392221
1 parent f682cc2
commit d392221
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 30 deletions.
diff --git a/client/src/components/MonthCardHeader.tsx b/client/src/components/MonthCardHeader.tsx
@@ -0,0 +1,23 @@
+import { useAppContext } from "~/hooks";
+import { useDayEntries } from "~/hooks/useDayEntries";
+import { cn, getDateDetails } from "~/utils";
+
+interface MonthCardHeaderProps {
+  title: string;
+  classes?: string;
+}
+
+export function MonthCardHeader({ title, classes }: MonthCardHeaderProps) {
+  const { userId } = useAppContext();
+
+  const today = new Date();
+  const { year, month, day } = getDateDetails(today);
+
+  // const { data, isLoading, error } = useDayEntries(userId, year, month, day);
+
+  return (
+    <div className={cn(classes)}>
+      <h2 className="text-xl font-semibold capitalize">{title}</h2>
+    </div>
+  );
+}
diff --git a/client/src/components/layouts/Dashboard.tsx b/client/src/components/layouts/Dashboard.tsx
@@ -5,10 +5,11 @@ import { useTasks } from "~/hooks";
 import { useAppContext } from "~/hooks/useContext";
 import { MonthDaysRow } from "../MonthDaysRow";
 import { CreateTaskForm } from "../CreateTaskForm";
+import { MonthCardHeader } from "../MonthCardHeader";
 
 export function Dashboard() {
   const { userId } = useAppContext();
-  
+
   const { data: tasks, isLoading, error } = useTasks(userId);
 
   const year = new Date().getFullYear();
@@ -18,25 +19,19 @@ export function Dashboard() {
   return (
     <>
       <div className="rounded-xl bg-stone-100/75 p-6">
-        <MonthHeader
+        <MonthCardHeader
           title={`${getMonthFromIndex(month - 1)} ${year}`}
           classes="mb-6"
         />
 
         {tasks?.length === 0 && <Notion />}
 
-        <div className="flex w-full justify-center">
-          {tasks && tasks?.length > 0 && (
-            <div className="space-y-2">
-              <MonthDaysRow
-                year={year}
-                month={month}
-                daysInMonth={daysInMonth}
-              />
-              <TaskList tasks={tasks} year={year} month={month} />
-            </div>
-          )}
-        </div>
+        {tasks && tasks?.length > 0 && (
+          <div className="flex w-full flex-col justify-center gap-2">
+            <MonthDaysRow year={year} month={month} daysInMonth={daysInMonth} />
+            <TaskList tasks={tasks} year={year} month={month} />
+          </div>
+        )}
 
         <CreateTaskForm />
       </div>
@@ -46,19 +41,6 @@ export function Dashboard() {
 
 //
 
-interface MonthHeaderProps {
-  title: string;
-  classes?: string;
-}
-
-function MonthHeader({ title, classes }: MonthHeaderProps) {
-  return (
-    <div className={cn(classes)}>
-      <h2 className="text-xl font-semibold capitalize">{title}</h2>
-    </div>
-  );
-}
-
 function Notion() {
   return (
     <div className="flex w-full justify-center rounded-md border p-4">

diff --git a/client/src/utils/handlers.ts b/client/src/utils/handlers.ts
@@ -3,9 +3,14 @@ import { twMerge } from "tailwind-merge";
 
 import { MonthType } from "~/~/utils/types";
 
-export const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
-};
+// Get date details
+export function getDateDetails(date: Date) {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    day: date.getDate(),
+  };
+}
 
 // Get a month name from index
 export function getMonthFromIndex(index: number) {
@@ -31,3 +36,8 @@ export function getMonthFromIndex(index: number) {
 export function getDaysInMonth(month: number, year: number) {
   return new Date(year, month, 0).getDate();
 }
+
+// Tw
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};