fix(store): ignore own mutations as they arrive from the listener (#46)

* chore(example): add autosave to playground * fix(store): ignore own mutations as they arrive from the listener
sanity-io · Jan 10, 2025 · b5ac022 · b5ac022
1 parent b6f69be
commit b5ac022
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 759 deletions.
diff --git a/examples/web/App.tsx b/examples/web/App.tsx
@@ -50,6 +50,7 @@ import {
 import {Fragment, type ReactNode, useCallback, useEffect, useState} from 'react'
 import {concatMap, filter, from, merge, tap} from 'rxjs'
 import styled from 'styled-components'
+import {useThrottledCallback} from 'use-debounce'
 
 import {DocumentView} from './DocumentView'
 import {personForm} from './forms/person'
@@ -195,6 +196,7 @@ function App() {
 
   const [staged, setStaged] = useState<MutationGroup[]>([])
   const [autoOptimize, setAutoOptimize] = useState<boolean>(true)
+  const [autoSave, setAutosave] = useState<boolean>(true)
 
   const [remoteLogEntries, setRemoteLogEntries] = useState<
     RemoteDocumentEvent[]
@@ -230,10 +232,22 @@ function App() {
     return () => sub.unsubscribe()
   }, [documentId])
 
+  const commit = useThrottledCallback(
+    () => {
+      // eslint-disable-next-line no-console
+      datastore.submit().catch(err => console.error(err))
+    },
+    500,
+    {trailing: true},
+  )
+
   const handleMutate = useCallback(
     (mutations: Mutation[]) => {
       datastore.mutate(mutations)
       if (autoOptimize) datastore.optimize()
+      if (autoSave) {
+        commit()
+      }
     },
     [autoOptimize],
   )
@@ -412,6 +426,21 @@ function App() {
                       />
                       <Text size={1}>Auto optimize</Text>
                     </Flex>
+                    <Flex
+                      as="label"
+                      flex={1}
+                      gap={2}
+                      align="center"
+                      justify="center"
+                    >
+                      <Checkbox
+                        checked={autoSave}
+                        onChange={e => {
+                          setAutosave(e.currentTarget.checked)
+                        }}
+                      />
+                      <Text size={1}>Autosave</Text>
+                    </Flex>
                     <Button
                       onClick={() => {
                         datastore.optimize()

diff --git a/examples/web/package.json b/examples/web/package.json
@@ -20,7 +20,8 @@
     "react-dom": "^18.3.1",
     "react-jason": "^1.1.2",
     "rxjs": "^7.8.1",
-    "styled-components": "^6.1.12"
+    "styled-components": "^6.1.12",
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
   "browserslist": "extends @sanity/browserslist-config",
   "dependencies": {
     "@sanity/client": "^6.24.1",
+    "@sanity/uuid": "^3.0.2",
     "@sanity/diff-match-patch": "^3.1.1",
     "hotscript": "^1.0.13",
     "lodash": "^4.17.21",