Merge branch 'dev' into bulldozer/authentication

Signed-off-by: Jibola Paul <[email protected]>

next.config.mjs

@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "standalone",
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
-export default nextConfig;
+export default nextConfig;

src/app/dashboard/(admin)/_components/layout/navbar/index.tsx

@@ -1,14 +1,33 @@
+"use client";
+
 import { BellIcon, ChevronDown, HelpCircle, SearchIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import UserCard from "~/components/card/user-card";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
 import UnreadNotificationCard from "../../unread-notification-card/UnreadNotificationCard";
 
+interface User {
+  email: string;
+  image: string;
+  name: string;
+}
+
 const DashboardNavbar = () => {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.push("/login");
+    }
+  }, [status, router]);
+
   return (
     <nav
       className="fixed left-[50px] right-0 top-0 z-50 border-b-[0.5px] border-border md:left-[220px] lg:left-[252px]"
@@ -59,10 +78,9 @@ const DashboardNavbar = () => {
             />
           </div>
           <div className="hover:bg-black-1 flex w-full max-w-[64px] cursor-pointer items-center justify-between gap-2">
-            <Avatar data-testid="avatar" className="h-10 w-10">
-              <AvatarImage src="https://github.com/shadcn.png" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
+            {status === "authenticated" && (
+              <UserCard user={session?.user as User} />
+            )}
             <ChevronDown
               data-testid="chevronDown"
               className="2-5 h-5 text-neutral-dark-1"

src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx

@@ -7,12 +7,14 @@ import {
   Menu,
   SearchIcon,
 } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 import DashboardLogo from "~/app/dashboard/(admin)/_components/layout/logo";
 import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
-import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import UserCard from "~/components/card/user-card";
 import {
   Popover,
   PopoverContent,
@@ -42,9 +44,22 @@ const navlinks = [
   },
 ];
 
+interface User {
+  email: string;
+  image: string;
+  name: string;
+}
+
 const UserNavbar = () => {
   const pathname = usePathname();
   const currentPath = pathname?.split("/")[2];
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.push("/login");
+    }
+  }, [status, router]);
 
   return (
     <nav
@@ -113,10 +128,9 @@ const UserNavbar = () => {
             />
           </div>
           <div className="hover:bg-black-1 flex w-full max-w-[64px] cursor-pointer items-center justify-between gap-2">
-            <Avatar data-testid="avatar" className="h-10 w-10">
-              <AvatarImage src="https://github.com/shadcn.png" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
+            {status === "authenticated" && (
+              <UserCard user={session?.user as User} />
+            )}
             <ChevronDown
               data-testid="chevronDown"
               className="2-5 h-5 text-neutral-dark-1"

src/app/layout.tsx

@@ -7,6 +7,7 @@ import { SessionProvider } from "next-auth/react";
 
 import Providers from "~/components/providers";
 import { Toaster } from "~/components/ui/toaster";
+import AuthProvider from "~/contexts/authContext";
 
 const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
@@ -25,6 +26,7 @@ export default function RootLayout({
         <div className="mx-auto w-full">
           <Providers />
           <SessionProvider>{children}</SessionProvider>
+          <AuthProvider>{children}</AuthProvider>
           <Toaster />
         </div>
       </body>

src/components/card/user-card.tsx

@@ -1,10 +1,11 @@
 import { Avatar, AvatarImage } from "@radix-ui/react-avatar";
 import { AnimatePresence, motion } from "framer-motion";
+import { signOut } from "next-auth/react";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 
-import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
-import { Button } from "../ui/button";
+import CustomButton from "../common/common-button/common-button";
 
 const UserCard = ({ image }: { image: string | undefined }) => {
   const { updateUser } = useUser();
@@ -14,14 +15,22 @@ const UserCard = ({ image }: { image: string | undefined }) => {
     updateUser({ email: "", name: "" });
     setIsLogout(false);
   };
+interface User {
+  email: string;
+  image: string;
+  name: string;
+}
 
-  const handleEscapeClick = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      setIsLogout(false);
-    }
-  };
+const UserCard = ({ user }: { user: User }) => {
+  const [isLogout, setIsLogout] = useState(false);
 
   useEffect(() => {
+    const handleEscapeClick = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsLogout(false);
+      }
+    };
+
     document.addEventListener("keydown", handleEscapeClick);
     return () => {
       document.removeEventListener("keydown", handleEscapeClick);
@@ -42,13 +51,32 @@ const UserCard = ({ image }: { image: string | undefined }) => {
           <AvatarImage src={image} className="rounded-full" />
         </Avatar>
       </Button>
+      {user?.image ? (
+        <div
+          className="flex h-full w-full cursor-pointer items-center justify-center overflow-hidden rounded-full"
+          onClick={() => setIsLogout(!isLogout)}
+        >
+          <Image
+            src={user.image}
+            alt={`${user.name}'s profile image`}
+            width={64}
+            height={64}
+          />
+        </div>
+      ) : (
+        <CustomButton
+          variant="primary"
+          onClick={() => setIsLogout(!isLogout)}
+          className="flex h-full w-full items-center justify-center overflow-hidden rounded-full text-center text-xl capitalize"
+        >
+          {user?.email[0]}
+        </CustomButton>
+      )}
       <AnimatePresence>
         {isLogout && (
           <>
             <div
-              onClick={() => {
-                setIsLogout(false);
-              }}
+              onClick={() => setIsLogout(false)}
               className={cn(
                 "fixed left-0 top-0 z-[99] min-h-screen w-full overflow-hidden bg-neutral-700/0 transition-all duration-300 lg:hidden",
                 isLogout
@@ -63,15 +91,9 @@ const UserCard = ({ image }: { image: string | undefined }) => {
               transition={{ type: "spring", stiffness: 300, damping: 30 }}
               className="absolute -bottom-16 -right-2 z-[999] flex w-[150px] flex-col gap-y-2 rounded-xl bg-white p-2 shadow-lg"
             >
-              <Button
-                variant={"ghost"}
-                onClick={handleLogout}
-                className={cn(
-                  "w-full text-xl font-medium text-orange-500 sm:font-bold",
-                )}
-              >
+              <CustomButton variant="primary" onClick={() => signOut()}>
                 Logout
-              </Button>
+              </CustomButton>
             </motion.div>
           </>
         )}

src/components/layouts/navbar/index.tsx

@@ -6,16 +6,22 @@ import { useEffect, useState } from "react";
 
 import UserCard from "~/components/card/user-card";
 import Logo from "~/components/common/logo";
-import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { NAV_LINKS } from "./links";
 import MobileNav from "./mobile-navbar";
 
+interface User {
+  email: string;
+  image: string;
+  name: string;
+}
+
 const Navbar = () => {
   const [scrolling, setIsScrolling] = useState<boolean>(false);
 
   const { data: session } = useSession();
   const { user } = useUser();
+  const { data: session, status } = useSession();
 
   const handleScrollEvent = () => {
     if (window.scrollY > 1) {
@@ -39,7 +45,7 @@ const Navbar = () => {
         className={cn(
           `relative mx-auto flex w-full max-w-[1200px] items-center gap-x-4 transition-all duration-500 md:justify-between`,
           scrolling ? "py-2" : "py-4 md:py-9",
-          user.email && "justify-between",
+          status === "authenticated" && "justify-between md:justify-between",
         )}
       >
         <MobileNav />
@@ -63,6 +69,7 @@ const Navbar = () => {
             <UserCard image={session?.user?.image as string} />
           </div>
         ) : (
+        {status !== "authenticated" && (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link
               href="/login"
@@ -78,6 +85,9 @@ const Navbar = () => {
             </Link>
           </div>
         )}
+        {status === "authenticated" && (
+          <UserCard user={session?.user as User} />
+        )}
       </div>
     </nav>
   );

src/components/layouts/navbar/layout.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import AuthProvider from "~/contexts/authContext";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <AuthProvider>{children}</AuthProvider>;
+}