Enhance UI, add save button

datnguyen-en · datnguyen-en · commit d4ea78b53082 · 2025-07-24T15:20:31.000+07:00
diff --git a/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/all-availabilities.tsx b/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/all-availabilities.tsx
@@ -31,8 +31,13 @@ export default function AllAvailabilities({
   ];
 
   return (
-    <div className="flex flex-col gap-2 text-center">
-      <div className="font-semibold">{t('everyone_availability')}</div>
+    <div
+      className="flex flex-col items-center gap-2 text-center"
+      style={{ minWidth: '260px' }}
+    >
+      <div className="text-center font-semibold">
+        {t('everyone_availability')}
+      </div>
 
       <div className="flex items-center justify-center gap-2 text-sm">
         <div>
diff --git a/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/availability-planner.tsx b/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/availability-planner.tsx
@@ -1,35 +1,57 @@
 import DatePlanner from './date-planner';
+import { useTimeBlocking } from './time-blocking-provider';
 import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
 import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
 
 export default function AvailabilityPlanner({
   plan,
   timeblocks,
   disabled,
+  className = '', // allow parent to control alignment
 }: {
   plan: MeetTogetherPlan;
   timeblocks: Timeblock[];
   disabled?: boolean;
+  className?: string;
 }) {
   const t = useTranslations('meet-together-plan-details');
+  const { selectedTimeBlocks, syncTimeBlocks, editing } = useTimeBlocking();
+  const [isSaving, setIsSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
 
-  return (
-    <div className="flex flex-col gap-2 text-center">
-      <div className="font-semibold">{t('your_availability')}</div>
+  // Mark as dirty when editing ends
+  useEffect(() => {
+    if (!editing.enabled) {
+      setDirty(true);
+    }
+  }, [editing.enabled]);
+
+  // Optionally, reset dirty flag after save
+  const handleSave = async () => {
+    setIsSaving(true);
+    await syncTimeBlocks();
+    setIsSaving(false);
+    setDirty(false);
+  };
 
-      <div className="flex items-center justify-center gap-4 text-sm">
+  return (
+    <div
+      className={`flex flex-col items-center ${className}`}
+      style={{ minWidth: '260px' }}
+    >
+      <div className="text-center font-semibold">{t('your_availability')}</div>
+      <div className="mt-1 mb-2 flex items-center justify-center gap-4 text-sm">
         <div className="flex items-center gap-2">
           <div>{t('unavailable')}</div>
           <div className="h-4 w-8 border border-foreground/50 bg-red-500/20" />
         </div>
-
         <div className="flex items-center gap-2">
           <div>{t('available')}</div>
           <div className="h-4 w-8 border border-foreground/50 bg-green-500/70" />
         </div>
       </div>
-
       <DatePlanner
         timeblocks={timeblocks}
         dates={plan.dates}
@@ -38,6 +60,18 @@ export default function AvailabilityPlanner({
         disabled={disabled}
         editable
       />
+      <button
+        className="mx-auto mt-8 block rounded-full bg-gradient-to-r from-indigo-500 via-sky-500 to-emerald-500 px-8 py-3 text-lg font-semibold text-white shadow-md transition-all duration-150 ease-in-out hover:scale-105 hover:from-indigo-600 hover:via-sky-600 hover:to-emerald-600 focus:ring-2 focus:ring-sky-400 focus:ring-offset-2 focus:outline-none active:scale-100 disabled:cursor-not-allowed disabled:from-gray-400 disabled:via-gray-400 disabled:to-gray-400"
+        style={{
+          minWidth: '120px',
+          minHeight: '48px',
+          letterSpacing: '0.01em',
+        }}
+        onClick={handleSave}
+        disabled={!dirty || isSaving}
+      >
+        {isSaving ? 'Saving...' : 'Save'}
+      </button>
     </div>
   );
 }
diff --git a/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx b/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx
@@ -140,10 +140,10 @@ export default function PlanDetailsClient({
           handlePNG={downloadAsPNG}
         />
         <div id="plan-ref" className="flex w-full flex-col items-center">
-          <p className="my-4 flex max-w-xl items-center gap-2 text-center text-2xl leading-tight! font-semibold md:mb-4 lg:text-3xl">
+          <p className="mx-auto my-4 flex max-w-xl items-center justify-center gap-2 text-center text-2xl leading-tight! font-semibold md:mb-4 lg:text-3xl">
             {plan.name} <EditPlanDialog plan={plan} />
           </p>
-          <div className="mt-8 grid w-full items-center justify-between gap-4 md:grid-cols-2">
+          <div className="mx-auto mt-8 flex w-full flex-col items-center justify-center gap-8 md:flex-row md:gap-16 lg:gap-32 xl:gap-80">
             <PlanLogin
               plan={plan}
               timeblocks={[]}
diff --git a/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/time-blocking-provider.tsx b/apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/time-blocking-provider.tsx
@@ -73,6 +73,7 @@ const TimeBlockContext = createContext({
           prev: 'login' | 'account-switcher' | undefined
         ) => 'login' | 'account-switcher' | undefined)
   ) => {},
+  syncTimeBlocks: () => Promise.resolve(),
 });
 
 const TimeBlockingProvider = ({
@@ -272,16 +273,29 @@ const TimeBlockingProvider = ({
     });
   }, [plan.id, editing]);
 
-  useEffect(() => {
+  // --- Move syncTimeBlocks outside useEffect and expose it via context ---
+  const syncTimeBlocks = useCallback(async () => {
+    if (!plan.id || !user?.id) return;
+
+    const fetchCurrentTimeBlocks = async (planId: string) => {
+      const res = await fetch(`/api/meet-together/plans/${planId}/timeblocks`);
+      if (!res.ok) return [];
+      const timeblocks = (await res.json()) as Timeblock[];
+      return timeblocks
+        ?.flat()
+        .filter(
+          (tb: Timeblock) =>
+            tb.user_id === user?.id && tb.is_guest === (user?.is_guest ?? false)
+        );
+    };
+
     const addTimeBlock = async (timeblock: Timeblock) => {
       if (plan.id !== selectedTimeBlocks.planId) return;
-
       const data = {
         user_id: user?.id,
         password_hash: user?.password_hash,
         timeblock,
       };
-
       await fetch(`/api/meet-together/plans/${plan.id}/timeblocks`, {
         method: 'POST',
         body: JSON.stringify(data),
@@ -290,12 +304,10 @@ const TimeBlockingProvider = ({
 
     const removeTimeBlock = async (timeblock: Timeblock) => {
       if (plan.id !== selectedTimeBlocks.planId) return;
-
       const data = {
         user_id: user?.id,
         password_hash: user?.password_hash,
       };
-
       await fetch(
         `/api/meet-together/plans/${plan.id}/timeblocks/${timeblock.id}`,
         {
@@ -305,115 +317,80 @@ const TimeBlockingProvider = ({
       );
     };
 
-    const fetchCurrentTimeBlocks = async (planId: string) => {
-      const res = await fetch(`/api/meet-together/plans/${planId}/timeblocks`);
-      if (!res.ok) return [];
-
-      const timeblocks = (await res.json()) as Timeblock[];
-      return timeblocks
-        ?.flat()
-        .filter(
-          (tb: Timeblock) =>
-            tb.user_id === user?.id && tb.is_guest === (user?.is_guest ?? false)
-        );
-    };
-
-    const syncTimeBlocks = async () => {
-      if (!plan.id || !user?.id) return;
-
-      const serverTimeblocks = await fetchCurrentTimeBlocks(plan?.id);
-      const localTimeblocks = selectedTimeBlocks.data;
-
-      if (!serverTimeblocks || !localTimeblocks) return;
-      if (serverTimeblocks.length === 0 && localTimeblocks.length === 0) return;
-
-      // If server timeblocks are empty and local timeblocks are not,
-      // add all local timeblocks to server
-      if (serverTimeblocks.length === 0 && localTimeblocks.length > 0) {
-        await Promise.all(
-          localTimeblocks.map((timeblock) => addTimeBlock(timeblock))
-        );
-        return;
-      }
-
-      // If local timeblocks are empty, remove all server timeblocks
-      if (serverTimeblocks.length > 0 && localTimeblocks.length === 0) {
-        await Promise.all(
-          serverTimeblocks.map((timeblock) => removeTimeBlock(timeblock))
-        );
-        return;
-      }
-
-      // If there are no timeblocks to sync (both local and server have
-      // the same timeblocks), return early
-      if (
-        serverTimeblocks.every((serverTimeblock: Timeblock) =>
-          localTimeblocks.some(
-            (localTimeblock: Timeblock) =>
-              localTimeblock.date === serverTimeblock.date &&
-              localTimeblock.start_time === serverTimeblock.start_time &&
-              localTimeblock.end_time === serverTimeblock.end_time
-          )
-        ) &&
-        localTimeblocks.every((localTimeblock: Timeblock) =>
-          serverTimeblocks.some(
-            (serverTimeblock: Timeblock) =>
-              serverTimeblock.date === localTimeblock.date &&
-              serverTimeblock.start_time === localTimeblock.start_time &&
-              serverTimeblock.end_time === localTimeblock.end_time
-          )
-        ) &&
-        serverTimeblocks.length === localTimeblocks.length
-      )
-        return;
-
-      // For each time block, remove timeblocks that are not on local
-      // and add timeblocks that are not on server
-      const timeblocksToRemove = serverTimeblocks.filter(
-        (serverTimeblock: Timeblock) =>
-          !localTimeblocks.some(
-            (localTimeblock: Timeblock) =>
-              localTimeblock.date === serverTimeblock.date &&
-              localTimeblock.start_time === serverTimeblock.start_time &&
-              localTimeblock.end_time === serverTimeblock.end_time
-          )
+    const serverTimeblocks = await fetchCurrentTimeBlocks(plan?.id);
+    const localTimeblocks = selectedTimeBlocks.data;
+    if (!serverTimeblocks || !localTimeblocks) return;
+    if (serverTimeblocks.length === 0 && localTimeblocks.length === 0) return;
+    if (serverTimeblocks.length === 0 && localTimeblocks.length > 0) {
+      await Promise.all(
+        localTimeblocks.map((timeblock) => addTimeBlock(timeblock))
       );
-
-      const timeblocksToAdd = localTimeblocks.filter(
-        (localTimeblock: Timeblock) =>
-          !serverTimeblocks?.some(
-            (serverTimeblock: Timeblock) =>
-              serverTimeblock.date === localTimeblock.date &&
-              serverTimeblock.start_time === localTimeblock.start_time &&
-              serverTimeblock.end_time === localTimeblock.end_time
-          )
+      return;
+    }
+    if (serverTimeblocks.length > 0 && localTimeblocks.length === 0) {
+      await Promise.all(
+        serverTimeblocks.map((timeblock) => removeTimeBlock(timeblock))
       );
+      return;
+    }
+    if (
+      serverTimeblocks.every((serverTimeblock: Timeblock) =>
+        localTimeblocks.some(
+          (localTimeblock: Timeblock) =>
+            localTimeblock.date === serverTimeblock.date &&
+            localTimeblock.start_time === serverTimeblock.start_time &&
+            localTimeblock.end_time === serverTimeblock.end_time
+        )
+      ) &&
+      localTimeblocks.every((localTimeblock: Timeblock) =>
+        serverTimeblocks.some(
+          (serverTimeblock: Timeblock) =>
+            serverTimeblock.date === localTimeblock.date &&
+            serverTimeblock.start_time === localTimeblock.start_time &&
+            serverTimeblock.end_time === localTimeblock.end_time
+        )
+      ) &&
+      serverTimeblocks.length === localTimeblocks.length
+    )
+      return;
+    const timeblocksToRemove = serverTimeblocks.filter(
+      (serverTimeblock: Timeblock) =>
+        !localTimeblocks.some(
+          (localTimeblock: Timeblock) =>
+            localTimeblock.date === serverTimeblock.date &&
+            localTimeblock.start_time === serverTimeblock.start_time &&
+            localTimeblock.end_time === serverTimeblock.end_time
+        )
+    );
+    const timeblocksToAdd = localTimeblocks.filter(
+      (localTimeblock: Timeblock) =>
+        !serverTimeblocks?.some(
+          (serverTimeblock: Timeblock) =>
+            serverTimeblock.date === localTimeblock.date &&
+            serverTimeblock.start_time === localTimeblock.start_time &&
+            serverTimeblock.end_time === localTimeblock.end_time
+        )
+    );
+    if (timeblocksToRemove.length === 0 && timeblocksToAdd.length === 0) return;
+    if (timeblocksToRemove.length > 0)
+      await Promise.all(
+        timeblocksToRemove.map((timeblock) =>
+          timeblock.id ? removeTimeBlock(timeblock) : null
+        )
+      );
+    if (timeblocksToAdd.length > 0)
+      await Promise.all(
+        timeblocksToAdd.map((timeblock) => addTimeBlock(timeblock))
+      );
+    const syncedServerTimeblocks = await fetchCurrentTimeBlocks(plan?.id);
+    setSelectedTimeBlocks({
+      planId: plan.id,
+      data: syncedServerTimeblocks,
+    });
+  }, [plan.id, user, selectedTimeBlocks]);
 
-      if (timeblocksToRemove.length === 0 && timeblocksToAdd.length === 0)
-        return;
-
-      if (timeblocksToRemove.length > 0)
-        await Promise.all(
-          timeblocksToRemove.map((timeblock) =>
-            timeblock.id ? removeTimeBlock(timeblock) : null
-          )
-        );
-
-      if (timeblocksToAdd.length > 0)
-        await Promise.all(
-          timeblocksToAdd.map((timeblock) => addTimeBlock(timeblock))
-        );
-
-      const syncedServerTimeblocks = await fetchCurrentTimeBlocks(plan?.id);
-      setSelectedTimeBlocks({
-        planId: plan.id,
-        data: syncedServerTimeblocks,
-      });
-    };
-
-    if (editing.enabled) return;
-    syncTimeBlocks();
-  }, [plan.id, user, selectedTimeBlocks, editing.enabled]);
+  // --- Remove the auto-sync useEffect ---
+  // useEffect(() => { ... if (editing.enabled) return; syncTimeBlocks(); }, [plan.id, user, selectedTimeBlocks, editing.enabled]);
 
   return (
     <TimeBlockContext.Provider
@@ -436,6 +413,7 @@ const TimeBlockingProvider = ({
         edit,
         endEditing,
         setDisplayMode,
+        syncTimeBlocks, // Expose syncTimeBlocks in context
       }}
     >
       {children}
