From 17def5f4d36c2e83750c9a8cb20228bd6c9cdff8 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Sat, 6 Jul 2024 12:08:00 +0300
Subject: [PATCH] fix issues that arose after requests store refactor

there are some issues that arose with the async updates to the request objects, where some properties of the request are not yet populated, and therefore the components that render using those properties need not be shown unless those properties are populated
---
 src/components/StorageRequest.vue  | 17 ++++++++++-------
 src/components/StorageRequests.vue | 29 +++++++++++++++++------------
 src/stores/requests.js             |  1 +
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index a3d38b4..d5ee319 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -47,9 +47,9 @@ const timestamps = computed(() => {
   let { ask, expiry } = request.value.request
   let { endsAt, expiresAt } = timestampsFor(ask, expiry, requestedAt)
   return {
-    requested: new Date(requestedAt * 1000),
-    expires: new Date(expiresAt * 1000),
-    ends: new Date(endsAt * 1000)
+    requested: requestedAt ? new Date(requestedAt * 1000) : undefined,
+    expires: requestedAt ? new Date(expiresAt * 1000) : undefined,
+    ends: requestedAt ? new Date(endsAt * 1000) : undefined
   }
 })
 const requestDetails = computed(() => request.value.request)
@@ -116,15 +116,18 @@ function updateEventModerated() {
         <dd class="mb-4 flex justify-between font-light text-gray-500 sm:mb-5 dark:text-gray-400">
           <div>
             <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Requested</dt>
-            <RelativeTime :timestamp="timestamps.requested"></RelativeTime>
+            <RelativeTime
+              v-if="timestamps.requested"
+              :timestamp="timestamps.requested"
+            ></RelativeTime>
           </div>
           <div>
             <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Expires</dt>
-            <RelativeTime :timestamp="timestamps.expires"></RelativeTime>
+            <RelativeTime v-if="timestamps.expires" :timestamp="timestamps.expires"></RelativeTime>
           </div>
           <div>
             <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Ends</dt>
-            <RelativeTime :timestamp="timestamps.ends"></RelativeTime>
+            <RelativeTime v-if="timestamps.ends" :timestamp="timestamps.ends"></RelativeTime>
           </div>
         </dd>
       </dl>
@@ -222,7 +225,7 @@ function updateEventModerated() {
       </div>
 
       <SkeletonLoading v-if="slotsLoading" type="text" />
-      <Slots v-else :slots="request.slots"></Slots>
+      <Slots v-else-if="request.slots" :slots="request.slots"></Slots>
     </div>
   </div>
 </template>
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index 5ec26c1..2e11692 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -14,9 +14,9 @@ const requestsStore = useRequestsStore()
 const { requests } = storeToRefs(requestsStore)
 const router = useRouter()
 const requestsOrdered = computed(() => {
-  const sorted = Object.entries(requests.value).sort(
-    ([reqIdA, reqA], [reqIdB, reqB]) => reqB.requestedAt - reqA.requestedAt
-  )
+  const sorted = Object.entries(requests.value)
+    .sort(([reqIdA, reqA], [reqIdB, reqB]) => reqB.requestedAt - reqA.requestedAt)
+    .filter(([requestId, { fetched }]) => fetched.request)
   return sorted
 })
 
@@ -157,17 +157,25 @@ onMounted(() => {
         <tbody>
           <tr
             v-for="(
-              [requestId, { request, requestedAt, moderated, state }], idx
+              [requestId, { request, requestedAt, moderated, state, fetched }], idx
             ) in requestsOrdered"
             :key="requestId"
             class="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600 dark:bg-gray-800"
-            @click="router.push({ path: `/request/${requestId}`, query: { enableModeration } })"
+            @click="
+              router.push({
+                path: `/request/${requestId}`,
+                query: {
+                  enableModeration
+                }
+              })
+            "
           >
             <th
               scope="row"
               class="flex items-center px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
             >
               <CodexImage
+                v-if="fetched.request"
                 :cid="request.content.cid"
                 :moderated="moderated"
                 class="w-10 h-10 rounded-full mt-1"
@@ -178,7 +186,10 @@ onMounted(() => {
                   <ShortenValue :value="requestId"></ShortenValue>
                 </div>
                 <div class="font-normal text-gray-500">
-                  <RelativeTime :timestamp="new Date(requestedAt * 1000)"></RelativeTime>
+                  <RelativeTime
+                    v-if="requestedAt"
+                    :timestamp="new Date(requestedAt * 1000)"
+                  ></RelativeTime>
                 </div>
               </div>
             </th>
@@ -218,9 +229,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped>
-.max-h-128 {
-  max-height: 36rem;
-}
-</style>
diff --git a/src/stores/requests.js b/src/stores/requests.js
index 8b7b053..6773c43 100644
--- a/src/stores/requests.js
+++ b/src/stores/requests.js
@@ -391,6 +391,7 @@ export const useRequestsStore = defineStore(
       addFromEvent,
       exists,
       getBlock,
+      getRequest,
       fetchPastRequests,
       refetchRequestStates,
       fetchRequestDetails,