Bulk commit: November work

src/features/Auth/components/nav-user.tsx

@@ -3,6 +3,7 @@
 import { BadgeCheck, Bell, ChevronsUpDown, LogOut } from 'lucide-react'
 
 import { Link } from '@tanstack/react-router'
+import { useProfile } from '../queries'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import {
   DropdownMenu,
@@ -19,6 +20,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from '@/components/ui/sidebar'
+import { env } from '@/env'
 
 export function NavUser({
   user,
@@ -30,6 +32,11 @@ export function NavUser({
   }
 }) {
   const { isMobile } = useSidebar()
+  const { data } = useProfile()
+
+  if (!data) {
+    return <div>Loading...</div>
+  }
 
   return (
     <SidebarMenu>
@@ -41,12 +48,12 @@ export function NavUser({
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                <AvatarImage src={data.picture} alt={data.name} />
+                <AvatarFallback className="rounded-lg">KH</AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
+                <span className="truncate font-medium">{data.name}</span>
+                <span className="truncate text-xs">{data.Email}</span>
               </div>
               <ChevronsUpDown className="ml-auto size-4" />
             </SidebarMenuButton>
@@ -60,30 +67,26 @@ export function NavUser({
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarImage src={data.picture} alt={data.name} />
                   <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
+                  <span className="truncate font-medium">{data.name}</span>
+                  <span className="truncate text-xs">{data.Email}</span>
                 </div>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            {/* <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <Sparkles />
-                Upgrade to Pro
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator /> */}
             <DropdownMenuGroup>
-              <Link to="/about">
+              <a
+                href="https://keycloak.kocoder.xyz/realms/che/account"
+                target="_blank"
+              >
                 <DropdownMenuItem>
                   <BadgeCheck />
                   Account
                 </DropdownMenuItem>
-              </Link>
+              </a>
               {/* <DropdownMenuItem>
                 <CreditCard />
                 Billing
@@ -96,7 +99,7 @@ export function NavUser({
               </Link>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <a href="http://localhost:3000/api/logout">
+            <a href={`${env.VITE_BACKEND_URI}/api/auth/logout`}>
               <DropdownMenuItem>
                 <LogOut />
                 Log out

src/features/Auth/queries.ts

@@ -1,4 +1,6 @@
-import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { env } from '@/env'
 
 const sessionKeys = {
   all: ['sessions'] as const,
@@ -11,12 +13,23 @@ export type Session = {
   CreatedAt: Date
 }
 
+export type User = {
+  ID: number
+  CreatedAt: Date
+  UpdatedAt: Date
+  DeletedAt: Date | undefined
+  sub: string
+  Email: string
+  name: string
+  picture: string
+}
+
 export function useCurrentSession() {
   return useQuery<Session>({
     queryKey: sessionKeys.current(),
     queryFn: async () => {
       const data = await fetch(
-        'http://localhost:3000/api/auth/currentSession',
+        env.VITE_BACKEND_URI + '/api/auth/currentSession',
         {
           credentials: 'include',
         },
@@ -25,3 +38,22 @@ export function useCurrentSession() {
     },
   })
 }
+
+export function useProfile() {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+
+  return useQuery<User>({
+    queryKey: sessionKeys.current(),
+    queryFn: async () => {
+      const data = await fetch(env.VITE_BACKEND_URI + '/v1/users/current', {
+        credentials: 'include',
+      })
+      if (data.status == 401) {
+        queryClient.invalidateQueries()
+        navigate({ to: '/' })
+      }
+      return await data.json()
+    },
+  })
+}