Remove custom events for table cell managemnet

[lucasbordeau]

Scope & Context

Table cells, after performance optimization with custom events for handling soft focus and edit mode.

Current behavior

We use custom event with useEffect to handle soft focus and edit mode toggle in table cells.

The problem is that it's a pattern that opens for potentially many difficult to reproduce and to fix edge cases, like a cell staying open that blocks everything else.

Expected behavior

We want to go back to the previous idea, even if it lowers performances a bit, because it was a simple and predictable pattern.

The idea is to reimplement only one family state for a cell position, that contains everything a cell needs to know : soft focus, edit mode, loading, etc. So that there's only one recoil call being made.

[greptile-apps[bot]]

Steps to Remove Custom Events for Table Cell Management

1. Locate Custom Event Handlers: Identify and remove custom event handlers in the relevant components. These are likely found in files managing table cell states, such as TableCell.js or similar.

2. Remove useEffect Hooks: Remove useEffect hooks that handle custom events for soft focus and edit mode toggling.

3. Implement Single State Management:

   • Create a single Recoil state to manage cell properties (soft focus, edit mode, loading, etc.).

     
     import { atom } from 'recoil';

   export const cellState = atom({ key: 'cellState', default: { softFocus: false, editMode: false, loading: false, // add other properties as needed }, });

4. Update Components: Update table cell components to use the new Recoil state.

   import { useRecoilState } from 'recoil';
   import { cellState } from './path/to/state';
   
   const TableCell = ({ cellId }) => {
    const [state, setState] = useRecoilState(cellState(cellId));
   
    // Replace custom event logic with direct state updates
    const handleFocus = () => setState(prev => ({ ...prev, softFocus: true }));
    const handleEditMode = () => setState(prev => ({ ...prev, editMode: !prev.editMode }));
   
    return (
      <div onFocus={handleFocus} onClick={handleEditMode}>
        {/* Render cell content */}
      </div>
    );
   };

5. Remove Custom Event Logic: Ensure all custom event logic is removed and replaced with direct state manipulation using Recoil.

6. Refactor and Clean Up: Refactor the code to ensure consistency and remove any redundant code related to the old custom event system.

References