Merge remote-tracking branch 'upstream/clean' into feat/HNG-20-admin-…

…charts-component

src/app/(auth-routes)/login/page.tsx

@@ -23,6 +23,7 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
+import { useUser } from "~/hooks/user/use-user";
 import { simulateDelay } from "~/lib/utils";
 
 const loginSchema = z.object({
@@ -53,6 +54,7 @@ const LoginPage = () => {
   const searchP = useSearchParams();
   const callback_url = searchP.get("callbackUrl");
   const [isLoading, startTransition] = useTransition();
+  const { updateUser } = useUser();
 
   const form = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
@@ -68,7 +70,7 @@ const LoginPage = () => {
     startTransition(async () => {
       await simulateDelay(3);
       await loginUser(values);
-
+      updateUser({ email: values.email, name: values.email.split("@")[0] });
       if (callback_url) {
         router.push(callback_url);
       } else {

src/app/(auth-routes)/register/page.tsx

@@ -23,6 +23,8 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "~/components/ui/input-otp";
+import Google from "../../../../public/images/google.svg";
+import Facebook from "../../../../public/images/facebook.svg";
 
 const formSchema = z.object({
   fullname: z.string().min(2, {
@@ -53,14 +55,8 @@ const SignUp = () => {
         </p>
       </div>
       <div className="flex justify-center gap-4 p-4">
-        <AuthProvider
-          title="Sign in with Google"
-          icon="/public/images/google.png"
-        />
-        <AuthProvider
-          title="Sign in with Google"
-          icon="/public/images/google.png"
-        />
+        <AuthProvider title="Sign in with Google" icon={Google} />
+        <AuthProvider title="Sign in with Facebook" icon={Facebook} />
       </div>
       <div className="mx-auto w-2/4">
         <Form {...form}>

src/components/card/user-card.tsx

@@ -0,0 +1,92 @@
+import { TooltipArrow, TooltipPortal } from "@radix-ui/react-tooltip";
+import { motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { useMemo, useState } from "react";
+
+import { deleteUserCookie } from "~/actions/login";
+import { useUser } from "~/hooks/user/use-user";
+import { cn } from "~/lib/utils";
+import { Button } from "../ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+const generateTailwindBGs = () => {
+  const colors = [
+    "bg-red-500",
+    "bg-orange-500",
+    "bg-yellow-500",
+    "bg-green-500",
+    "bg-teal-500",
+    "bg-blue-500",
+    "bg-indigo-500",
+    "bg-purple-500",
+    "bg-pink-500",
+  ];
+  const randomColor = colors[Math.floor(Math.random() * colors.length)];
+  return randomColor;
+};
+
+const UserCard = ({ email }: { email: string }) => {
+  const { updateUser } = useUser();
+  const [bgColor, setBgColor] = useState("bg-red-500");
+  const pathname = usePathname();
+
+  useMemo(() => {
+    if (pathname === "/") {
+      setBgColor(generateTailwindBGs());
+    }
+  }, [pathname]);
+
+  return (
+    <div className="relative flex w-fit">
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant={"ghost"}
+              size={"icon"}
+              className={cn(
+                "grid size-9 place-items-center rounded-full text-white sm:text-2xl sm:font-bold",
+                bgColor,
+              )}
+            >
+              {email[0]}
+            </Button>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent
+              side="top"
+              sideOffset={5}
+              className="p-2 text-sm font-medium"
+            >
+              <TooltipArrow className="fill-white" />
+              <motion.div
+                initial={{ opacity: 0, translateY: 5 }}
+                animate={{ opacity: 1, translateY: 0 }}
+                exit={{ opacity: 0, translateY: 5 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Button
+                  variant="destructive"
+                  className="w-full"
+                  onClick={() => {
+                    updateUser({ email: "", name: "" });
+                    deleteUserCookie();
+                  }}
+                >
+                  Logout
+                </Button>
+              </motion.div>
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+};
+
+export default UserCard;

src/components/layouts/navbar/index.tsx

@@ -4,7 +4,9 @@ import { BellIcon, Menu, User } from "lucide-react";
 import Link from "next/link";
 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";
 
 const navlinks = [
   { route: "Home", link: "/" },
@@ -14,8 +16,7 @@ const navlinks = [
 
 const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
   const [scrolling, setIsScrolling] = useState<boolean>(false);
-
-  //
+  const { user } = useUser();
 
   const handleScrollEvent = () => {
     if (window.scrollY > 1) {
@@ -55,7 +56,7 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
             );
           })}
         </div>
-        {!is_auth_path && (
+        {!is_auth_path && !user.email && (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link
               href="/login"
@@ -71,6 +72,7 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
             </Link>
           </div>
         )}
+        {user.email && <UserCard email={user.email} />}
         <div className="flex w-full max-w-[80px] items-center justify-between gap-2 md:hidden">
           <BellIcon className="text-nuetral-black-1 h-5 w-5 cursor-pointer transition-colors duration-300 hover:text-neutral-dark-1/50" />
           <User className="text-nuetral-black-1 h-5 w-5 cursor-pointer transition-colors duration-300 hover:text-neutral-dark-1/50" />

src/hooks/user/use-user.ts

@@ -4,7 +4,6 @@ import { persist, PersistStorage } from "zustand/middleware";
 type UserProperties = {
   name: string | undefined;
   email: string | undefined;
-  id: string | undefined;
 };
 
 type ProductsStateProperties = {
@@ -25,13 +24,12 @@ const storage: PersistStorage<ProductsStateProperties> = {
   removeItem: (name) => localStorage.removeItem(name),
 };
 
-export const useProductsFilters = create<ProductsStateProperties>()(
+export const useUser = create<ProductsStateProperties>()(
   persist(
     (set) => ({
       user: {
         name: undefined,
         email: undefined,
-        id: undefined,
       },
       updateUser: (user) => set({ user }),
     }),

src/lib/services/session.ts

@@ -78,5 +78,6 @@ export async function updateSession() {
 }
 
 export async function deleteSession() {
+  deleteCookie("session");
   deleteCookie("session", { cookies });
 }