Remove custom events for table cell managemnet about twenty HOT 1 OPEN

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

from twenty.