use ddb files as source

src/data/db.js

@@ -1,7 +1,8 @@
 import Dexie from "dexie";
 import 'dexie-observable';
 import { templateSeeds } from "./seeds";
-import { diagramToDrawDbFile } from "../utils/parser"
+import { diagramToDdbFile, ddbFileToDiagram, writeDdbFiles, deleteDdbFiles } from "./usercode"
+import { ddbDiagramIsValid } from "../utils/validateSchema";
 
 export const db = new Dexie("drawDB");
 
@@ -14,10 +15,27 @@ db.on("populate", (transaction) => {
   transaction.templates.bulkAdd(templateSeeds).catch((e) => console.log(e));
 });
 
+db.on("ready", async (db) => {
+  // Use ddb files as source for diagrams
+  const diagramsRes = await fetch('/api/diagrams', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+  })
+  const ddbFiles = await diagramsRes.json();
+  const validDdbFiles = ddbFiles.filter(ddbFile => ddbDiagramIsValid(ddbFile));
+  const diagrams = validDdbFiles.map(f => ddbFileToDiagram(f))
+  return db.transaction('rw', db.diagrams, async () => {
+    await db.diagrams.clear();
+    await db.diagrams.bulkAdd(diagrams);
+  })
+})
 
 const debounce = (func, delay) => {
   let timer;
-  return function(...args) {
+  return function (...args) {
     clearTimeout(timer);
     timer = setTimeout(() => {
       func.apply(this, args);
@@ -30,24 +48,30 @@ const debouncedChangesHandler = debounce(async (changes) => {
 }, 1500);
 
 const handleDiagramChanges = (diagramChanges) => {
-  console.log("diagramChanges", diagramChanges);
+  diagramChanges.forEach(({ type, obj, oldObj }) => {
+    const ddbFile = diagramToDdbFile(obj);
 
-  // Handle create / update / delete separately
+    switch (type) {
+      case 1:
+        writeDdbFiles([ddbFile]);
+        break;
 
-  // Parse changes to ddb file format
-  const ddbFiles = diagramChanges.map(d => diagramToDrawDbFile(d.obj));
-  
-  // Write files to usercode
-  ddbFiles.forEach(ddbFile => {
-    fetch('/api/usercode-files', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ filename: `${ddbFile.title}.ddb`, content: ddbFile })
-    });
-  });
+      case 2:
+        if (obj.id === oldObj.id && obj.name !== oldObj.name) {
+          const oldDdbFile = diagramToDdbFile(oldObj);
+          deleteDdbFiles([oldDdbFile]);
+        }
+        writeDdbFiles([ddbFile]);
+        break;
+
+      case 3:
+        deleteDdbFiles([ddbFile]);
+        break;
+
+      default:
+        break;
+    }
+  })
 }
 
 db.on('changes', debouncedChangesHandler)

src/data/usercode.js

@@ -0,0 +1,81 @@
+import { databases } from "./databases";
+import { DB } from "./constants";
+
+export function diagramToDdbFile(diagram) {
+    const {
+        name,
+        lastModified,
+        tables,
+        references,
+        notes,
+        areas,
+        database,
+        types,
+        enums
+    } = diagram;
+
+    let date = lastModified ?? new Date();
+    if (typeof lastModified === "number" || typeof lastModified === "string") {
+        date = new Date(lastModified)
+    }
+
+    return {
+        author: "Unnamed",
+        title: name,
+        date: date.toISOString(),
+        tables: tables,
+        relationships: references,
+        notes: notes,
+        subjectAreas: areas,
+        database: database,
+        ...(databases[database].hasTypes && { types: types }),
+        ...(databases[database].hasEnums && { enums: enums }),
+    }
+}
+
+export function ddbFileToDiagram(ddb) {
+    const {
+        database = DB.GENERIC,
+        title = "Untitled Diagram",
+        tables,
+        date,
+        relationships,
+        subjectAreas,
+        notes,
+        enums,
+        types
+    } = ddb;
+
+    return {
+        database: database,
+        name: title,
+        lastModified: date ? new Date(date) : new Date(),
+        tables: tables,
+        references: relationships,
+        notes: notes,
+        areas: subjectAreas,
+        ...(databases[database].hasEnums && { enums: enums }),
+        ...(databases[database].hasTypes && { types: types }),
+    };
+}
+
+export function writeDdbFiles(ddbFiles) {
+    const writePromises = ddbFiles.map(ddbFile => {
+        return fetch('/api/usercode-files', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ filename: `${ddbFile.title}.ddb`, content: ddbFile })
+        });
+    })
+    return Promise.all(writePromises);
+}
+
+export function deleteDdbFiles(ddbFiles) {
+    const deletePromises = ddbFiles.map(ddbFile => {
+        return fetch(`/api/usercode-files/${ddbFile.title}.ddb`, { method: 'DELETE' });
+    });
+    return Promise.all(deletePromises);
+}

src/utils/parser.js

@@ -1,28 +0,0 @@
-import { databases } from "../data/databases";
-
-export function diagramToDrawDbFile(diagram) {
-    const { 
-        name,
-        lastModified,
-        tables,
-        references,
-        notes,
-        areas,
-        database,
-        types,
-        enums
-    } = diagram;
-
-    return {
-        author: "Unnamed",
-        title: name,
-        date: lastModified.toISOString(),
-        tables: tables,
-        relationships: references,
-        notes: notes,
-        subjectAreas: areas,
-        database: database,
-        ...(databases[database].hasTypes && { types: types }),
-        ...(databases[database].hasEnums && { enums: enums }),
-      }
-}