From a8a525531e1346f4bc58bb1d1d76e57ba855b6f1 Mon Sep 17 00:00:00 2001 From: LordMathis Date: Sun, 18 May 2025 12:33:42 +0200 Subject: [PATCH] Migrate navigation to ts --- .../navigation/{UserMenu.jsx => UserMenu.tsx} | 22 +++++++------ ...paceSwitcher.jsx => WorkspaceSwitcher.tsx} | 31 +++++++++++-------- app/src/types/workspace.ts | 2 ++ 3 files changed, 32 insertions(+), 23 deletions(-) rename app/src/components/navigation/{UserMenu.jsx => UserMenu.tsx} (87%) rename app/src/components/navigation/{WorkspaceSwitcher.jsx => WorkspaceSwitcher.tsx} (86%) diff --git a/app/src/components/navigation/UserMenu.jsx b/app/src/components/navigation/UserMenu.tsx similarity index 87% rename from app/src/components/navigation/UserMenu.jsx rename to app/src/components/navigation/UserMenu.tsx index 0002eb0..1376792 100644 --- a/app/src/components/navigation/UserMenu.jsx +++ b/app/src/components/navigation/UserMenu.tsx @@ -18,13 +18,15 @@ import { useAuth } from '../../contexts/AuthContext'; import AccountSettings from '../settings/account/AccountSettings'; import AdminDashboard from '../settings/admin/AdminDashboard'; -const UserMenu = () => { - const [accountSettingsOpened, setAccountSettingsOpened] = useState(false); - const [adminDashboardOpened, setAdminDashboardOpened] = useState(false); - const [opened, setOpened] = useState(false); +const UserMenu: React.FC = () => { + const [accountSettingsOpened, setAccountSettingsOpened] = + useState(false); + const [adminDashboardOpened, setAdminDashboardOpened] = + useState(false); + const [opened, setOpened] = useState(false); const { user, logout } = useAuth(); - const handleLogout = () => { + const handleLogout = (): void => { logout(); }; @@ -57,7 +59,7 @@ const UserMenu = () => {
- {user.displayName || user.email} + {user?.displayName || user?.email}
@@ -72,7 +74,7 @@ const UserMenu = () => { }} px="sm" py="xs" - style={(theme) => ({ + style={(theme: any) => ({ borderRadius: theme.radius.sm, '&:hover': { backgroundColor: @@ -88,7 +90,7 @@ const UserMenu = () => { - {user.role === 'admin' && ( + {user?.role === 'admin' && ( { setAdminDashboardOpened(true); @@ -96,7 +98,7 @@ const UserMenu = () => { }} px="sm" py="xs" - style={(theme) => ({ + style={(theme: any) => ({ borderRadius: theme.radius.sm, '&:hover': { backgroundColor: @@ -118,7 +120,7 @@ const UserMenu = () => { px="sm" py="xs" color="red" - style={(theme) => ({ + style={(theme: any) => ({ borderRadius: theme.radius.sm, '&:hover': { backgroundColor: diff --git a/app/src/components/navigation/WorkspaceSwitcher.jsx b/app/src/components/navigation/WorkspaceSwitcher.tsx similarity index 86% rename from app/src/components/navigation/WorkspaceSwitcher.jsx rename to app/src/components/navigation/WorkspaceSwitcher.tsx index 6a0fd2a..1586294 100644 --- a/app/src/components/navigation/WorkspaceSwitcher.jsx +++ b/app/src/components/navigation/WorkspaceSwitcher.tsx @@ -17,19 +17,20 @@ import { import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react'; import { useWorkspace } from '../../contexts/WorkspaceContext'; import { useModalContext } from '../../contexts/ModalContext'; -import { listWorkspaces } from '../../api/git'; +import { listWorkspaces } from '../../api/workspace'; import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal'; +import { Workspace } from '../../types/workspace'; -const WorkspaceSwitcher = () => { +const WorkspaceSwitcher: React.FC = () => { const { currentWorkspace, switchWorkspace } = useWorkspace(); const { setSettingsModalVisible, setCreateWorkspaceModalVisible } = useModalContext(); - const [workspaces, setWorkspaces] = useState([]); - const [loading, setLoading] = useState(false); - const [popoverOpened, setPopoverOpened] = useState(false); + const [workspaces, setWorkspaces] = useState([]); + const [loading, setLoading] = useState(false); + const [popoverOpened, setPopoverOpened] = useState(false); const theme = useMantineTheme(); - const loadWorkspaces = async () => { + const loadWorkspaces = async (): Promise => { setLoading(true); try { const list = await listWorkspaces(); @@ -40,12 +41,14 @@ const WorkspaceSwitcher = () => { setLoading(false); }; - const handleCreateWorkspace = () => { + const handleCreateWorkspace = (): void => { setPopoverOpened(false); setCreateWorkspaceModalVisible(true); }; - const handleWorkspaceCreated = async (newWorkspace) => { + const handleWorkspaceCreated = async ( + newWorkspace: Workspace + ): Promise => { await loadWorkspaces(); switchWorkspace(newWorkspace.name); }; @@ -108,7 +111,7 @@ const WorkspaceSwitcher = () => { key={workspace.name} p="xs" withBorder - style={{ + style={(theme: any) => ({ backgroundColor: isSelected ? theme.colors.blue[ theme.colorScheme === 'dark' ? 8 : 1 @@ -119,7 +122,7 @@ const WorkspaceSwitcher = () => { theme.colorScheme === 'dark' ? 7 : 5 ] : undefined, - }} + })} > { c={ isSelected ? theme.colors.blue[ - theme.colorScheme === 'dark' ? 0 : 9 + (theme as any).colorScheme === 'dark' + ? 0 + : 9 ] : undefined } @@ -148,7 +153,7 @@ const WorkspaceSwitcher = () => { size="xs" c={ isSelected - ? theme.colorScheme === 'dark' + ? (theme as any).colorScheme === 'dark' ? theme.colors.blue[2] : theme.colors.blue[7] : 'dimmed' @@ -166,7 +171,7 @@ const WorkspaceSwitcher = () => { variant="subtle" size="lg" color={ - theme.colorScheme === 'dark' + (theme as any).colorScheme === 'dark' ? 'blue.2' : 'blue.7' } diff --git a/app/src/types/workspace.ts b/app/src/types/workspace.ts index 83f780a..4d8f359 100644 --- a/app/src/types/workspace.ts +++ b/app/src/types/workspace.ts @@ -30,10 +30,12 @@ export const DEFAULT_WORKSPACE_SETTINGS: WorkspaceSettings = { export interface Workspace extends WorkspaceSettings { name: string; + createdAt: number; } export const DEFAULT_WORKSPACE: Workspace = { name: '', + createdAt: Date.now(), ...DEFAULT_WORKSPACE_SETTINGS, };