From dcc81e1a6983b6b28560341eac60beb86a2dbf96 Mon Sep 17 00:00:00 2001 From: Connor Yoh Date: Thu, 7 Aug 2025 15:41:13 +0100 Subject: [PATCH] Simplified context --- frontend/src/contexts/ToolWorkflowContext.tsx | 98 ++----------------- 1 file changed, 10 insertions(+), 88 deletions(-) diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx index b6e480a7d..47f42b011 100644 --- a/frontend/src/contexts/ToolWorkflowContext.tsx +++ b/frontend/src/contexts/ToolWorkflowContext.tsx @@ -1,6 +1,6 @@ /** * 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'; @@ -158,8 +158,7 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro setReaderMode(true); }, [setReaderMode]); - // Computed values (memoized to prevent unnecessary recalculations) - // Separate filteredTools memoization to avoid context re-renders + // Filter tools based on search query const filteredTools = useMemo(() => { if (!toolRegistry) return []; return Object.entries(toolRegistry).filter(([_, { name }]) => @@ -172,17 +171,10 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro [state.sidebarsVisible, state.readerMode] ); - // Context value (memoized to prevent unnecessary rerenders) + // Simple context value with basic memoization const contextValue = useMemo((): ToolWorkflowContextValue => ({ - // State - destructure to avoid object reference changes - sidebarsVisible: state.sidebarsVisible, - leftPanelView: state.leftPanelView, - readerMode: state.readerMode, - previewFile: state.previewFile, - pageEditorFunctions: state.pageEditorFunctions, - searchQuery: state.searchQuery, - - // Tool state + // State + ...state, selectedToolKey, selectedTool, toolRegistry, @@ -205,36 +197,7 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro // Computed 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, - ]); + }), [state, selectedToolKey, selectedTool, toolRegistry, filteredTools, isPanelVisible]); return ( @@ -252,48 +215,7 @@ export function useToolWorkflow(): ToolWorkflowContextValue { return context; } -// Selective hooks for performance (only subscribe to specific parts of state) -export function useToolSelection() { - const { selectedToolKey, selectedTool, selectTool, clearToolSelection, handleToolSelect } = useToolWorkflow(); - return { selectedToolKey, selectedTool, selectTool, clearToolSelection, handleToolSelect }; -} - -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 - }; -} \ No newline at end of file +// Convenience exports for specific use cases (optional - components can use useToolWorkflow directly) +export const useToolSelection = useToolWorkflow; +export const useToolPanelState = useToolWorkflow; +export const useWorkbenchState = useToolWorkflow; \ No newline at end of file