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

@@ -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>

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>

src/stores/requests.js

@@ -391,6 +391,7 @@ export const useRequestsStore = defineStore(
       addFromEvent,
       exists,
       getBlock,
+      getRequest,
       fetchPastRequests,
       refetchRequestStates,
       fetchRequestDetails,