feat: whiteboard database persistance

Closes #3

Author: NagariaHussain

tldraw_whiteboard/api.py

@@ -0,0 +1,17 @@
+import frappe
+
+
+@frappe.whitelist()
+def save_user_whiteboard_state(state: str):
+    """Save the logged in user's whiteboard state to the database."""
+    exists = frappe.db.exists("User Whiteboard State", frappe.session.user)
+
+    if not exists:
+        doc = frappe.new_doc("User Whiteboard State")
+        doc.user = frappe.session.user
+        doc.state = state
+        doc.insert(ignore_permissions=True)
+    else:
+        frappe.db.set_value(
+            "User Whiteboard State", frappe.session.user, "state", state
+        )

tldraw_whiteboard/public/js/whiteboard/App.jsx

@@ -1,11 +1,13 @@
 import * as React from "react";
-import { Tldraw } from '@tldraw/tldraw'
-
+import { Tldraw } from "@tldraw/tldraw";
+import DBStateManager from "./DBStateManager";
 
 export function App() {
   return (
-    <div style={{ position: 'fixed', inset: 0, marginTop: "48px" }}>
-      <Tldraw persistenceKey={frappe.session.user} />
+    <div style={{ position: "fixed", inset: 0, marginTop: "48px" }}>
+      <Tldraw persistenceKey={frappe.session.user}>
+        <DBStateManager />
+      </Tldraw>
     </div>
   );
-}
+}

tldraw_whiteboard/public/js/whiteboard/DBStateManager.jsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { useEditor } from "@tldraw/tldraw";
+
+// save the document every 5 seconds
+const DB_SAVE_INTERVAL = 5000;
+
+export default function DBStateManager() {
+  const editor = useEditor();
+
+  function saveToDB(state) {
+    frappe.call({
+      method: "tldraw_whiteboard.api.save_user_whiteboard_state",
+      args: {
+        state: state,
+      },
+    });
+  }
+
+  function loadStateFromDBifExists() {
+    frappe.db
+      .get_value("User Whiteboard State", frappe.session.user, "state")
+      .then(({ message }) => {
+        if (message?.state) {
+          editor.store.loadSnapshot(JSON.parse(message.state));
+        }
+      });
+  }
+
+  React.useEffect(() => {
+    loadStateFromDBifExists();
+    const interval = setInterval(() => {
+      const snapshot = editor.store.getSnapshot();
+      const savable = JSON.stringify(snapshot);
+
+      saveToDB(savable);
+    }, DB_SAVE_INTERVAL);
+    return () => clearInterval(interval);
+  }, [editor]);
+
+  return <></>;
+}

tldraw_whiteboard/tldraw_whiteboard/doctype/__init__.py

@@ -0,0 +1,9 @@
+# Copyright (c) 2023, Build With Hussain and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests.utils import FrappeTestCase
+
+
+class TestUserWhiteboardState(FrappeTestCase):
+	pass

tldraw_whiteboard/tldraw_whiteboard/doctype/user_whiteboard_state/__init__.py

@@ -0,0 +1,8 @@
+// Copyright (c) 2023, Build With Hussain and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("User Whiteboard State", {
+// 	refresh(frm) {
+
+// 	},
+// });

tldraw_whiteboard/tldraw_whiteboard/doctype/user_whiteboard_state/test_user_whiteboard_state.py

@@ -0,0 +1,55 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "autoname": "field:user",
+ "creation": "2023-12-12 16:49:41.103775",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "user",
+  "state"
+ ],
+ "fields": [
+  {
+   "fieldname": "user",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "User",
+   "options": "User",
+   "reqd": 1,
+   "unique": 1
+  },
+  {
+   "default": "{}",
+   "fieldname": "state",
+   "fieldtype": "JSON",
+   "label": "State",
+   "read_only": 1
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2023-12-12 16:50:40.005164",
+ "modified_by": "Administrator",
+ "module": "Tldraw Whiteboard",
+ "name": "User Whiteboard State",
+ "naming_rule": "By fieldname",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": []
+}

tldraw_whiteboard/tldraw_whiteboard/doctype/user_whiteboard_state/user_whiteboard_state.js

@@ -0,0 +1,9 @@
+# Copyright (c) 2023, Build With Hussain and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class UserWhiteboardState(Document):
+	pass