mirror of
https://github.com/lordmathis/lemma.git
synced 2025-11-08 00:44:22 +00:00
Refactor workspace context usage to improve structure and introduce ThemeContext
This commit is contained in:
46
app/src/contexts/ThemeContext.tsx
Normal file
46
app/src/contexts/ThemeContext.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useCallback,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { useMantineColorScheme, type MantineColorScheme } from '@mantine/core';
|
||||
|
||||
interface ThemeContextType {
|
||||
colorScheme: MantineColorScheme;
|
||||
updateColorScheme: (newTheme: MantineColorScheme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | null>(null);
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
|
||||
const { colorScheme, setColorScheme } = useMantineColorScheme();
|
||||
|
||||
const updateColorScheme = useCallback(
|
||||
(newTheme: MantineColorScheme): void => {
|
||||
setColorScheme(newTheme);
|
||||
},
|
||||
[setColorScheme]
|
||||
);
|
||||
|
||||
const value: ThemeContextType = {
|
||||
colorScheme,
|
||||
updateColorScheme,
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useTheme = (): ThemeContextType => {
|
||||
const context = useContext(ThemeContext);
|
||||
if (!context) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@@ -1,241 +1,22 @@
|
||||
import React, {
|
||||
type ReactNode,
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
} from 'react';
|
||||
import { useMantineColorScheme, type MantineColorScheme } from '@mantine/core';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { DEFAULT_WORKSPACE_SETTINGS, type Workspace } from '@/types/models';
|
||||
import {
|
||||
deleteWorkspace,
|
||||
getLastWorkspaceName,
|
||||
getWorkspace,
|
||||
listWorkspaces,
|
||||
updateLastWorkspaceName,
|
||||
updateWorkspace,
|
||||
} from '@/api/workspace';
|
||||
import React from 'react';
|
||||
import { ThemeProvider } from './ThemeContext';
|
||||
import { WorkspaceDataProvider } from './WorkspaceDataContext';
|
||||
import { useWorkspace as useWorkspaceHook } from '../hooks/useWorkspace';
|
||||
|
||||
interface WorkspaceContextType {
|
||||
currentWorkspace: Workspace | null;
|
||||
workspaces: Workspace[];
|
||||
settings: Workspace | typeof DEFAULT_WORKSPACE_SETTINGS;
|
||||
updateSettings: (newSettings: Partial<Workspace>) => Promise<void>;
|
||||
loading: boolean;
|
||||
colorScheme: MantineColorScheme;
|
||||
updateColorScheme: (newTheme: MantineColorScheme) => void;
|
||||
switchWorkspace: (workspaceName: string) => Promise<void>;
|
||||
deleteCurrentWorkspace: () => Promise<void>;
|
||||
}
|
||||
|
||||
const WorkspaceContext = createContext<WorkspaceContextType | null>(null);
|
||||
// Re-export the useWorkspace hook directly for backward compatibility
|
||||
export const useWorkspace = useWorkspaceHook;
|
||||
|
||||
interface WorkspaceProviderProps {
|
||||
children: ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
// Create a backward-compatible WorkspaceProvider that composes our new providers
|
||||
export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
|
||||
null
|
||||
);
|
||||
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const { colorScheme, setColorScheme } = useMantineColorScheme();
|
||||
|
||||
const loadWorkspaces = useCallback(async (): Promise<Workspace[]> => {
|
||||
try {
|
||||
const workspaceList = await listWorkspaces();
|
||||
setWorkspaces(workspaceList);
|
||||
return workspaceList;
|
||||
} catch (error) {
|
||||
console.error('Failed to load workspaces:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to load workspaces list',
|
||||
color: 'red',
|
||||
});
|
||||
return [];
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadWorkspaceData = useCallback(
|
||||
async (workspaceName: string): Promise<void> => {
|
||||
try {
|
||||
const workspace = await getWorkspace(workspaceName);
|
||||
setCurrentWorkspace(workspace);
|
||||
setColorScheme(workspace.theme as MantineColorScheme);
|
||||
} catch (error) {
|
||||
console.error('Failed to load workspace data:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to load workspace data',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
},
|
||||
[setColorScheme]
|
||||
);
|
||||
|
||||
const loadFirstAvailableWorkspace = useCallback(async (): Promise<void> => {
|
||||
try {
|
||||
const allWorkspaces = await listWorkspaces();
|
||||
if (allWorkspaces.length > 0) {
|
||||
const firstWorkspace = allWorkspaces[0];
|
||||
if (!firstWorkspace) throw new Error('No workspaces available');
|
||||
await updateLastWorkspaceName(firstWorkspace.name);
|
||||
await loadWorkspaceData(firstWorkspace.name);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load first available workspace:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to load workspace',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
}, [loadWorkspaceData]);
|
||||
|
||||
useEffect(() => {
|
||||
const initializeWorkspace = async (): Promise<void> => {
|
||||
try {
|
||||
const lastWorkspaceName = await getLastWorkspaceName();
|
||||
if (lastWorkspaceName) {
|
||||
await loadWorkspaceData(lastWorkspaceName);
|
||||
} else {
|
||||
await loadFirstAvailableWorkspace();
|
||||
}
|
||||
await loadWorkspaces();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize workspace:', error);
|
||||
await loadFirstAvailableWorkspace();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void initializeWorkspace();
|
||||
}, [loadFirstAvailableWorkspace, loadWorkspaceData, loadWorkspaces]);
|
||||
|
||||
const switchWorkspace = useCallback(
|
||||
async (workspaceName: string): Promise<void> => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await updateLastWorkspaceName(workspaceName);
|
||||
await loadWorkspaceData(workspaceName);
|
||||
await loadWorkspaces();
|
||||
} catch (error) {
|
||||
console.error('Failed to switch workspace:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to switch workspace',
|
||||
color: 'red',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[loadWorkspaceData, loadWorkspaces]
|
||||
);
|
||||
|
||||
const deleteCurrentWorkspace = useCallback(async (): Promise<void> => {
|
||||
if (!currentWorkspace) return;
|
||||
|
||||
try {
|
||||
const allWorkspaces = await loadWorkspaces();
|
||||
if (allWorkspaces.length <= 1) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message:
|
||||
'Cannot delete the last workspace. At least one workspace must exist.',
|
||||
color: 'red',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Delete workspace and get the next workspace ID
|
||||
const nextWorkspaceName: string = await deleteWorkspace(
|
||||
currentWorkspace.name
|
||||
);
|
||||
|
||||
// Load the new workspace data
|
||||
await loadWorkspaceData(nextWorkspaceName);
|
||||
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Workspace deleted successfully',
|
||||
color: 'green',
|
||||
});
|
||||
|
||||
await loadWorkspaces();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete workspace:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to delete workspace',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
}, [currentWorkspace, loadWorkspaceData, loadWorkspaces]);
|
||||
|
||||
const updateSettings = useCallback(
|
||||
async (newSettings: Partial<Workspace>): Promise<void> => {
|
||||
if (!currentWorkspace) return;
|
||||
|
||||
try {
|
||||
const updatedWorkspace = {
|
||||
...currentWorkspace,
|
||||
...newSettings,
|
||||
};
|
||||
|
||||
const response = await updateWorkspace(
|
||||
currentWorkspace.name,
|
||||
updatedWorkspace
|
||||
);
|
||||
setCurrentWorkspace(response);
|
||||
setColorScheme(response.theme);
|
||||
await loadWorkspaces();
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
[currentWorkspace, loadWorkspaces, setColorScheme]
|
||||
);
|
||||
|
||||
const updateColorScheme = useCallback(
|
||||
(newTheme: MantineColorScheme): void => {
|
||||
setColorScheme(newTheme);
|
||||
},
|
||||
[setColorScheme]
|
||||
);
|
||||
|
||||
const value: WorkspaceContextType = {
|
||||
currentWorkspace,
|
||||
workspaces,
|
||||
settings: currentWorkspace || DEFAULT_WORKSPACE_SETTINGS,
|
||||
updateSettings,
|
||||
loading,
|
||||
colorScheme,
|
||||
updateColorScheme,
|
||||
switchWorkspace,
|
||||
deleteCurrentWorkspace,
|
||||
};
|
||||
|
||||
return (
|
||||
<WorkspaceContext.Provider value={value}>
|
||||
{children}
|
||||
</WorkspaceContext.Provider>
|
||||
<ThemeProvider>
|
||||
<WorkspaceDataProvider>{children}</WorkspaceDataProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useWorkspace = (): WorkspaceContextType => {
|
||||
const context = useContext(WorkspaceContext);
|
||||
if (!context) {
|
||||
throw new Error('useWorkspace must be used within a WorkspaceProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
146
app/src/contexts/WorkspaceDataContext.tsx
Normal file
146
app/src/contexts/WorkspaceDataContext.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import React, {
|
||||
type ReactNode,
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
} from 'react';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { DEFAULT_WORKSPACE_SETTINGS, type Workspace } from '@/types/models';
|
||||
import {
|
||||
getWorkspace,
|
||||
listWorkspaces,
|
||||
getLastWorkspaceName,
|
||||
updateLastWorkspaceName,
|
||||
} from '@/api/workspace';
|
||||
import { useTheme } from './ThemeContext';
|
||||
|
||||
interface WorkspaceDataContextType {
|
||||
currentWorkspace: Workspace | null;
|
||||
workspaces: Workspace[];
|
||||
settings: Workspace | typeof DEFAULT_WORKSPACE_SETTINGS;
|
||||
loading: boolean;
|
||||
loadWorkspaces: () => Promise<Workspace[]>;
|
||||
loadWorkspaceData: (workspaceName: string) => Promise<void>;
|
||||
setCurrentWorkspace: (workspace: Workspace | null) => void;
|
||||
}
|
||||
|
||||
const WorkspaceDataContext = createContext<WorkspaceDataContextType | null>(
|
||||
null
|
||||
);
|
||||
|
||||
interface WorkspaceDataProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const WorkspaceDataProvider: React.FC<WorkspaceDataProviderProps> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
|
||||
null
|
||||
);
|
||||
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const { updateColorScheme } = useTheme();
|
||||
|
||||
const loadWorkspaces = useCallback(async (): Promise<Workspace[]> => {
|
||||
try {
|
||||
const workspaceList = await listWorkspaces();
|
||||
setWorkspaces(workspaceList);
|
||||
return workspaceList;
|
||||
} catch (error) {
|
||||
console.error('Failed to load workspaces:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to load workspaces list',
|
||||
color: 'red',
|
||||
});
|
||||
return [];
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadWorkspaceData = useCallback(
|
||||
async (workspaceName: string): Promise<void> => {
|
||||
try {
|
||||
const workspace = await getWorkspace(workspaceName);
|
||||
setCurrentWorkspace(workspace);
|
||||
updateColorScheme(workspace.theme);
|
||||
} catch (error) {
|
||||
console.error('Failed to load workspace data:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to load workspace data',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
},
|
||||
[updateColorScheme]
|
||||
);
|
||||
|
||||
const loadFirstAvailableWorkspace = useCallback(async (): Promise<void> => {
|
||||
try {
|
||||
const allWorkspaces = await listWorkspaces();
|
||||
if (allWorkspaces.length > 0) {
|
||||
const firstWorkspace = allWorkspaces[0];
|
||||
if (!firstWorkspace) throw new Error('No workspaces available');
|
||||
await updateLastWorkspaceName(firstWorkspace.name);
|
||||
await loadWorkspaceData(firstWorkspace.name);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load first available workspace:', error);
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Failed to load workspace',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
}, [loadWorkspaceData]);
|
||||
|
||||
useEffect(() => {
|
||||
const initializeWorkspace = async (): Promise<void> => {
|
||||
try {
|
||||
const lastWorkspaceName = await getLastWorkspaceName();
|
||||
if (lastWorkspaceName) {
|
||||
await loadWorkspaceData(lastWorkspaceName);
|
||||
} else {
|
||||
await loadFirstAvailableWorkspace();
|
||||
}
|
||||
await loadWorkspaces();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize workspace:', error);
|
||||
await loadFirstAvailableWorkspace();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void initializeWorkspace();
|
||||
}, [loadFirstAvailableWorkspace, loadWorkspaceData, loadWorkspaces]);
|
||||
|
||||
const value: WorkspaceDataContextType = {
|
||||
currentWorkspace,
|
||||
workspaces,
|
||||
settings: currentWorkspace || DEFAULT_WORKSPACE_SETTINGS,
|
||||
loading,
|
||||
loadWorkspaces,
|
||||
loadWorkspaceData,
|
||||
setCurrentWorkspace,
|
||||
};
|
||||
|
||||
return (
|
||||
<WorkspaceDataContext.Provider value={value}>
|
||||
{children}
|
||||
</WorkspaceDataContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useWorkspaceData = (): WorkspaceDataContextType => {
|
||||
const context = useContext(WorkspaceDataContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'useWorkspaceData must be used within a WorkspaceDataProvider'
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
Reference in New Issue
Block a user