Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-08-16 13:47:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Simplified context

Browse Source
This commit is contained in:
Connor Yoh 2025-08-07 15:41:13 +01:00
parent 90997e81c0
commit dcc81e1a69
1 changed files with 10 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/contexts/ToolWorkflowContext.tsx
View File

@ -1,6 +1,6 @@
/** /**
* ToolWorkflowContext - Manages tool selection, UI state, and workflow coordination * ToolWorkflowContext - Manages tool selection, UI state, and workflow coordination
* Reduces prop drilling and improves performance through selective subscriptions * Eliminates prop drilling with a single, simple context
*/ */
import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react'; import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react';
@ -158,8 +158,7 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro
setReaderMode(true); setReaderMode(true);
}, [setReaderMode]); }, [setReaderMode]);
// Computed values (memoized to prevent unnecessary recalculations) // Filter tools based on search query
// Separate filteredTools memoization to avoid context re-renders
const filteredTools = useMemo(() => { const filteredTools = useMemo(() => {
if (!toolRegistry) return []; if (!toolRegistry) return [];
return Object.entries(toolRegistry).filter(([_, { name }]) => return Object.entries(toolRegistry).filter(([_, { name }]) =>
@ -172,17 +171,10 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro
[state.sidebarsVisible, state.readerMode] [state.sidebarsVisible, state.readerMode]
); );
// Context value (memoized to prevent unnecessary rerenders) // Simple context value with basic memoization
const contextValue = useMemo((): ToolWorkflowContextValue => ({ const contextValue = useMemo((): ToolWorkflowContextValue => ({
// State - destructure to avoid object reference changes // State
sidebarsVisible: state.sidebarsVisible, ...state,
leftPanelView: state.leftPanelView,
readerMode: state.readerMode,
previewFile: state.previewFile,
pageEditorFunctions: state.pageEditorFunctions,
searchQuery: state.searchQuery,
// Tool state
selectedToolKey, selectedToolKey,
selectedTool, selectedTool,
toolRegistry, toolRegistry,
@ -205,36 +197,7 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro
// Computed // Computed
filteredTools, filteredTools,
isPanelVisible, isPanelVisible,
}), [ }), [state, selectedToolKey, selectedTool, toolRegistry, filteredTools, isPanelVisible]);
// State values (not the state object itself)
state.sidebarsVisible,
state.leftPanelView,
state.readerMode,
state.previewFile,
state.pageEditorFunctions,
state.searchQuery,
// Tool state (toolRegistry removed from deps - it's passed through but doesn't affect memoization)
selectedToolKey,
selectedTool,
// Actions are stable due to useCallback
setSidebarsVisible,
setLeftPanelView,
setReaderMode,
setPreviewFile,
setPageEditorFunctions,
setSearchQuery,
selectTool,
clearToolSelection,
handleToolSelect,
handleBackToTools,
handleReaderToggle,
// Computed values
filteredTools,
isPanelVisible,
]);
return ( return (
<ToolWorkflowContext.Provider value={contextValue}> <ToolWorkflowContext.Provider value={contextValue}>
@ -252,48 +215,7 @@ export function useToolWorkflow(): ToolWorkflowContextValue {
return context; return context;
} }
// Selective hooks for performance (only subscribe to specific parts of state) // Convenience exports for specific use cases (optional - components can use useToolWorkflow directly)
export function useToolSelection() { export const useToolSelection = useToolWorkflow;
const { selectedToolKey, selectedTool, selectTool, clearToolSelection, handleToolSelect } = useToolWorkflow(); export const useToolPanelState = useToolWorkflow;
return { selectedToolKey, selectedTool, selectTool, clearToolSelection, handleToolSelect }; export const useWorkbenchState = useToolWorkflow;
}
export function useToolPanelState() {
const {
leftPanelView,
isPanelVisible,
searchQuery,
filteredTools,
setLeftPanelView,
setSearchQuery,
handleBackToTools
} = useToolWorkflow();
return {
leftPanelView,
isPanelVisible,
searchQuery,
filteredTools,
setLeftPanelView,
setSearchQuery,
handleBackToTools
};
}
export function useWorkbenchState() {
const {
previewFile,
pageEditorFunctions,
sidebarsVisible,
setPreviewFile,
setPageEditorFunctions,
setSidebarsVisible
} = useToolWorkflow();
return {
previewFile,
pageEditorFunctions,
sidebarsVisible,
setPreviewFile,
setPageEditorFunctions,
setSidebarsVisible
};
}