feat(calendar): add viewing of occurrence times (#140)

* feat(calendar): add viewing of occurrence times * style: remove comments
domhhv · Dec 28, 2024 · 581b2eb · 581b2eb
1 parent 6ab8ed9
commit 581b2eb
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 70 deletions.
diff --git a/src/components/calendar/OccurrenceChip.tsx b/src/components/calendar/OccurrenceChip.tsx
@@ -1,15 +1,9 @@
 import type { Occurrence } from '@models';
-import {
-  Badge,
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Tooltip,
-} from '@nextui-org/react';
-import { Note, Trash } from '@phosphor-icons/react';
+import { Badge, Button, Tooltip } from '@nextui-org/react';
+import { Trash } from '@phosphor-icons/react';
 import { useNotesStore } from '@stores';
 import { getHabitIconUrl } from '@utils';
+import { format } from 'date-fns';
 import React from 'react';
 
 export type OccurrenceChipProps = {
@@ -26,77 +20,66 @@ const OccurrenceChip = ({
   onDelete,
   colorOverride,
 }: OccurrenceChipProps) => {
+  const occurrenceIds = occurrences.map((o) => o.id);
   const [occurrence] = occurrences;
   const { habit } = occurrence;
   const { notes } = useNotesStore();
   const { name: habitName, iconPath, trait } = habit || {};
   const { color: traitColor } = trait || {};
   const iconUrl = getHabitIconUrl(iconPath);
-  const occurrenceNote = notes.find(
-    (note) => note.occurrenceId === occurrences[0].id
+  const occurrenceTimes = occurrences.map((o) => ({
+    occurrenceId: o.id,
+    time: format(new Date(o.timestamp), 'p'),
+  }));
+  const occurrenceNotes = notes.filter(
+    (n) => n.occurrenceId && occurrenceIds.includes(n.occurrenceId)
   );
-  const [isOccurrenceTooltipOpen, setIsOccurrenceTooltipOpen] =
-    React.useState(false);
-  const [isNotePopoverOpen, setIsNotePopoverOpen] = React.useState(false);
 
   const chipStyle = {
     borderColor: colorOverride || traitColor,
   };
 
   const tooltipContent = (
-    <div className="flex items-center justify-between gap-2">
-      {habitName}
-      {occurrenceNote && (
-        <Popover
-          isOpen={isNotePopoverOpen}
-          onOpenChange={(open) => setIsNotePopoverOpen(open)}
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <span className="font-bold">{habitName}</span>
+        <Button
+          isIconOnly
+          variant="solid"
+          color="danger"
+          onClick={(clickEvent) => onDelete(occurrences[0].id, clickEvent)}
+          role="habit-chip-delete-button"
+          className="h-6 w-6 min-w-0 rounded-lg"
         >
-          <PopoverTrigger>
-            <Button
-              color="primary"
-              variant="solid"
-              size="sm"
-              isIconOnly
-              className="h-6 w-6 min-w-0 rounded-lg"
-            >
-              <Note />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent>
-            <p className="text-tiny">{occurrenceNote.content}</p>
-          </PopoverContent>
-        </Popover>
-      )}
-      <Button
-        isIconOnly
-        variant="solid"
-        color="danger"
-        onClick={(clickEvent) => onDelete(occurrences[0].id, clickEvent)}
-        role="habit-chip-delete-button"
-        className="h-6 w-6 min-w-0 rounded-lg"
-      >
-        <Trash size={14} fill="bold" className="fill-white" />
-      </Button>
+          <Trash size={14} fill="bold" className="fill-white" />
+        </Button>
+      </div>
+      <ul className="italic">
+        {occurrenceTimes.map((t) => (
+          <li key={t.occurrenceId}>
+            <span className="font-semibold">{t.time}</span>:{' '}
+            <span className="font-normal">
+              {occurrenceNotes.find((n) => n.occurrenceId === t.occurrenceId)
+                ?.content || 'No note'}
+            </span>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 
   const renderChip = () => {
     const chip = (
       <div
         style={chipStyle}
-        className="relative mr-1 mt-1 min-w-0 rounded-full border-1 bg-slate-100 p-1.5 dark:bg-slate-800"
+        className="relative mr-1 mt-1 min-w-0 rounded-full border-2 bg-slate-100 p-2 dark:bg-slate-800"
         role="habit-chip"
       >
         <img
           src={iconUrl}
           alt={`${habitName} icon`}
-          className="h-4 w-4 rounded"
+          className="h-5 w-5 rounded"
         />
-        {occurrenceNote && (
-          <div className="absolute -right-2 -top-2 text-slate-400">
-            <Note size={16} weight="fill" />
-          </div>
-        )}
       </div>
     );
 
@@ -119,14 +102,6 @@ const OccurrenceChip = ({
 
   return (
     <Tooltip
-      isOpen={isOccurrenceTooltipOpen}
-      onOpenChange={(open) => {
-        if (isNotePopoverOpen && !open) {
-          return;
-        }
-
-        setIsOccurrenceTooltipOpen(open);
-      }}
       isDisabled={!habitName}
       content={tooltipContent}
       radius="sm"

diff --git a/src/components/habit/habits-page/HabitsPage.tsx b/src/components/habit/habits-page/HabitsPage.tsx
@@ -99,7 +99,7 @@ const HabitsPage = () => {
 
   return (
     <div className="contents">
-      <h1 className="font-bold mx-auto my-4 text-3xl text-gray-800 dark:text-gray-300">
+      <h1 className="mx-auto my-4 text-3xl font-bold text-gray-800 dark:text-gray-300">
         Your habits
       </h1>
       <Table className="m-auto w-[95%] lg:w-[80%]">
@@ -127,7 +127,7 @@ const HabitsPage = () => {
               </TableCell>
               <TableCell>
                 <Chip size="sm" variant="faded" className="ml-2 h-5 border-1">
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1 font-semibold">
                     <span
                       className="mr-0.5 inline-block h-1 w-1 rounded-full"
                       role="habit-trait-chip-color-indicator"

diff --git a/src/components/user-account/AccountPage.tsx b/src/components/user-account/AccountPage.tsx
@@ -60,7 +60,7 @@ const AccountPage = () => {
   return (
     <div className="flex h-lvh w-full flex-col items-start self-start pt-8">
       <div className={containerClassName} data-testid="account-page">
-        <h1 className="font-semibold text-xl">Your Account Info</h1>
+        <h1 className="text-xl font-semibold">Your Account Info</h1>
         <form
           className="mt-4 w-[400px]"
           onSubmit={handleSubmit}

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+th,
+td,
+tr,
+button,
+[role='button'],
+[data-slot='value'],
+[data-slot='input'],
+[data-label='true'] {
+  font-weight: 600 !important;
+}
diff --git a/supabase/database.types.ts b/supabase/database.types.ts
@@ -787,7 +787,7 @@ export type Database = {
       }
       notes: {
         Row: {
-          content: string | null
+          content: string
           created_at: string
           day: string | null
           id: number
@@ -796,7 +796,7 @@ export type Database = {
           user_id: string
         }
         Insert: {
-          content?: string | null
+          content: string
           created_at?: string
           day?: string | null
           id?: number
@@ -805,7 +805,7 @@ export type Database = {
           user_id: string
         }
         Update: {
-          content?: string | null
+          content?: string
           created_at?: string
           day?: string | null
           id?: number

diff --git a/supabase/migrations/20241228160154_non_nullable_note_content.sql b/supabase/migrations/20241228160154_non_nullable_note_content.sql
@@ -0,0 +1 @@
+ALTER TABLE notes ALTER COLUMN content SET NOT NULL;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,9 +9,6 @@ export default {
     './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    fontWeight: {
-      normal: 600,
-    },
     extend: {},
   },
   plugins: [
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ALTER TABLE notes ALTER COLUMN content SET NOT NULL;