bugfixing notification

src/lib/components/NotificationBell.svelte

@@ -1,36 +1,36 @@
-
+<script lang="ts">
-<script lang='ts'>
+  import { numberOfUnreadNotification } from "$lib/store";
-
-  import { goto } from '$app/navigation';
-  import { numberOfUnreadNotification } from '$lib/store';
   import Bell from "lucide-svelte/icons/bell";
 
   export let data;
   export let hasUnreadElement;
 
-
+  async function toggle() {
-async function toggle() {
+    hasUnreadElement = false;
-  hasUnreadElement = false;
+  }
-}
 </script>
 
-  <!--Start Notification Bell-->
+<!--Start Notification Bell-->
-  {#if data?.user}
+{#if data?.user}
-  
+  <a
-  <a href="/notifications" on:click={toggle} class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1">
+    href="/notifications"
-      <Bell class="h-[20px] w-[20px]" />  
+    on:click={toggle}
+    class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1"
+  >
+    <Bell class="h-[20px] w-[20px]" />
 
     {#if hasUnreadElement}
-    <div class="absolute top-2 -right-2 flex">
+      <div class="absolute top-2 -right-2 flex">
-      <div class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2">
+        <div
-        <span class="m-auto">{$numberOfUnreadNotification <= 9 ? $numberOfUnreadNotification : '9+' }</span>
+          class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2"
+        >
+          <span class="m-auto"
+            >{$numberOfUnreadNotification <= 9
+              ? $numberOfUnreadNotification
+              : "9+"}</span
+          >
+        </div>
       </div>
-    </div>
-    
     {/if}
-
   </a>
-  
 {/if}
-
-  

src/lib/workers/notificationWorker.ts

@@ -1,28 +1,27 @@
 // lib/workers/test.ts
 
-async function loadNotifications(userId: string) {
+async function loadNotifications() {
-  const postData = { userId: userId };
-
   const response = await fetch("/api/get-notifications", {
-    method: "POST",
+    method: "GET",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(postData),
   });
 
-  const output = (await response.json())?.items;
+  const output = await response.json();
+
   return output;
 }
 
 onmessage = async (event: MessageEvent) => {
   const data = event.data?.message;
-  const userId = data?.userId;
   try {
-    const [notificationList] = await Promise.all([loadNotifications(userId)]);
+    const [notificationList] = await Promise.all([loadNotifications()]);
-
+    const numberOfUnreadNotification = notificationList.filter(
-    const numberOfUnreadNotification = notificationList?.length;
+      (item?) => !item?.readed,
-    const hasUnreadElement = notificationList?.length !== 0 ? true : false;
+    );
+    const hasUnreadElement =
+      numberOfUnreadNotification?.length !== 0 ? true : false;
     const output = {
       notificationList,
       hasUnreadElement,

src/routes/+layout.svelte

@@ -136,7 +136,7 @@
     notificationList = output?.notificationList;
     hasUnreadElement = output?.hasUnreadElement;
     //const unreadNotificationList = output?.unreadNotificationList;
-    $numberOfUnreadNotification = output?.numberOfUnreadNotification;
+    $numberOfUnreadNotification = output?.numberOfUnreadNotification?.length;
     //pushNotification()
   };
 
@@ -163,18 +163,19 @@ const handleTwitchMessage = (event) => {
     // Implement fallback logic here, e.g., using timers or other techniques
     console.log("Fallback worker activated");
 
-    const postData = { userId: data?.user?.id };
     const response = await fetch("/api/get-notifications", {
-      method: "POST",
+      method: "GET",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(postData),
     });
 
-    notificationList = (await response.json())?.items;
+    notificationList = await response.json();
-    hasUnreadElement = notificationList?.length !== 0 ? true : false;
+    const numberOfUnreadNotification = notificationList.filter(
-    $numberOfUnreadNotification = notificationList?.length;
+      (item?) => !item?.readed,
+    );
+    hasUnreadElement = numberOfUnreadNotification?.length !== 0 ? true : false;
+    $numberOfUnreadNotification = numberOfUnreadNotification?.length;
   }
 
   let Cookie;

src/routes/api/get-notifications/+server.ts

@@ -1,18 +1,20 @@
 import type { RequestHandler } from "./$types";
 
-export const POST: RequestHandler = async ({ request, locals }) => {
+export const GET: RequestHandler = async ({ locals }) => {
-  const data = await request.json();
+  const { pb, user } = locals;
-  const { fastifyURL } = locals;
 
-  const response = await fetch(fastifyURL + "/get-notifications", {
+  let output;
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(data),
-  });
 
-  const output = await response.json();
+  try {
+    output = await pb.collection("notifications")?.getFullList({
+      filter: `opUser="${user?.id}" `,
+      expand: "user,post,comment",
+      sort: "-created",
+    });
+  } catch (e) {
+    console.log(e);
+    output = [];
+  }
 
   return new Response(JSON.stringify(output));
 };

src/routes/notifications/+page.server.ts

@@ -1,25 +1,21 @@
 import { redirect, error } from "@sveltejs/kit";
 
-export const load = async ({ locals }) => {
+export const load = async ({ locals, fetch }) => {
-  const { pb, user } = locals;
+  const { pb } = locals;
 
   if (!pb.authStore.isValid) {
     redirect(303, "/login");
   }
 
   async function getNotifications() {
-    let output;
+    const response = await fetch("/api/get-notifications", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
 
-    try {
+    const output = await response.json();
-      output = await pb.collection("notifications")?.getFullList({
-        filter: `opUser="${user?.id}" `,
-        expand: "user,post,comment",
-        sort: "-created",
-      });
-    } catch (e) {
-      console.log(e);
-      output = [];
-    }
 
     return output;
   }