Optimize Effect state sync components in Index scope

[lucasbordeau]

Scope & Context

In the intersection between : ViewBar, Table and Kanban

Technical inputs

We would like to gradually put the domain scoping of our features into hooks instead of visual parts of the tree.

Because right now we are forced to drill down handler and states to respect a scoping at the tree / component level, where we could decouple only at the hook / state level and let the component handle the coupling where it is needed.

This will greatly improve the DX in those parts of the app, where contributors who build many small features are slowed down by this logic and its many levels of drill-down to respect.

The goal is to end up with clearly separated modules for each domain.

We also want to take advantage of this refactor to also remove the scoped states from view, table and kanban, as it also adds a layer of complexity for contributors that is not adding enough architectural value for the DX cost, after having tried it.

In this context we also want to simplify all the state synchronization logic, by removing most of the handler in context that were here for decoupling at the UI level, and see if we can remove a maximum of Effect components and reduce the number of re-renders, between the initial request to fetch the data, and the final render of the table.

[greptile-apps[bot]]

Steps to Optimize Effect State Sync Components

1. Refactor ViewBar Component:

   • Locate ViewBar component in src/components/ViewBar.js.
   • Identify state and handlers being drilled down.
   • Create a custom hook, e.g., useViewBarState, to manage these states and handlers.
   • Replace state and handler logic in ViewBar with the new hook.

   // src/hooks/useViewBarState.js
   import { useState } from 'react';
   
   const useViewBarState = () => {
    const [state, setState] = useState(initialState);
    const handler = () => { /* logic */ };
    return { state, setState, handler };
   };
   export default useViewBarState;

   // src/components/ViewBar.js
   import useViewBarState from '../hooks/useViewBarState';
   
   const ViewBar = () => {
    const { state, setState, handler } = useViewBarState();
    // component logic
   };

2. Refactor Table Component:

   • Locate Table component in src/components/Table.js.
   • Follow similar steps as ViewBar to create and use a custom hook, e.g., useTableState.

3. Refactor Kanban Component:

   • Locate Kanban component in src/components/Kanban.js.
   • Follow similar steps as ViewBar to create and use a custom hook, e.g., useKanbanState.

4. Remove Scoped States:

   • Ensure scoped states are removed from ViewBar, Table, and Kanban components.
   • Verify that all state management is handled within the respective hooks.

5. Update Imports and Usages:

   • Ensure all imports and usages of the old state and handlers are updated to use the new hooks.

This refactor will decouple domain logic from visual components and improve the developer experience.

References