"use client"; import Image from 'next/image'; import { Home, InfoIcon, MessageCircle, Search, FileQuestion, Menu, X, User2, LogOut, LogIn, SlidersHorizontal } from 'lucide-react'; import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; import { useMedia } from 'react-use'; import useSWR from 'swr'; import logo from '@/public/smart-retrieval-logo.webp'; import { HeaderNavLink } from '@/app/components/ui/navlink'; import { MobileMenu } from '@/app/components/ui/mobilemenu'; import { IconSpinner } from '@/app/components/ui/icons'; import { useSession, signOut } from 'next-auth/react'; import { usePathname } from 'next/navigation'; import { Skeleton } from "@nextui-org/react"; const MobileMenuItems = [ { href: '/', icon: , label: 'Home', }, { href: '/about', icon: , label: 'About', }, { href: '/chat', icon: , label: 'Chat', }, { href: '/query', icon: , label: 'Q&A', }, { href: '/search', icon: , label: 'Search', }, ]; const AdminMenuItems = [ { href: '/admin', icon: , label: 'Admin', }, ]; export default function Header() { const isLargeScreen = useMedia('(min-width: 1024px)', false); const [mounted, setMounted] = useState(false); const { theme, setTheme } = useTheme(); // Get the current path const currentPath = usePathname(); // Ensure the currentPath is encoded const encodedPath = encodeURIComponent(currentPath); // Add callbackUrl params to the signinPage URL const signinPage = "/sign-in?callbackUrl=" + encodedPath; // Check if the user is an admin const [isAdmin, setIsAdmin] = useState(false); // Get user session for conditional rendering of user profile and logout buttons and for fetching the API status const { data: session, status } = useSession() // console.log('session:', session, 'status:', status); const supabaseAccessToken = session?.supabaseAccessToken; // Use SWR for API status fetching const healthcheck_api = "/api/status"; const { data, error: apiError, isLoading } = useSWR(healthcheck_api, async (url) => { try { // Fetch the data const response = await fetch(url, { signal: AbortSignal.timeout(5000), // Abort the request if it takes longer than 5 seconds // Add the access token to the request headers headers: { 'Authorization': `Bearer ${supabaseAccessToken}`, } }); if (!response.ok) { throw new Error(response.statusText || 'Unknown Error'); } const data = await response.json(); return data; } catch (error: any) { console.error('Error fetching Backend API Status'); throw error; } }, { revalidateOnFocus: true, // Revalidate when the window gains focus revalidateIfStale: true, // Revalidate if the data is stale refreshInterval: 60000, // Revalidate every 60 seconds }); if (apiError) { if (apiError.name === 'AbortError') { console.error('[Header] Error fetching Backend API Status: Request timed out'); } else { console.error('[Header] Error fetching Backend API Status:', apiError.message); } } const checkAdminRole = async () => { const response = await fetch('/api/admin/is-admin'); if (!response.ok) { console.error('Failed to fetch admin data'); return; } const data = await response.json(); setIsAdmin(data.isAdmin); console.log('Admin role fetched successfully! Data:', data); }; const newMobileMenuItems = isAdmin ? [...MobileMenuItems, ...AdminMenuItems] : MobileMenuItems; useEffect(() => { setMounted(true); checkAdminRole(); }, [session]); const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); const toggleMobileMenu = () => { // Handle the toggle click here if (isMobileMenuOpen) { // If the menu is open, close it setMobileMenuOpen(false); } else { // If the menu is closed, open it setMobileMenuOpen(true); } }; if (!mounted) return null; return (
{/* Navigation Bar */}
); }