From 3430a02b6f18c01518a66b3a4a7e4f3ce7c9d9da Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Sat, 6 Jul 2024 12:05:01 +0300
Subject: [PATCH] fix issue with cross tab sync

when attempting to sync event.moderated cross tab, first the request store would be updated, thus changing the last store timestamp, then the events store would be updated, and the change would appear old. To facilitate, add a `lastStoreTimestamp` for each store
---
 src/components/StorageRequest.vue |  7 ++++++-
 src/plugins/pinia/crosstabsync.js | 10 +++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index 81e29d6..a3d38b4 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -14,7 +14,8 @@ import SkeletonLoading from './SkeletonLoading.vue'
 
 const router = useRouter()
 const request = defineModel()
-defineProps({
+const emit = defineEmits(['updateModerated'])
+const props = defineProps({
   requestId: {
     type: String,
     required: true
@@ -52,6 +53,9 @@ const timestamps = computed(() => {
   }
 })
 const requestDetails = computed(() => request.value.request)
+function updateEventModerated() {
+  emit('updateModerated', props.requestId, request.value.moderated)
+}
 </script>
 
 <template>
@@ -75,6 +79,7 @@ const requestDetails = computed(() => request.value.request)
               id="moderation"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               v-model="request.moderated"
+              @change="updateEventModerated"
             >
               <option v-for="(value, key) in moderatedState" :value="key" :key="key">
                 {{ value.text }}
diff --git a/src/plugins/pinia/crosstabsync.js b/src/plugins/pinia/crosstabsync.js
index aa89675..baf8a0f 100644
--- a/src/plugins/pinia/crosstabsync.js
+++ b/src/plugins/pinia/crosstabsync.js
@@ -103,14 +103,14 @@ function hydrateStore(store, { storage, serializer, key, debug }) {
   }
 }
 const localStorageMetaKey = (key) => `${key}_storeEventMeta`
-let lastStoreTimestamp = 0
+let lastStoreTimestamp = {}
 function persistState(state, { storage, serializer, key, paths, debug }) {
   try {
     // const localStorageMetaKey = `${key}_storeEventMeta`
-    lastStoreTimestamp = Date.now()
+    lastStoreTimestamp[key] = Date.now()
     const storeEventMeta = {
       source: window.name,
-      timestamp: lastStoreTimestamp
+      timestamp: lastStoreTimestamp[key]
     }
     storage.setItem(localStorageMetaKey(key), serializer.serialize(storeEventMeta))
     const toStore = Array.isArray(paths) ? pick(state, paths) : state
@@ -126,7 +126,8 @@ function handleStorageEvent(event, store, key, serializer) {
       let { source, timestamp } = serializer.deserialize(serialized)
       // prevent our own window local storage updates from hydrating (infinite
       // loop) and prevent stale updates from hydrating
-      if (source !== window.name && timestamp > lastStoreTimestamp) {
+      const lateTimeStoreUpdated = lastStoreTimestamp[key] || 0
+      if (source !== window.name && timestamp > lateTimeStoreUpdated) {
         store.$hydrate()
       }
     }
@@ -184,7 +185,6 @@ function crossTabSync(factoryOptions = {}) {
         window.addEventListener('storage', (event) =>
           handleStorageEvent(event, store, key, serializer)
         )
-        store.$dispose
       }
     })
   }