Autosave

src/components/ControlPanel.jsx

@@ -54,7 +54,7 @@ import {
   UndoRedoContext,
 } from "../pages/Editor";
 import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
-import { ObjectType, Action, Tab } from "../data/data";
+import { ObjectType, Action, Tab, State } from "../data/data";
 import jsPDF from "jspdf";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Validator } from "jsonschema";
@@ -68,6 +68,10 @@ export default function ControlPanel({
   setDiagramId,
   title,
   setTitle,
+  state,
+  setState,
+  lastSaved,
+  setLastSaved,
 }) {
   const MODAL = {
     NONE: 0,
@@ -672,31 +676,7 @@ export default function ControlPanel({
     copy();
     del();
   };
-  const save = () => {
+  const save = () => setState(State.SAVING);
-    if (diagramId === 0) {
-      db.diagrams
-        .add({
-          name: title,
-          lastModified: new Date(),
-          tables: tables,
-          references: relationships,
-          types: types,
-          notes: notes,
-          areas: areas,
-        })
-        .then((id) => setDiagramId(id));
-    } else {
-      db.diagrams.update(diagramId, {
-        name: title,
-        lastModified: new Date(),
-        tables: tables,
-        references: relationships,
-        types: types,
-        notes: notes,
-        areas: areas,
-      });
-    }
-  };
   const open = () => setVisible(MODAL.OPEN);
   const saveDiagramAs = () => setVisible(MODAL.SAVEAS);
   const loadDiagram = async (id) => {
@@ -1682,6 +1662,21 @@ export default function ControlPanel({
     );
   }
 
+  function getState() {
+    switch (state) {
+      case State.NONE:
+        return "No changes"
+      case State.LOADING:
+        return "Loading . . .";
+      case State.SAVED:
+        return `Last saved ${lastSaved}`;
+      case State.SAVING:
+        return "Saving . . .";
+      default:
+        return "";
+    }
+  }
+
   function header() {
     return (
       <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
@@ -1783,8 +1778,16 @@ export default function ControlPanel({
                   </Dropdown>
                 ))}
               </div>
-              <Button size="small" type="tertiary">
+              <Button
-                Last saved {new Date().toISOString()}
+                size="small"
+                type="tertiary"
+                icon={
+                  state === State.LOADING || state === State.SAVING ? (
+                    <Spin size="small" />
+                  ) : null
+                }
+              >
+                {getState()}
               </Button>
             </div>
           </div>

src/data/data.js

@@ -103,6 +103,13 @@ const Action = {
   PAN: 4,
 };
 
+const State = {
+  NONE: 0,
+  SAVING: 1,
+  SAVED: 2,
+  LOADING: 3,
+};
+
 export {
   bgBlue,
   sqlDataTypes,
@@ -116,4 +123,5 @@ export {
   Tab,
   ObjectType,
   Action,
+  State,
 };

src/pages/editor.jsx

@@ -10,6 +10,7 @@ import {
   avatarThemes,
   Action,
   ObjectType,
+  State,
 } from "../data/data";
 import { socket } from "../data/socket";
 import { db } from "../data/db";
@@ -31,6 +32,8 @@ export const TypeContext = createContext();
 export default function Editor(props) {
   const [id, setId] = useState(0);
   const [title, setTitle] = useState("Untitled Diagram");
+  const [state, setState] = useState(State.NONE);
+  const [lastSaved, setLastSaved] = useState("");
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
@@ -462,6 +465,70 @@ export default function Editor(props) {
       prev.map((task, i) => (id === i ? { ...task, ...values } : task))
     );
 
+  useEffect(() => {
+    if (
+      tables.length === 0 &&
+      areas.length === 0 &&
+      notes.length === 0 &&
+      types.length === 0
+    )
+      return;
+
+    if (settings.autosave) {
+      setState(State.SAVING);
+    }
+  }, [
+    undoStack,
+    redoStack,
+    settings.autosave,
+    tables.length,
+    areas.length,
+    notes.length,
+    types.length,
+  ]);
+
+  useEffect(() => {
+    const save = async () => {
+      if (state !== State.SAVING) {
+        return;
+      }
+      if (id === 0 && window.name === "") {
+        db.diagrams
+          .add({
+            name: title,
+            lastModified: new Date(),
+            tables: tables,
+            references: relationships,
+            types: types,
+            notes: notes,
+            areas: areas,
+          })
+          .then((id) => {
+            setId(id);
+            window.name = `d ${id}`;
+            setState(State.SAVED);
+            setLastSaved(new Date().toLocaleString());
+          });
+      } else {
+        db.diagrams
+          .update(id, {
+            name: title,
+            lastModified: new Date(),
+            tables: tables,
+            references: relationships,
+            types: types,
+            notes: notes,
+            areas: areas,
+          })
+          .then(() => {
+            setState(State.SAVED);
+            setLastSaved(new Date().toLocaleString());
+          });
+      }
+    };
+    save();
+  }, [tables, relationships, notes, areas, types, title, id, state]);
+
   useEffect(() => {
     document.title = "Editor | drawDB";
 
@@ -477,8 +544,10 @@ export default function Editor(props) {
             setNotes(d.notes);
             setAreas(d.areas);
             setTypes(d.types);
+            window.name = `d ${d.id}`;
+          } else {
+            window.name = "";
           }
-          window.name = `d ${d.id}`;
         })
         .catch((error) => {
           console.log(error);
@@ -500,6 +569,8 @@ export default function Editor(props) {
             setUndoStack([]);
             setRedoStack([]);
             window.name = `d ${diagram.id}`;
+          } else {
+            window.name = "";
           }
         })
         .catch((error) => {
@@ -627,6 +698,10 @@ export default function Editor(props) {
                             setDiagramId={setId}
                             title={title}
                             setTitle={setTitle}
+                            state={state}
+                            setState={setState}
+                            lastSaved={lastSaved}
+                            setLastSaved={setLastSaved}
                           />
                           <div
                             className={
@@ -644,7 +719,7 @@ export default function Editor(props) {
                                 width={width}
                               />
                             )}
-                            <Canvas />
+                            <Canvas state={state} setState={setState} />
                             {layout.services && (
                               <MessageContext.Provider
                                 value={{ messages, setMessages }}