From 121c6090779d6792954c08d8a45edcc8024a87c0 Mon Sep 17 00:00:00 2001
From: Sosokker <sirinza29@gmail.com>
Date: Sun, 10 Nov 2024 21:28:03 +0700
Subject: [PATCH] feat: add notification alert on nav + change file name

---
 src/app/(user)/notification/page.tsx          |  2 +-
 .../navigationBar/AuthenticatedComponents.tsx | 13 ++++++-----
 src/components/navigationBar/nav.tsx          | 15 ++++++++++++-
 ...ificationQuery.ts => notificationQuery.ts} | 22 +++----------------
 4 files changed, 25 insertions(+), 27 deletions(-)
 rename src/lib/data/{norificationQuery.ts => notificationQuery.ts} (56%)

diff --git a/src/app/(user)/notification/page.tsx b/src/app/(user)/notification/page.tsx
index fb74212..2d67079 100644
--- a/src/app/(user)/notification/page.tsx
+++ b/src/app/(user)/notification/page.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { Card, CardContent } from "@/components/ui/card";
 import { BellIcon } from "lucide-react";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
-import { getNotificationByUserId } from "@/lib/data/norificationQuery";
+import { getNotificationByUserId } from "@/lib/data/notificationQuery";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import useSession from "@/lib/supabase/useSession";
diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 3012454..fbdb89f 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -17,11 +17,10 @@ import { useUserRole } from "@/hooks/useUserRole";
 interface AuthenticatedComponentsProps {
   uid: string;
   avatarUrl?: string | null;
+  notificationCount: number;
 }
 
-export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedComponentsProps) => {
-  const notifications = 100;
-  const displayValue = notifications >= 100 ? "..." : notifications;
+export const AuthenticatedComponents = ({ uid, avatarUrl, notificationCount }: AuthenticatedComponentsProps) => {
   const { data } = useUserRole();
 
   const businessClass =
@@ -32,9 +31,11 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
       <Link href={"/notification"}>
         <div className="relative inline-block">
           <Bell className="h-6 w-6 " />
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
-            {displayValue}
-          </span>
+          {notificationCount >= 1 && (
+            <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
+              {notificationCount}
+            </span>
+          )}
         </div>
       </Link>
       <Link href="/follow">
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index 2c11a00..5d27fa3 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -19,6 +19,7 @@ import { UnAuthenticatedComponents } from "./UnAuthenticatedComponents";
 
 import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import { getUserId } from "@/lib/supabase/actions/getUserId";
+import { getUnreadNotificationCountByUserId } from "@/lib/data/notificationQuery";
 
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
   ({ className, title, children, ...props }, ref) => {
@@ -48,6 +49,14 @@ export async function NavigationBar() {
   const client = createSupabaseClient();
   const userId = await getUserId();
   const { data: avatarUrl } = await client.from("profiles").select("avatar_url").eq("id", userId).single();
+  let notification_count = 0;
+  if (userId != null) {
+    const { count: notiCount, error: notiError } = (await getUnreadNotificationCountByUserId(client, userId)) ?? {};
+    notification_count = notiError ? 0 : (notiCount ?? 0);
+  } else {
+    notification_count = 0;
+  }
+
   const businessComponents = [
     {
       title: "Business",
@@ -143,7 +152,11 @@ export async function NavigationBar() {
               </div>
               <Separator orientation="vertical" className="mx-3" />
               {userId ? (
-                <AuthenticatedComponents uid={userId} avatarUrl={avatarUrl?.avatar_url} />
+                <AuthenticatedComponents
+                  uid={userId}
+                  avatarUrl={avatarUrl?.avatar_url}
+                  notificationCount={notification_count}
+                />
               ) : (
                 <UnAuthenticatedComponents />
               )}
diff --git a/src/lib/data/norificationQuery.ts b/src/lib/data/notificationQuery.ts
similarity index 56%
rename from src/lib/data/norificationQuery.ts
rename to src/lib/data/notificationQuery.ts
index a457107..62b83f1 100644
--- a/src/lib/data/norificationQuery.ts
+++ b/src/lib/data/notificationQuery.ts
@@ -1,28 +1,12 @@
 import { SupabaseClient } from "@supabase/supabase-js";
 
-interface NotificationData {
-  count: number;
-  status: number;
-  statusText: string;
-}
-
 export async function getUnreadNotificationCountByUserId(client: SupabaseClient, userId: string) {
-  const { data, error } = await client
+  const { count, error } = await client
     .from("notification")
-    .select("*", { count: "exact", head: true })
+    .select("*", { count: "exact" })
     .eq("receiver_id", userId)
     .eq("is_read", false);
-
-  if (error) {
-    return { data: null, error: error };
-  }
-
-  if (data === null) {
-    return { data: null, error: error };
-  } else {
-    const notiData = data as unknown as NotificationData;
-    return { data: notiData, error: error };
-  }
+  return { count, error };
 }
 
 export function getNotificationByUserId(client: SupabaseClient, userId: string | undefined) {