From 57802c2ea0d51b044c36f83210b27c293fc30ad9 Mon Sep 17 00:00:00 2001
From: mdatelle <mike@datelle.net>
Date: Fri, 4 Oct 2024 17:22:13 -0400
Subject: [PATCH] feat(web): wip query api for notifications

---
 web/components/Notifications/Item.vue    |  18 ++--
 web/components/Notifications/Sidebar.vue | 100 +++++++++--------------
 web/store/notifications.ts               |  14 ++--
 web/types/ui/notification.ts             |  11 +--
 4 files changed, 63 insertions(+), 80 deletions(-)

diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue
index 6f7a33a7f..f3b860f01 100644
--- a/web/components/Notifications/Item.vue
+++ b/web/components/Notifications/Item.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import {
   ArchiveBoxIcon,
-  TrashIcon,
-  EllipsisVerticalIcon,
   ShieldExclamationIcon,
   CheckBadgeIcon,
   ExclamationTriangleIcon,
@@ -14,18 +12,18 @@ import type { NotificationItemProps } from '~/types/ui/notification';
 const props = defineProps<NotificationItemProps>();
 
 const icon = computed<{ component: Component, color: string } | null>(() => {
-  switch (props.type) {
-    case 'success':
+  switch (props.importance) {
+    case 'INFO':
       return {
         component: CheckBadgeIcon,
         color: 'text-green-500',
       };
-    case 'warning':
+    case 'WARNING':
       return {
         component: ExclamationTriangleIcon,
         color: 'text-yellow-500',
       };
-    case 'alert':
+    case 'ALERT':
       return {
         component: ShieldExclamationIcon,
         color: 'text-red-500',
@@ -40,11 +38,11 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
     <header class="w-full flex flex-row items-start justify-between gap-2">
       <h3 class="text-16px font-semibold leading-2 flex flex-row items-start gap-2">
         <component :is="icon.component" v-if="icon" class="size-6 shrink-0" :class="icon.color" />
-        <span>{{ event }} • {{ subject }}</span>
+        <span>{{ title }} • {{ subject }}</span>
       </h3>
 
       <div class="shrink-0 flex flex-row items-center justify-end gap-2 mt-1">
-        <p class="text-12px opacity-75">{{ date }}</p>
+        <p class="text-12px opacity-75">{{ timestamp }}</p>
 
         <TooltipProvider>
           <Tooltip>
@@ -63,11 +61,11 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
     </header>
 
     <div class="w-full flex flex-row items-center justify-between gap-2 opacity-75 group-hover/item:opacity-100 group-focus/item:opacity-100">
-      <p>{{ message }}</p>
+      <p>{{ description }}</p>
       <ChevronRightIcon class="size-4" />
     </div>
 
-    <a :href="view" class="absolute z-10 inset-0">
+    <a :href="link" class="absolute z-10 inset-0">
       <span class="sr-only">Take me there</span>
     </a>
   </div>
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index b312261a3..b58177f72 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -3,7 +3,6 @@ import { BellIcon } from "@heroicons/vue/24/solid";
 import {
   Sheet,
   SheetContent,
-  // SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -11,66 +10,47 @@ import {
 } from "@/components/shadcn/sheet";
 
 import type { NotificationItemProps } from "~/types/ui/notification";
+import { useUnraidApiStore } from "~/store/unraidApi";
+import gql from "graphql-tag";
 
-const unreadNotifications: NotificationItemProps[] = [
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "1",
-    message: "A new user has registered on your platform.",
-    subject: "New User Registration",
-    type: "success",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "2",
-    message: "Drive 1 has been detected as pre-failure.",
-    subject: "Drive Pre-Failure Detected",
-    type: "alert",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "3",
-    message: "Your server will be undergoing maintenance at 12:00 AM.",
-    subject: "Server Maintenance",
-    type: "warning",
-    view: '#my-url',
-  },
-];
+const getNotifications = gql`
+    query Notifications($filter: NotificationFilter!) {
+      notifications {
+        list(filter: $filter) {
+          id
+          title
+          subject
+          description
+          importance
+          link
+          type
+          timestamp
+        }
+      }
+    }
+`;
 
-const archiveNotifications: NotificationItemProps[] = [
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "1",
-    message: "A new user has registered on your platform.",
-    subject: "Archived New User Registration",
-    type: "success",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "2",
-    message: "Drive 1 has been detected as pre-failure.",
-    subject: "Archived Drive Pre-Failure Detected",
-    type: "alert",
-    view: '#my-url',
-  },
-  {
-    date: '2024-09-30 15:30',
-    event: 'Test Event Type',
-    id: "3",
-    message: "Your server will be undergoing maintenance at 12:00 AM.",
-    subject: "Archived Server Maintenance",
-    type: "warning",
-    view: '#my-url',
-  },
-];
+const notifications = ref<NotificationItemProps[]>([]);
+
+const { unraidApiClient } = storeToRefs(useUnraidApiStore());
+
+watch(unraidApiClient, async(newVal) => {
+  if (newVal) {
+    const apiResponse = await newVal.query({
+      query: getNotifications,
+      variables: {
+        filter: {
+          offset: 0,
+          limit: 10,
+          type: 'UNREAD',
+        },
+      },
+    });
+    console.log('[blah blah]', apiResponse);
+
+    notifications.value = apiResponse.data.notifications.list;
+  }
+});
 
 const { teleportTarget, determineTeleportTarget } = useTeleport();
 </script>
@@ -99,7 +79,7 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
 
         <TabsContent value="unread" class="divide-y divide-gray-200">
           <NotificationsItem
-            v-for="notification in unreadNotifications"
+            v-for="notification in notifications"
             :key="notification.id"
             v-bind="notification"
           />
diff --git a/web/store/notifications.ts b/web/store/notifications.ts
index 2fbeda90b..0cceeecc0 100644
--- a/web/store/notifications.ts
+++ b/web/store/notifications.ts
@@ -1,24 +1,28 @@
 import { defineStore, createPinia, setActivePinia } from 'pinia';
-/**
- * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
- * @see https://github.com/vuejs/pinia/discussions/1085
- */
+import type { NotificationItemProps } from "~/types/ui/notification";
+
 setActivePinia(createPinia());
 
 export const useNotificationsStore = defineStore('notifications', () => {
-
+  const notifications = ref<NotificationItemProps[]>([]);
   const isOpen = ref<boolean>(false);
 
   const title = computed<string>(() => isOpen.value ? 'Notifications Are Open' : 'Notifications Are Closed');
 
   const toggle = () => isOpen.value = !isOpen.value;
 
+  const setNotifications = (newNotifications: NotificationItemProps[]) => {
+    notifications.value = newNotifications;
+  };
+
   return {
     // state
     isOpen,
     // getters
     title,
+    notifications,
     // actions
+    setNotifications,
     toggle,
   };
 });
diff --git a/web/types/ui/notification.ts b/web/types/ui/notification.ts
index 546193ed2..1f163a402 100644
--- a/web/types/ui/notification.ts
+++ b/web/types/ui/notification.ts
@@ -1,9 +1,10 @@
 export interface NotificationItemProps {
   id: string;
-  event: string;
-  date: string;
+  title: string;
   subject: string;
-  message: string;
+  description: string;
+  importance: string;
+  link: string;
   type: 'success' | 'warning' | 'alert';
-  view: string;
-}
\ No newline at end of file
+  timestamp: string;
+}