diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx index b11b76ccc2..4e3eece8bf 100644 --- a/src/frontend/src/components/nav/Header.tsx +++ b/src/frontend/src/components/nav/Header.tsx @@ -47,6 +47,10 @@ export function Header() { queryKey: ['notification-count'], enabled: isLoggedIn(), queryFn: async () => { + if (!isLoggedIn()) { + return null; + } + try { const params = { params: { @@ -62,7 +66,7 @@ export function Header() { setNotificationCount(response?.data?.count ?? 0); return response?.data ?? null; } catch (error) { - return error; + return null; } }, refetchInterval: 30000, diff --git a/src/frontend/src/components/nav/InstanceDetail.tsx b/src/frontend/src/components/nav/InstanceDetail.tsx index 3ee9a1cf51..1baeb669a5 100644 --- a/src/frontend/src/components/nav/InstanceDetail.tsx +++ b/src/frontend/src/components/nav/InstanceDetail.tsx @@ -1,5 +1,6 @@ import { LoadingOverlay } from '@mantine/core'; +import { useUserState } from '../../states/UserState'; import ClientError from '../errors/ClientError'; import ServerError from '../errors/ServerError'; @@ -12,7 +13,9 @@ export default function InstanceDetail({ loading: boolean; children: React.ReactNode; }) { - if (loading) { + const user = useUserState(); + + if (loading || !user.isLoggedIn()) { return ; } diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx index db032db503..fc0ad6ad7b 100644 --- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx +++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx @@ -1,5 +1,13 @@ import { Trans, t } from '@lingui/macro'; -import { Divider, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core'; +import { + Divider, + Paper, + SimpleGrid, + Skeleton, + Stack, + Text, + Title +} from '@mantine/core'; import { IconCoins, IconCpu, @@ -201,6 +209,10 @@ export default function AdminCenter() { ); + if (!user.isLoggedIn()) { + return ; + } + return ( <> {user.isStaff() ? ( diff --git a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx index 14f96f2495..a9efa01aad 100644 --- a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx +++ b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx @@ -1,5 +1,5 @@ import { Trans, t } from '@lingui/macro'; -import { Stack } from '@mantine/core'; +import { Skeleton, Stack } from '@mantine/core'; import { IconBellCog, IconCategory, @@ -306,6 +306,10 @@ export default function SystemSettings() { const [server] = useServerApiState((state) => [state.server]); + if (!user.isLoggedIn()) { + return ; + } + return ( <> {user.isStaff() ? ( diff --git a/src/frontend/src/pages/Index/Settings/UserSettings.tsx b/src/frontend/src/pages/Index/Settings/UserSettings.tsx index f585000d5d..03c6b66e9f 100644 --- a/src/frontend/src/pages/Index/Settings/UserSettings.tsx +++ b/src/frontend/src/pages/Index/Settings/UserSettings.tsx @@ -1,5 +1,5 @@ import { Trans, t } from '@lingui/macro'; -import { Stack } from '@mantine/core'; +import { Skeleton, Stack } from '@mantine/core'; import { IconBellCog, IconDeviceDesktop, @@ -23,6 +23,11 @@ import { AccountContent } from './AccountSettings/UserPanel'; * User settings page */ export default function UserSettings() { + const [user, isLoggedIn] = useUserState((state) => [ + state.user, + state.isLoggedIn + ]); + const userSettingsPanels: PanelType[] = useMemo(() => { return [ { @@ -109,7 +114,10 @@ export default function UserSettings() { } ]; }, []); - const [user] = useUserState((state) => [state.user]); + + if (!isLoggedIn()) { + return ; + } return ( <> diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx index c569cd414d..41a51ef9e5 100644 --- a/src/frontend/src/pages/part/PartDetail.tsx +++ b/src/frontend/src/pages/part/PartDetail.tsx @@ -23,7 +23,7 @@ import { IconVersions } from '@tabler/icons-react'; import { useSuspenseQuery } from '@tanstack/react-query'; -import { ReactNode, useEffect, useMemo, useState } from 'react'; +import { ReactNode, useMemo, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { api } from '../../App';