support moderated changes cross tab

src/stores/events.js

@@ -22,8 +22,8 @@ export const useEventsStore = defineStore(
     } = marketplace.filters
     const events = ref([]) // {event: 'SlotFreed',blockNumber,requestId,slotIdx,state: 'Free'}
 
-    function add({ event, blockNumber, requestId, slotIdx, state, timestamp }) {
-      events.value.push({ event, blockNumber, requestId, slotIdx, state, timestamp })
+    function add({ event, blockNumber, requestId, slotIdx, state, timestamp, moderated }) {
+      events.value.push({ event, blockNumber, requestId, slotIdx, state, timestamp, moderated })
     }
 
     function clearEvents() {
@@ -31,7 +31,18 @@ export const useEventsStore = defineStore(
     }
 
     function clearEvent(idx) {
-      delete events.value[idx]
+      events.value = events.value.filter((_, index) => index !== idx)
+    }
+
+    function updateModerated(requestId, moderated) {
+      events.value = events.value.map((event) => {
+        if (event) {
+          if (event.requestId === requestId) {
+            event.moderated = moderated
+          }
+          return event
+        }
+      })
     }
 
     async function listenForNewEvents() {
@@ -44,7 +55,8 @@ export const useEventsStore = defineStore(
           blockNumber,
           requestId,
           state: RequestState.New,
-          timestamp: request.requestedAt
+          timestamp: request.requestedAt,
+          moderated: request.moderated
         })
       }
 
@@ -60,7 +72,15 @@ export const useEventsStore = defineStore(
 
         let { blockNumber, blockHash } = event.log
         const { timestamp } = await requests.getBlock(blockHash)
-        add({ event: StorageEvent.RequestFulfilled, blockNumber, requestId, state, timestamp })
+        const request = await requests.getRequest(requestId)
+        add({
+          event: StorageEvent.RequestFulfilled,
+          blockNumber,
+          requestId,
+          state,
+          timestamp,
+          moderated: request.moderated
+        })
       }
 
       async function onRequestCancelled(requestId, event) {
@@ -76,7 +96,15 @@ export const useEventsStore = defineStore(
 
         let { blockNumber, blockHash } = event.log
         const { timestamp } = await requests.getBlock(blockHash)
-        add({ event: StorageEvent.RequestCancelled, blockNumber, requestId, state, timestamp })
+        const request = await requests.getRequest(requestId)
+        add({
+          event: StorageEvent.RequestCancelled,
+          blockNumber,
+          requestId,
+          state,
+          timestamp,
+          moderated: request.moderated
+        })
       }
 
       async function onRequestFailed(requestId, event) {
@@ -92,7 +120,15 @@ export const useEventsStore = defineStore(
 
         let { blockNumber, blockHash } = event.log
         const { timestamp } = await requests.getBlock(blockHash)
-        add({ event: StorageEvent.RequestFailed, blockNumber, requestId, state, timestamp })
+        const request = await requests.getRequest(requestId)
+        add({
+          event: StorageEvent.RequestFailed,
+          blockNumber,
+          requestId,
+          state,
+          timestamp,
+          moderated: request.moderated
+        })
       }
 
       async function onSlotFreed(requestId, slotIdx, event) {
@@ -108,7 +144,16 @@ export const useEventsStore = defineStore(
 
         let { blockNumber, blockHash } = event.log
         const { timestamp } = await requests.getBlock(blockHash)
-        add({ event: StorageEvent.SlotFreed, blockNumber, requestId, slotIdx, state, timestamp })
+        const request = await requests.getRequest(requestId)
+        add({
+          event: StorageEvent.SlotFreed,
+          blockNumber,
+          requestId,
+          slotIdx,
+          state,
+          timestamp,
+          moderated: request.moderated
+        })
       }
 
       async function onSlotFilled(requestId, slotIdx, event) {
@@ -126,7 +171,16 @@ export const useEventsStore = defineStore(
 
         let { blockNumber, blockHash } = event.log
         const { timestamp } = await requests.getBlock(blockHash)
-        add({ event: StorageEvent.SlotFilled, blockNumber, requestId, slotIdx, state, timestamp })
+        const request = await requests.getRequest(requestId)
+        add({
+          event: StorageEvent.SlotFilled,
+          blockNumber,
+          requestId,
+          slotIdx,
+          state,
+          timestamp,
+          moderated: request.moderated
+        })
       }
 
       await marketplace.removeAllListeners(StorageRequested)
@@ -153,13 +207,14 @@ export const useEventsStore = defineStore(
       clearEvent,
       clearEvents,
       listenForNewEvents,
-      add
+      add,
+      updateModerated
     }
   },
   {
     persist: {
       serializer,
-      paths: ['events']
+      crossTabSync: true
     }
   }
 )

src/stores/requests.js

@@ -4,6 +4,7 @@ import { slotId } from '../utils/ids'
 import { arrayToObject, toRequestState, timestampsFor } from '@/utils/requests'
 import { toSlotState } from '@/utils/slots'
 import { RequestState } from '@/utils/requests'
+import { StorageEvent } from '@/utils/events'
 import serializer from './serializer'
 import { useEventsStore } from './events'
 
@@ -364,11 +365,12 @@ export const useRequestsStore = defineStore(
         }
         let blockNumber = await ethProvider.getBlockNumber()
         events.add({
-          event: 'RequestFinished',
+          event: StorageEvent.RequestFinished,
           blockNumber,
           requestId,
           state: RequestState.Finished,
-          timestamp: Date.now() / 1000
+          timestamp: Date.now() / 1000,
+          moderated: requests.value[requestId]?.moderated
         })
       }, msFromNow + 1000) // add additional second to ensure state has changed
     }

src/views/RequestView.vue

@@ -2,11 +2,13 @@
 import { computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRequestsStore } from '@/stores/requests'
+import { useEventsStore } from '@/stores/events'
 import { useRoute, useRouter } from 'vue-router'
 import StorageRequest from '@/components/StorageRequest.vue'
 import SkeletonLoading from '@/components/SkeletonLoading.vue'
 
 const requestsStore = useRequestsStore()
+const eventsStore = useEventsStore()
 const { requests, loading, fetched } = storeToRefs(requestsStore)
 const route = useRoute()
 const router = useRouter()
@@ -29,6 +31,10 @@ const request = computed(() => requests.value[route.params.requestId])
 const detailsLoading = computed(() => requests.value[route.params.requestId]?.loading?.request)
 
 watch(() => route.params.requestId, fetchRequest, { immediate: true })
+
+function updateModerated(requestId, moderated) {
+  eventsStore.updateModerated(requestId, moderated)
+}
 </script>
 
 <template>
@@ -41,6 +47,7 @@ watch(() => route.params.requestId, fetchRequest, { immediate: true })
       :enableModeration="route.query.enableModeration === 'true'"
       :slotsLoading="request.loading.slots"
       :slotsFetched="request.fetched.slots"
+      @updateModerated="updateModerated"
     />
   </div>
 </template>