chore: display notifications

Author: VulpoTheDev

apps/web/src/app/context/AuthContext.tsx

@@ -5,12 +5,14 @@ import React, { createContext, useContext, useEffect, useState } from "react"
 import { fetcher } from "@/app/lib/fetcher"
 // Import the fetch helper
 import { BACKEND_URL } from "@/utils/constants"
+import { Notification } from "@/types/users"
 
 export type User = {
   id: string
   handle: string
   displayName: string
   bio: string
+  notifications: Notification[]
   avatarUrl: string
   bannerUrl: string
   dateRegistered: string
@@ -38,7 +40,7 @@ type AuthContextType = {
 const AuthContext = createContext<AuthContextType>({
   user: null,
   isLoading: true,
-  logout: () => {}
+  logout: () => null
 })
 
 export const useAuth = () => useContext(AuthContext)

apps/web/src/components/Notification.tsx

@@ -0,0 +1,52 @@
+import { USER_DEFAULT_AVATAR } from "@/utils/constants";
+import Image from "next/image";
+import { LuCheck } from "react-icons/lu";
+
+
+export default function Notification({ content, createdAt, read, senderAvatar, url, userAvatar }: {
+    content: string
+    read: boolean
+    userAvatar: string | null
+    senderAvatar: string | null
+    url: string | null
+    createdAt: Date
+}) {
+  const date = new Date(createdAt || "")
+  const now = new Date()
+  const diff = Math.floor(
+    (now.getTime() - date.getTime()) / 1000 / 60 / 60 / 24
+  )
+  const diffString =
+    diff > 0 ? `${diff} day${diff > 1 ? "s" : ""} ago` : "Earlier Today"
+
+  // TODO: Read implementation
+  
+
+  return (
+    <div className="flex flex-row justify-between items-center gap-x-5 w-full">
+      <div className="flex flex-row items-center gap-x-6 py-3">
+        <div className="relative w-[50px] h-[50px]">
+          <Image
+            src={userAvatar ?? USER_DEFAULT_AVATAR}
+            alt="User Profile"
+            width={60}
+            height={60}
+            className="absolute top-0 left-0 rounded-full"
+          />
+          <Image
+            src={senderAvatar ?? USER_DEFAULT_AVATAR}
+            alt="User Profile Overlay"
+            width={30}
+            height={30}
+            className="absolute -bottom-1 -right-2 rounded-full border-2 border-white shadow-md"
+          />
+        </div>
+        <div className="flex flex-col">
+          <span>{content}</span>
+          <span>{diffString}</span>
+        </div>
+      </div>
+      <LuCheck size={20} className="text-green-500" />
+    </div>
+  )
+}

apps/web/src/components/layouts/AppLayout/ActionsLoggedIn.tsx

@@ -7,8 +7,10 @@ import {
   generateSiteSettingItems
 } from "@/utils/generateItems"
 import { Button } from "@mav/ui/components/buttons"
-import { LuBell, LuChevronDown, LuPlus } from "react-icons/lu"
+import { LuBell, LuCheck, LuChevronDown, LuMinusCircle, LuPlus } from "react-icons/lu"
 import { Dropdown, DropdownItem } from "./Dropdown"
+import Image from "next/image"
+import Notification from "@/components/Notification"
 
 const ICON = (
   <>
@@ -59,12 +61,54 @@ export function ActionsLoggedIn({
           </>
         }
       />
+      <Dropdown
+        button={<Button
+          prefix={<div className="relative">
+            <LuBell size={22} />
+            {user.notifications.length > 0 && !user.notifications.some(n => n.read) && (
+              <span className="absolute -top-1 -right-1 inline-block w-2 h-2 bg-500 rounded-full animate-pulse" />
+            )}
+          </div>}
+          variant="tritery"
+        />}
+        items={
+          <div className="flex flex-col items-center px-4 w-80">
+            <div className="flex flex-row items-center justify-between w-full">
+              <span className="text-xl">Notifications</span>
+              <div className="flex flex-row">
+                <Button variant="tritery" size={"big"} icon={<LuMinusCircle />} />
+                <Button variant="tritery" size={"big"} icon={<LuCheck />} />
+              </div>
+            </div>
+            {user.notifications.length === 0 ? (
+              <span className="text-gray-500 text-sm">No new notifications</span>
+            ) : (
+              user.notifications.slice(0, 5).map((notification) => (
+                <Notification
+                  key={notification.id}
+                  content={notification.content}
+                  createdAt={notification.createdAt}
+                  read={notification.read}
+                  userAvatar={user.avatarUrl || "/UserProfile.png"}
+                  senderAvatar={
+                    notification.sender ? notification.sender.avatarUrl : null
+                  }
+                  url={
+                    notification.artwork
+                      ? `/artworks/${notification.artwork.id}`
+                      : notification.character
+                        ? `/characters/${notification.character.id}`
+                        : null
+                  }
+                />
+              ))
+            )}
+
+          </div>
+        }
 
-      <Button
-        prefix={<LuBell size={22} />}
-        className="hover:!bg-100"
-        variant="tritery"
       />
+
       <Dropdown
         button={
           <Link href={`/@${user.handle}`}>

apps/web/src/components/layouts/AppLayout/Dropdown/Dropdown.tsx

@@ -22,7 +22,7 @@ export default function Dropdown({
         // @ts-expect-error
         className="translate-x-0"
       >
-        <MenuItems className="bg-context-menu border-300 absolute right-0 top-2.5 z-[9] grid rounded-md border p-2 shadow-md">
+        <MenuItems className="bg-context-menu border-300 absolute right-0 top-7 z-[9] grid rounded-md border p-2 shadow-md">
           {items}
         </MenuItems>
       </Transition>

apps/web/src/types/users.ts

@@ -16,6 +16,7 @@ type Badge = {
   rewardDate: Date
 }
 
+
 export interface UserType {
   id: string
   handle: string
@@ -63,6 +64,7 @@ export interface Notification {
   user: UserType
   sender: UserType | null
   artwork: Artwork | null
+  character: Character | null
   comment: Comments | null
   createdAt: Date
 }

apps/web/src/utils/api.ts

@@ -138,6 +138,11 @@ export const fetchUser = async (handle: string) => {
   return data
 }
 
+export const getNotifications = async () => {
+  const data = await apiWithAuth<Notification[]>("GET", `/v1/profile/notifications`)
+  return data
+}
+
 export const fetchUserCharacters = async (handle: string) => {
   const data = await apiWithoutAuth<CharacterResponse>(
     "GET",