Optimize TableRow and CheckboxCell

[lucasbordeau]

Scope & Context

We're still having room to optimize table row and the select cell checkbox.

Desired behavior

As we did for RecordTableCell, RecordTableRow and CheckboxCell should be optimized to remove any call to recoil and any styled-component.

[greptile-apps[bot]]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To optimize RecordTableRow and CheckboxCell by removing calls to Recoil and styled-components, follow these steps:

1. Remove Recoil from CheckboxCell:

   • Open /packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx.
   • Remove imports from recoil.
   • Refactor state management to use React's useState or context API.

   • Example:

     import React, { useState, useContext } from 'react';
     import { RecordTableRowContext } from './RecordTableRow';
     
     const CheckboxCell = () => {
     const { recordId } = useContext(RecordTableRowContext);
     const [currentRowSelected, setCurrentRowSelected] = useState(false);
     
     const handleClick = () => {
      setCurrentRowSelected(!currentRowSelected);
     };
     
     return (
      <div onClick={handleClick}>
        <input type="checkbox" checked={currentRowSelected} readOnly />
      </div>
     );
     };
     export default CheckboxCell;

2. Remove styled-components from CheckboxCell:

   • Replace styled-components with standard CSS or CSS-in-JS solutions like emotion.

   • Example:

     import React from 'react';
     import './CheckboxCell.css'; // Create a corresponding CSS file
     
     const CheckboxCell = () => {
     return (
      <div className="checkbox-cell">
        <input type="checkbox" />
      </div>
     );
     };
     export default CheckboxCell;

3. Remove Recoil from RecordTableRow:

   • Open /packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx.
   • Remove imports from recoil.
   • Refactor state management to use React's useState or context API.

   • Example:

     import React, { useContext } from 'react';
     import { RecordTableRowContext } from './RecordTableRowContext';
     
     const RecordTableRow = ({ recordId, rowIndex }) => {
     const { pathToShowPage, isSelected } = useContext(RecordTableRowContext);
     
     return (
      <tr data-testid={`record-row-${recordId}`} data-selectable-id={recordId}>
        <td>
          <CheckboxCell />
        </td>
        <td></td>
      </tr>
     );
     };
     export default RecordTableRow;

4. Remove styled-components from RecordTableRow:

   • Replace styled-components with standard CSS or CSS-in-JS solutions like emotion.

   • Example:

     import React from 'react';
     import './RecordTableRow.css'; // Create a corresponding CSS file
     
     const RecordTableRow = ({ recordId, rowIndex }) => {
     return (
      <tr className="record-table-row" data-testid={`record-row-${recordId}`} data-selectable-id={recordId}>
        <td>
          <CheckboxCell />
        </td>
        <td></td>
      </tr>
     );
     };
     export default RecordTableRow;

References

/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx /packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx /packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts /packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx

Ask Greptile