Working on dialog editor, on dialogs, on phone

dialogEditor/src/hooks/useAutoSave.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect, useRef } from 'react';
+
+export function useAutoSave(
+  value: string,
+  onSave: (value: string) => void,
+  delay = 600
+): [string, (v: string) => void] {
+  const [local, setLocal] = useState(value);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const savedValueRef = useRef(value);
+
+  useEffect(() => {
+    if (value !== savedValueRef.current) {
+      savedValueRef.current = value;
+      setLocal(value);
+    }
+  }, [value]);
+
+  const handleChange = (v: string) => {
+    setLocal(v);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      savedValueRef.current = v;
+      onSave(v);
+    }, delay);
+  };
+
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  return [local, handleChange];
+}