debounced update repo title (codepod-io#14)

lihebi · Nov 3, 2023 · 1f9b242 · 1f9b242
1 parent 80178d4
commit 1f9b242
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/api/package.json b/api/package.json
@@ -46,6 +46,7 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/express": "^4.17.14",
     "@types/jsonwebtoken": "^8.5.9",
+    "@types/lodash": "^4.14.200",
     "@types/node": "^18.11.2",
     "@types/ws": "^8.5.3",
     "ts-jest": "^29.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/package.json b/ui/package.json
@@ -40,6 +40,7 @@
     "katex": "0.13.0",
     "kbar": "^0.1.0-beta.40",
     "lib0": "^0.2.83",
+    "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "nanoid": "^3.0.0",
     "nanoid-dictionary": "^4.3.0",
@@ -68,6 +69,7 @@
     "zustand": "^4.4.1"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.200",
     "@types/node": "^20.5.6",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/ui/src/lib/store/repoSlice.ts b/ui/src/lib/store/repoSlice.ts
@@ -5,8 +5,6 @@ import { MyState } from ".";
 
 export interface RepoSlice {
   repoName: string | null;
-  repoNameSyncing: boolean;
-  repoNameDirty: boolean;
   repoId: string | null;
   editMode: "view" | "edit";
   setEditMode: (mode: "view" | "edit") => void;
@@ -36,8 +34,6 @@ export const createRepoSlice: StateCreator<MyState, [], [], RepoSlice> = (
 ) => ({
   repoId: null,
   repoName: null,
-  repoNameSyncing: false,
-  repoNameDirty: false,
   collaborators: [],
   isPublic: false,
   shareOpen: false,
@@ -56,7 +52,6 @@ export const createRepoSlice: StateCreator<MyState, [], [], RepoSlice> = (
     set(
       produce((state: MyState) => {
         state.repoName = name;
-        state.repoNameDirty = true;
       })
     );
   },

diff --git a/ui/src/pages/repo.tsx b/ui/src/pages/repo.tsx
@@ -18,13 +18,16 @@ import {
   useContext,
   memo,
   createContext,
+  useCallback,
 } from "react";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink } from "@trpc/client";
 
 import { useStore } from "zustand";
 
+import debounce from "lodash/debounce";
+
 import { createRepoStore, RepoContext } from "../lib/store";
 
 import { Canvas } from "../components/Canvas";
@@ -49,14 +52,26 @@ import { useAuth } from "../lib/auth";
 const HeaderItem = memo<any>(() => {
   const store = useContext(RepoContext)!;
   const repoName = useStore(store, (state) => state.repoName);
-  const repoNameDirty = useStore(store, (state) => state.repoNameDirty);
   const setRepoName = useStore(store, (state) => state.setRepoName);
   const editMode = useStore(store, (state) => state.editMode);
+  const repoId = useStore(store, (state) => state.repoId)!;
 
-  // TODO put reponame into yjs
-  usePrompt(
-    "Repo name not saved. Do you want to leave this page?",
-    repoNameDirty
+  const utils = trpc.useUtils();
+  const updateRepo = trpc.repo.updateRepo.useMutation({
+    onSuccess: () => {
+      utils.repo.getDashboardRepos.invalidate();
+    },
+  });
+  const debouncedUpdateRepo = useCallback(
+    debounce(
+      (name: string) => {
+        console.log("update repo", name);
+        updateRepo.mutate({ id: repoId, name });
+      },
+      1000,
+      { maxWait: 5000 }
+    ),
+    []
   );
 
   const [focus, setFocus] = useState(false);
@@ -107,6 +122,7 @@ const HeaderItem = memo<any>(() => {
       onChange={(e) => {
         const name = e.target.value;
         setRepoName(name);
+        debouncedUpdateRepo(name);
       }}
     />
   );
@@ -134,7 +150,6 @@ const HeaderItem = memo<any>(() => {
       ) : (
         textfield
       )}
-      {repoNameDirty && <Box>saving..</Box>}
     </Stack>
   );
 });