From 4e1549609ed707545b58d3a2644a48e98d8b3223 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Mon, 8 Jul 2024 12:22:55 +0200
Subject: [PATCH] enable moderation view for thumbnails in notification centre

---
 src/App.vue                           | 14 +++++++++++---
 src/components/AppNav.vue             |  1 +
 src/components/NotificationCentre.vue |  8 ++++++--
 src/components/StorageRequests.vue    |  2 +-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b4e369c..4152492 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { onMounted, ref, onUnmounted, inject } from 'vue'
+import { onMounted, ref, computed, inject } from 'vue'
 import { useRequestsStore } from '@/stores/requests'
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
 import Balance from '@/components/Balance.vue'
 import BlockNumber from '@/components/BlockNumber.vue'
 import ToastNotification from '@/components/toasts/ToastNotification.vue'
@@ -21,6 +21,7 @@ const { loading } = storeToRefs(requestsStore)
 const { events } = storeToRefs(eventsStore)
 const codexApi = inject('codexApi')
 const ethProvider = inject('ethProvider')
+const route = useRoute()
 
 window.name = generateUniqueId()
 
@@ -59,12 +60,19 @@ function onToggleHideThumbnails(override) {
     hideThumbnails.value = !hideThumbnails.value
   }
 }
+const enableModeration = computed(() => {
+  return route.path.includes('moderate') || route.query.enableModeration === true
+})
 </script>
 
 <template>
   <div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
     <header class="sticky top-0 z-10 w-full text-center border-b p-4 flex-none">
-      <AppNav :hideThumbnails="hideThumbnails" @toggle-hide-thumbnails="onToggleHideThumbnails" />
+      <AppNav
+        :hideThumbnails="hideThumbnails"
+        :enableModeration="enableModeration"
+        @toggle-hide-thumbnails="onToggleHideThumbnails"
+      />
     </header>
     <main class="grow flex flex-col mx-auto max-w-screen-xl w-full p-4">
       <NavBreadcrumb class="mb-4"></NavBreadcrumb>
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 1d14a6f..b9a1e47 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -28,6 +28,7 @@ const attrs = useAttrs()
           @clear-events="eventsStore.clearEvents"
           @clear-event="eventsStore.clearEvent"
           :hideThumbnails="attrs.hideThumbnails"
+          :enable-moderation="attrs.enableModeration"
         ></NotificationCentre>
         <MainMenu
           :hideThumbnails="attrs.hideThumbnails"
diff --git a/src/components/NotificationCentre.vue b/src/components/NotificationCentre.vue
index 9d582ea..cdab499 100644
--- a/src/components/NotificationCentre.vue
+++ b/src/components/NotificationCentre.vue
@@ -16,7 +16,11 @@ const router = useRouter()
 const events = defineModel()
 const emit = defineEmits(['clearEvents', 'clearEvent'])
 defineProps({
-  hideThumbnails: Boolean
+  hideThumbnails: Boolean,
+  enableModeration: {
+    type: Boolean,
+    default: false
+  }
 })
 function request(requestId) {
   return requests.value[requestId]
@@ -116,7 +120,7 @@ const count = computed(() => eventsOrdered.value.length)
                   <CodexImage
                     v-if="request(requestId)?.request"
                     :cid="request(requestId).request.content.cid"
-                    :moderated="moderated"
+                    :moderated="enableModeration ? 'approved' : moderated"
                     class="w-8 h-8 rounded-full mt-1"
                     blurClass="blur"
                   />
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index 3235f06..e7654a3 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -178,7 +178,7 @@ onMounted(() => {
               <CodexImage
                 v-if="fetched.request && !hideThumbnails"
                 :cid="request.content.cid"
-                :moderated="moderated"
+                :moderated="enableModeration ? 'approved' : moderated"
                 class="w-10 h-10 rounded-full mt-1"
                 blurClass="blur"
               />