refactor(login): removed all the data from teh login dropdown as it could cause issues

This commit is contained in:
2025-03-23 10:05:27 -05:00
parent 97eb73c6d1
commit 5dfece09b7

View File

@@ -1,91 +1,94 @@
import {createRootRoute, Link, Outlet} from "@tanstack/react-router"; import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
//import {TanStackRouterDevtools} from "@tanstack/router-devtools"; //import {TanStackRouterDevtools} from "@tanstack/router-devtools";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import {SidebarProvider} from "../components/ui/sidebar"; import { SidebarProvider } from "../components/ui/sidebar";
import {ThemeProvider} from "../components/layout/theme-provider"; import { ThemeProvider } from "../components/layout/theme-provider";
import {ModeToggle} from "../components/layout/mode-toggle"; import { ModeToggle } from "../components/layout/mode-toggle";
import {AppSidebar} from "../components/layout/lst-sidebar"; import { AppSidebar } from "../components/layout/lst-sidebar";
import {Avatar, AvatarFallback, AvatarImage} from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "../components/ui/dropdown-menu"; } from "../components/ui/dropdown-menu";
import {SessionProvider} from "../components/providers/Providers"; import { SessionProvider } from "../components/providers/Providers";
import {Toaster} from "sonner"; import { Toaster } from "sonner";
import {Button} from "../components/ui/button"; //import { Button } from "../components/ui/button";
import {useSessionStore} from "../lib/store/sessionStore"; import { useSessionStore } from "../lib/store/sessionStore";
import {useSession} from "@/hooks/useSession"; import { useSession } from "@/hooks/useSession";
import {useLogout} from "@/hooks/useLogout"; import { useLogout } from "@/hooks/useLogout";
// same as the layout // same as the layout
export const Route = createRootRoute({ export const Route = createRootRoute({
component: () => { component: () => {
const sidebarState = Cookies.get("sidebar_state") === "true"; const sidebarState = Cookies.get("sidebar_state") === "true";
const {session} = useSession(); const { session } = useSession();
const {user} = useSessionStore(); const { user } = useSessionStore();
const logout = useLogout(); const logout = useLogout();
return ( return (
<> <>
<SessionProvider> <SessionProvider>
<ThemeProvider> <ThemeProvider>
<nav className="flex justify-end"> <nav className="flex justify-end">
<div className="m-2 flex flex-row"> <div className="m-2 flex flex-row">
<div className="m-auto pr-2"> <div className="m-auto pr-2">
<p>Add Card</p> <p>Add Card</p>
</div> </div>
<div className="m-1"> <div className="m-1">
<ModeToggle /> <ModeToggle />
</div> </div>
{session ? ( {session ? (
<div className="m-1"> <div className="m-1">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<Avatar> <Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> <AvatarImage
<AvatarFallback>CN</AvatarFallback> src="https://github.com/shadcn.png"
</Avatar> alt="@shadcn"
</DropdownMenuTrigger> />
<DropdownMenuContent> <AvatarFallback>CN</AvatarFallback>
<DropdownMenuLabel>Hello {user?.username}</DropdownMenuLabel> </Avatar>
<DropdownMenuSeparator /> </DropdownMenuTrigger>
<DropdownMenuItem>Profile</DropdownMenuItem> <DropdownMenuContent>
<DropdownMenuLabel>
Hello {user?.username}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{/* <DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem> <DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem> <DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem> <DropdownMenuItem>Subscription</DropdownMenuItem> */}
<hr className="solid"></hr> <hr className="solid"></hr>
<DropdownMenuItem> <DropdownMenuItem>
<div className="m-auto mt-3"> <div className="m-auto">
<Button onClick={() => logout()} variant="ghost"> <button onClick={() => logout()}>Logout</button>
Logout </div>
</Button> </DropdownMenuItem>
</div> </DropdownMenuContent>
</DropdownMenuItem> </DropdownMenu>
</DropdownMenuContent> </div>
</DropdownMenu> ) : (
</div> <div>
) : ( <Link to="/login">Login</Link>
<> </div>
<Link to="/login">Login</Link> )}
</> </div>
)} </nav>
</div> <SidebarProvider defaultOpen={sidebarState}>
</nav> <AppSidebar />
<SidebarProvider defaultOpen={sidebarState}> <Toaster expand={true} richColors closeButton />
<AppSidebar /> <Outlet />
<Toaster expand={true} richColors closeButton /> </SidebarProvider>
<Outlet /> </ThemeProvider>
</SidebarProvider> </SessionProvider>
</ThemeProvider>
</SessionProvider>
{/* <TanStackRouterDevtools position="bottom-right" /> */} {/* <TanStackRouterDevtools position="bottom-right" /> */}
</> </>
); );
}, },
}); });