feat: saving indicator while update title request is in progress

Author: aruuunn

components/EditorNavbar/index.tsx

@@ -17,23 +17,15 @@ import AccountActions from "components/AccountActions";
 import StartPresentationModeButton from "components/StartPresentationModeButton";
 import PublishSettingsModal from "components/PublishSettingsModal";
 import { useStore } from "lib/stores/presentation";
-import { updateRemoteForId } from "lib/updateRemoteTitle";
 
 export interface EditorNavbarProps {}
 
 export const EditorNavbar: FC<EditorNavbarProps> = () => {
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const pid = useStore((state) => state.presentation.id);
   const isSaving = useStore((state) => state.isSaving);
   const title = useStore((state) => state.presentation.title);
 
-  const updateRemoteTitle = updateRemoteForId(pid);
-  const updateLocalTitle = useStore((store) => store.updateLocalTitle);
-
-  const updateTitle = async (newTitle: string) => {
-    updateLocalTitle(newTitle);
-    updateRemoteTitle(newTitle.trim() || "Untitled");
-  };
+  const updateTitle = useStore((store) => store.updateTitle);
 
   return (
     <>

lib/stores/presentation/index.ts

@@ -2,6 +2,7 @@ import create from "zustand";
 import Slide from "model/slide";
 import Presentation from "model/interfaces/presentation";
 import { updateSlideRemote } from "./updateSlideRemote";
+import { updateRemoteForId } from "./updateRemoteTitle";
 
 type MapToPartial<T> = (value: T) => Partial<T>;
 
@@ -12,7 +13,7 @@ type State = {
     "slides" | "isPublished" | "pubmeta" | "title"
   > &
     Partial<Pick<Presentation, "id">>;
-  lastSlideUpdatePromise: Promise<void> | null;
+  lastSlideUpdatePromise: Promise<any> | null;
   isSaving: boolean;
   isPresentationMode: boolean;
 };
@@ -28,7 +29,7 @@ type Actions = {
   setPresentation: (presentation: Presentation) => void;
   startPresentationMode: () => void;
   stopPresentationMode: () => void;
-  updateLocalTitle: (newTitle: string) => void;
+  updateTitle: (newTitle: string) => void;
 };
 
 const defaultSlideValue: Slide = {
@@ -78,7 +79,7 @@ export const useStore = create<State & Actions>((set, get) => ({
     updateSlideRemote(slide, pid, idx, (promise) => {
       set({ lastSlideUpdatePromise: promise });
 
-      promise.then(() => {
+      promise.finally(() => {
         const { lastSlideUpdatePromise } = get();
         if (lastSlideUpdatePromise === promise) {
           set({ isSaving: false });
@@ -131,9 +132,31 @@ export const useStore = create<State & Actions>((set, get) => ({
   stopPresentationMode: () => {
     set({ isPresentationMode: false });
   },
-  updateLocalTitle: (newTitle: string) => {
+  updateTitle: (newTitle: string) => {
     const { presentation } = get();
-    set({ presentation: { ...presentation, title: newTitle } });
+
+    if (!newTitle || newTitle?.trim() === "") {
+      return;
+    }
+
+    updateRemoteForId(presentation.id)(newTitle, (promise) => {
+      const { lastSlideUpdatePromise } = get();
+      const combinedPromise = Promise.allSettled(
+        [promise, lastSlideUpdatePromise].filter(Boolean)
+      );
+
+      combinedPromise.finally(() => {
+        const { lastSlideUpdatePromise } = get();
+        if (lastSlideUpdatePromise === combinedPromise) {
+          set({ isSaving: false, lastSlideUpdatePromise: null });
+        }
+      });
+
+      // @TODO change name to generalize.
+      set({ lastSlideUpdatePromise: combinedPromise });
+    });
+
+    set({ presentation: { ...presentation, title: newTitle }, isSaving: true });
   },
 }));
 

lib/stores/presentation/updateRemoteTitle.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+import debounce from "debounce";
+
+export const updateRemoteForId = (pid: string) =>
+  debounce((newTitle: string, callback: (promise: Promise<any>) => void) => {
+    // TODO handle error.
+    const promise = axios.patch(`/api/p/${pid}/title`, { title: newTitle });
+    callback(promise);
+  }, 500);

lib/updateRemoteTitle.ts

@@ -18,7 +18,7 @@ import {
 import { getDb } from "lib/db/getDb";
 import { Slide } from "model/slide";
 import { useStore } from "lib/stores/presentation";
-import { keyListeners } from "lib/setupKeyListeners";
+import { keyListeners } from "@lib/setupKeyListeners";
 
 interface EditorPageProps {
   presentation: PresentationType;

pages/app/[pid].tsx

@@ -16,7 +16,7 @@ import {
   PrevSlideButton,
   StartPresentationModeButton,
 } from "components";
-import { keyListeners } from "lib/setupKeyListeners";
+import { keyListeners } from "@lib/setupKeyListeners";
 
 import "@uiw/react-md-editor/dist/markdown-editor.css";
 import "@uiw/react-markdown-preview/dist/markdown.css";

pages/p/[slug].tsx

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["es5", "es6"],
+    "lib": ["es5", "es6", "ESNext"],
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",