From d53af7c9b4d408585765cb141157b0cc947ee85f Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Mon, 14 Aug 2023 19:31:13 -0700
Subject: [PATCH] Check stateId before editing tldraw store (#142)

* if localStateId = propStateId don't update store

* 1.10.9

* match nanoid dependancy

* splice refactor
---
 package-lock.json               | 11 +++++------
 package.json                    |  3 ++-
 src/components/TldrawCanvas.tsx |  9 ++++++++-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6dfffaf0..f331e11f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "query-builder",
-  "version": "1.10.8",
+  "version": "1.10.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "query-builder",
-      "version": "1.10.8",
+      "version": "1.10.9",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -14,6 +14,7 @@
         "@tldraw/tldraw": "^2.0.0-alpha.12",
         "contrast-color": "^1.0.1",
         "cytoscape-navigator": "^2.0.1",
+        "nanoid": "2.0.4",
         "react-charts": "^3.0.0-beta.48",
         "react-draggable": "^4.4.5",
         "react-in-viewport": "^1.0.0-alpha.20",
@@ -6938,8 +6939,7 @@
     "node_modules/nanoid": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.0.4.tgz",
-      "integrity": "sha512-sOJnBmY3TJQBVIBqKHoifuwygrocXg3NjS9rZSMnVl05XWSHK7Qxb177AIZQyMDjP86bz+yneozj/h9qsPLcCA==",
-      "peer": true
+      "integrity": "sha512-sOJnBmY3TJQBVIBqKHoifuwygrocXg3NjS9rZSMnVl05XWSHK7Qxb177AIZQyMDjP86bz+yneozj/h9qsPLcCA=="
     },
     "node_modules/nice-try": {
       "version": "1.0.5",
@@ -14820,8 +14820,7 @@
     "nanoid": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.0.4.tgz",
-      "integrity": "sha512-sOJnBmY3TJQBVIBqKHoifuwygrocXg3NjS9rZSMnVl05XWSHK7Qxb177AIZQyMDjP86bz+yneozj/h9qsPLcCA==",
-      "peer": true
+      "integrity": "sha512-sOJnBmY3TJQBVIBqKHoifuwygrocXg3NjS9rZSMnVl05XWSHK7Qxb177AIZQyMDjP86bz+yneozj/h9qsPLcCA=="
     },
     "nice-try": {
       "version": "1.0.5",
diff --git a/package.json b/package.json
index eb3e5685..0a4506d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.10.8",
+  "version": "1.10.9",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {
@@ -30,6 +30,7 @@
     "@tldraw/tldraw": "^2.0.0-alpha.12",
     "contrast-color": "^1.0.1",
     "cytoscape-navigator": "^2.0.1",
+    "nanoid": "2.0.4",
     "react-charts": "^3.0.0-beta.48",
     "react-draggable": "^4.4.5",
     "react-in-viewport": "^1.0.0-alpha.20",
diff --git a/src/components/TldrawCanvas.tsx b/src/components/TldrawCanvas.tsx
index e41d9f12..91c28998 100644
--- a/src/components/TldrawCanvas.tsx
+++ b/src/components/TldrawCanvas.tsx
@@ -88,6 +88,7 @@ import getDiscourseContextResults from "../utils/getDiscourseContextResults";
 import { StoreSnapshot } from "@tldraw/tlstore";
 import setInputSetting from "roamjs-components/util/setInputSetting";
 import ContrastColor from "contrast-color";
+import nanoid from "nanoid";
 
 declare global {
   interface Window {
@@ -1208,6 +1209,7 @@ const TldrawCanvas = ({ title }: Props) => {
   }, [tree, pageUid]);
   const containerRef = useRef<HTMLDivElement>(null);
   const [maximized, setMaximized] = useState(false);
+  const localStateIds: string[] = [];
   const store = useMemo(() => {
     const _store = customTldrawConfig.createStore({
       initialData: initialState.data,
@@ -1232,12 +1234,14 @@ const TldrawCanvas = ({ title }: Props) => {
           typeof props["roamjs-query-builder"] === "object"
             ? props["roamjs-query-builder"]
             : {};
-        // we need this bc Roam doesn't update edit/user or edit/time when we just edit block/props
         await setInputSetting({
           blockUid: pageUid,
           key: "timestamp",
           value: new Date().valueOf().toString(),
         });
+        const newstateId = nanoid();
+        localStateIds.push(newstateId);
+        localStateIds.splice(0, localStateIds.length - 25);
         window.roamAlphaAPI.updateBlock({
           block: {
             uid: pageUid,
@@ -1245,6 +1249,7 @@ const TldrawCanvas = ({ title }: Props) => {
               ...props,
               ["roamjs-query-builder"]: {
                 ...rjsqb,
+                stateId: newstateId,
                 tldraw: state,
               },
             },
@@ -1264,6 +1269,8 @@ const TldrawCanvas = ({ title }: Props) => {
           (after?.[":block/props"] || {}) as json
         ) as Record<string, json>;
         const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
+        const propsStateId = rjsqb?.stateId as string;
+        if (localStateIds.some((s) => s === propsStateId)) return;
         const newState = rjsqb?.tldraw as Parameters<
           typeof store.deserialize
         >[0];