@acms-subir/core 0.0.2 → 0.2.0

package/src/components/NavManager.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { DndContext, PointerSensor, KeyboardSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -10,6 +10,9 @@ import type { NavItem, NavArea } from '../lib/schema';
 // auto-list of published pages (which stays as a fallback while the header
 // area is empty); footer renders above the footer text; social feeds the
 // footer social row and share UIs.
+//
+// Edits stay local until "Save changes" commits them all at once — the live
+// nav never sees a half-rearranged state. Discard restores the saved state.
 
 type SaveState = 'saved' | 'saving' | 'error';
 
@@ -19,6 +22,9 @@ const AREAS: { key: NavArea; title: string; hint: string }[] = [
   { key: 'social', title: 'Social', hint: 'Footer social row — also used for share links on posts.' },
 ];
 
+// unsaved additions carry a temp id until nav.create returns the real one
+const isTemp = (id: string) => id.startsWith('tmp-');
+
 function Row({
   item, onEdit, onArea, onDelete,
 }: {
@@ -63,52 +69,45 @@ function Row({
 
 export default function NavManager({ items: initial }: { items: NavItem[] }) {
   const [items, setItems] = useState<NavItem[]>(initial);
+  // last state the server has — dirty compares against this
+  const [saved, setSaved] = useState<NavItem[]>(initial);
   const [saveState, setSaveState] = useState<SaveState>('saved');
-  const pending = useRef(0);
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const dirty = useMemo(
+    () =>
+      JSON.stringify(items.map(({ id, label, url, area }) => ({ id, label, url, area }))) !==
+      JSON.stringify(saved.map(({ id, label, url, area }) => ({ id, label, url, area }))),
+    [items, saved]
+  );
+
+  // unsaved edits live only in this tab — warn before losing them
+  useEffect(() => {
+    if (!dirty) return;
+    const onLeave = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', onLeave);
+    return () => window.removeEventListener('beforeunload', onLeave);
+  }, [dirty]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
-  async function run(fn: () => Promise<{ error?: unknown }>) {
-    pending.current += 1;
-    setSaveState('saving');
-    const r = await fn();
-    pending.current -= 1;
-    if (r.error) setSaveState('error');
-    else if (pending.current === 0) setSaveState('saved');
-  }
-
-  function debounced(key: string, fn: () => void, ms = 600) {
-    const prev = timers.current.get(key);
-    if (prev) clearTimeout(prev);
-    timers.current.set(key, setTimeout(() => { timers.current.delete(key); fn(); }, ms));
-  }
-
   function edit(id: string, patch: Partial<Pick<NavItem, 'label' | 'url'>>) {
     setItems((ls) => ls.map((n) => (n.id === id ? { ...n, ...patch } : n)));
-    debounced(id, () => void run(() => actions.nav.update({ id, ...patch })));
   }
 
   function setArea(id: string, area: NavArea) {
     setItems((ls) => ls.map((n) => (n.id === id ? { ...n, area } : n)));
-    void run(() => actions.nav.update({ id, area }));
   }
 
-  async function add(area: NavArea) {
-    await run(async () => {
-      const r = await actions.nav.create({ label: 'New link', url: '/', area });
-      if (!r.error) setItems((ls) => [...ls, r.data.item]);
-      return r;
-    });
+  function add(area: NavArea) {
+    setItems((ls) => [...ls, { id: `tmp-${crypto.randomUUID()}`, label: 'New link', url: '/', area, order: ls.length }]);
   }
 
   function remove(id: string) {
-    if (!window.confirm('Delete this navigation item?')) return;
+    // local until Save — Discard brings it back
     setItems((ls) => ls.filter((n) => n.id !== id));
-    void run(() => actions.nav.delete({ id }));
   }
 
   function onDragEnd(area: NavArea, e: DragEndEvent) {
@@ -119,21 +118,68 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
       const rest = ls.filter((n) => n.area !== area);
       const from = group.findIndex((n) => n.id === active.id);
       const to = group.findIndex((n) => n.id === over.id);
-      const moved = arrayMove(group, from, to);
-      const next = [...rest, ...moved];
-      // persist the full display order: header, footer, social, each in order
-      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
-      void run(() => actions.nav.reorder({ ids: ordered }));
-      return next;
+      return [...rest, ...arrayMove(group, from, to)];
     });
   }
 
+  // one commit for everything: deletes, creates (temp ids become real),
+  // updates, then the full display order
+  async function saveAll() {
+    setSaveState('saving');
+    try {
+      const savedById = new Map(saved.map((n) => [n.id, n]));
+      const keptIds = new Set(items.map((n) => n.id));
+      for (const n of saved) {
+        if (!keptIds.has(n.id)) {
+          const r = await actions.nav.delete({ id: n.id });
+          if (r.error) throw r.error;
+        }
+      }
+      const next: NavItem[] = [];
+      for (const n of items) {
+        if (isTemp(n.id)) {
+          const r = await actions.nav.create({ label: n.label, url: n.url, area: n.area });
+          if (r.error) throw r.error;
+          next.push({ ...n, id: r.data.item.id });
+        } else {
+          const prev = savedById.get(n.id);
+          if (prev && (prev.label !== n.label || prev.url !== n.url || prev.area !== n.area)) {
+            const r = await actions.nav.update({ id: n.id, label: n.label, url: n.url, area: n.area });
+            if (r.error) throw r.error;
+          }
+          next.push(n);
+        }
+      }
+      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
+      if (ordered.length) {
+        const r = await actions.nav.reorder({ ids: ordered });
+        if (r.error) throw r.error;
+      }
+      setItems(next);
+      setSaved(next);
+      setSaveState('saved');
+    } catch {
+      setSaveState('error');
+    }
+  }
+
+  function discard() {
+    setItems(saved);
+    setSaveState('saved');
+  }
+
   return (
     <div className="nm">
       <div className="nm-head">
-        <span className={`lm-savestate ${saveState}`}>
-          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+        <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>
+          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : dirty ? 'Unsaved changes — not live yet' : 'Live'}
         </span>
+        {dirty && (
+          <>
+            <button className="btn sm ghost" type="button" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
+            <button className="btn sm primary" type="button" onClick={() => void saveAll()} disabled={saveState === 'saving'}>Save changes</button>
+          </>
+        )}
       </div>
       {AREAS.map((a) => {
         const group = items.filter((n) => n.area === a.key);
@@ -144,7 +190,7 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
                 <p className="card-title">{a.title}</p>
                 <p className="hint">{a.hint}</p>
               </div>
-              <button className="btn sm" type="button" onClick={() => void add(a.key)}>+ Add item</button>
+              <button className="btn sm" type="button" onClick={() => add(a.key)}>+ Add item</button>
             </div>
             {group.length === 0 && <p className="nm-empty">No items yet.</p>}
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={(e) => onDragEnd(a.key, e)}>