feat: add notification alert on nav + change file name

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";

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) => {
+export const AuthenticatedComponents = ({ uid, avatarUrl, notificationCount }: AuthenticatedComponentsProps) => {
-  const notifications = 100;
-  const displayValue = notifications >= 100 ? "..." : notifications;
   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">
+          {notificationCount >= 1 && (
-            {displayValue}
+            <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">
-          </span>
+              {notificationCount}
+            </span>
+          )}
         </div>
       </Link>
       <Link href="/follow">

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 />
               )}

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);
-
+  return { count, error };
-  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 };
-  }
 }
 
 export function getNotificationByUserId(client: SupabaseClient, userId: string | undefined) {