Event updates

- deduplicate events (for some reason contract event subscription callbacks are firing more than once
- order events by timestamp
- prettify event names
- give each event a unique id so they can be deleted one-by-one

src/components/NotificationCentre.vue

@@ -45,6 +45,11 @@ const buttonClass = computed(() => {
     hover: showNotifCentre.value
   }
 })
+const eventsOrdered = computed(() => {
+  return Object.entries(events.value).sort(([eventIdA, eventA], [eventIdB, eventB]) => {
+    return eventB.timestamp - eventA.timestamp
+  })
+})
 </script>
 
 <template>
@@ -83,22 +88,25 @@ const buttonClass = computed(() => {
         </a>
       </div>
       <div class="overflow-y-auto">
-        <div v-if="events.length === 0" class="pt-6 pb-4 text-gray-900 dark:text-white">
+        <div
+          v-if="!events.value || Object.keys(events.value).length === 0"
+          class="pt-6 pb-4 text-gray-900 dark:text-white"
+        >
           No events
         </div>
         <div class="flow-root">
           <ul role="list" class="text-left divide-y divide-gray-200 dark:divide-gray-700">
             <li
               v-for="(
-                { event, blockNumber, requestId, slotIdx, state, timestamp, moderated }, idx
+                [eventId, { event, blockNumber, requestId, slotIdx, state, timestamp, moderated }],
-              ) in events"
+                idx
-              :key="idx"
+              ) in eventsOrdered"
-              class="py-3 pr-2 pl-4 pb-3 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+              :key="eventId"
+              class="cursor-pointer py-3 pr-2 pl-4 pb-3 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
               @click="dismissAndRedirect(requestId)"
             >
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <!-- <span class="w-8 h-8 rounded-full" alt="Neil image" /> -->
                   <CodexImage
                     :cid="request(requestId).request.content.cid"
                     :moderated="moderated"
@@ -107,10 +115,10 @@ const buttonClass = computed(() => {
                   />
                 </div>
                 <div class="flex-1 min-w-0 ms-4">
-                  <p class="text-md font-semibold">
+                  <p class="text-md">
                     <ShortenValue :value="requestId"></ShortenValue>
                   </p>
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
+                  <p class="text-sm text-gray-900 truncate dark:text-white">
                     {{ event }}
                   </p>
                   <div
@@ -123,7 +131,7 @@ const buttonClass = computed(() => {
                 <div class="text-sm text-gray-500 truncate dark:text-gray-400">
                   <RelativeTime :timestamp="new Date(timestamp * 1000)"></RelativeTime>
                 </div>
-                <div class="pl-2 cursor-pointer" @click="emit('clearEvent', idx)">
+                <div class="pl-2 cursor-pointer" @click.stop="emit('clearEvent', eventId)">
                   <svg
                     class="w-5 h-5 text-gray-300 hover:text-gray-400 dark:text-gray-600 dark:hover:text-gray-400"
                     aria-hidden="true"

src/stores/events.js

@@ -20,29 +20,49 @@ export const useEventsStore = defineStore(
       SlotFilled,
       SlotFreed
     } = marketplace.filters
-    const events = ref([]) // {event: 'SlotFreed',blockNumber,requestId,slotIdx,state: 'Free'}
+    const events = ref({}) // {event: 'SlotFreed',blockNumber,requestId,slotIdx,state: 'Free'}
+
+    const id = (event, blockNumber, requestId, slotIdx) => {
+      return `${event}_${blockNumber}_${requestId}_${slotIdx}`
+    }
 
     function add({ event, blockNumber, requestId, slotIdx, state, timestamp, moderated }) {
-      events.value.push({ event, blockNumber, requestId, slotIdx, state, timestamp, moderated })
+      let eventId = id(event, blockNumber, requestId, slotIdx)
+      events.value[eventId] = {
+        event,
+        blockNumber,
+        requestId,
+        slotIdx,
+        state,
+        timestamp,
+        moderated
+      }
     }
 
     function clearEvents() {
-      events.value = []
+      events.value = {}
     }
 
-    function clearEvent(idx) {
+    function clearEvent(eventId) {
-      events.value = events.value.filter((_, index) => index !== idx)
+      delete events.value[eventId]
+      // events.value = events.value.filter((_, index) => index !== idx)
     }
 
     function updateModerated(requestId, moderated) {
-      events.value = events.value.map((event) => {
+      for ([eventId, { reqId }] in Object.entries(events.value)) {
-        if (event) {
+        if (reqId === requestId) {
-          if (event.requestId === requestId) {
+          events.value[eventId].moderated = moderated
-            event.moderated = moderated
+          break
-          }
-          return event
         }
-      })
+      }
+      // events.value = events.value.map((event) => {
+      //   if (event) {
+      //     if (event.requestId === requestId) {
+      //       event.moderated = moderated
+      //     }
+      //     return event
+      //   }
+      // })
     }
 
     async function listenForNewEvents() {

src/utils/events.js

@@ -1,10 +1,11 @@
 export const StorageEvent = {
-  StorageRequested: 'StorageRequested', // storage was requested
+  StorageRequested: 'Storage requested', // storage was requested
-  RequestFulfilled: 'RequestFulfilled', // request has started (all slots filled)
+  RequestFulfilled: 'Request fulfilled (started)', // request has started (all slots filled)
-  RequestCancelled: 'RequestCancelled', // request was cancelled when not all slots were filled by the expiry
+  RequestCancelled: 'Request cancelled', // request was cancelled when not all slots were filled by the expiry
-  RequestFailed: 'RequestFailed', // the request has failed (too many slots freed)
+  RequestFailed: 'Request failed', // the request has failed (too many slots freed)
-  SlotFilled: 'SlotFilled', // slot was filled by provider (providing proof and collateral)
+  SlotFilled: 'Slot filled', // slot was filled by provider (providing proof and collateral)
-  SlotFreed: 'SlotFreed' // slot freed after provider missed too many proofs
+  SlotFreed: 'Slot freed', // slot freed after provider missed too many proofs
+  RequestFinished: 'Request finished'
 }
 
 export function toSlotState(idx) {