Fix/table remove and mock data (#653)

* Removed tanstack react table

* Fixed remove table feature without tanstack table

* Fixed delete people and companies

* Fixed hotkeys on editable date cell

* Fixed double text

* Fixed company mock mode

* Fixed lint

* Fixed right click selection

front/package.json

@@ -13,7 +13,6 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@hookform/resolvers": "^3.1.1",
     "@tabler/icons-react": "^2.20.0",
-    "@tanstack/react-table": "^8.8.5",
     "@types/node": "^16.18.4",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",

front/src/modules/comments/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts

@@ -8,7 +8,7 @@ import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { GET_PEOPLE } from '@/people/services';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
+import { selectedRowIdsSelector } from '@/ui/tables/states/selectedRowIdsSelector';
 import {
   CommentableType,
   useCreateCommentThreadMutation,
@@ -36,7 +36,7 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() {
     commentableEntityArrayState,
   );
 
-  const selectedEntityIds = useRecoilValue(selectedRowIdsState);
+  const selectedEntityIds = useRecoilValue(selectedRowIdsSelector);
 
   return function openCreateCommentDrawerForSelectedRowIds(
     entityType: CommentableType,

front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
+import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+
+import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
+
+export function CompanyEntityTableDataMocked() {
+  const [, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const [, setIsFetchingEntityTableData] = useRecoilState(
+    isFetchingEntityTableDataState,
+  );
+
+  const setCompanyEntityTable = useSetCompanyEntityTable();
+
+  useEffect(() => {
+    const companyIds = mockedCompaniesData.map((company) => company.id);
+
+    setTableRowIds((currentRowIds) => {
+      if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
+        return companyIds;
+      }
+
+      return currentRowIds;
+    });
+
+    setCompanyEntityTable(mockedCompaniesData);
+
+    setIsFetchingEntityTableData(false);
+  }, [setCompanyEntityTable, setIsFetchingEntityTableData, setTableRowIds]);
+
+  return <></>;
+}

front/src/modules/ui/components/editable-cell/types/EditableCellDateEditMode.tsx

@@ -1,3 +1,7 @@
+import { Key } from 'ts-key-enum';
+
+import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { InplaceInputDateEditMode } from '@/ui/inplace-inputs/components/InplaceInputDateEditMode';
 
 import { useEditableCell } from '../hooks/useEditableCell';
@@ -18,5 +22,14 @@ export function EditableCellDateEditMode({
     closeEditableCell();
   }
 
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      closeEditableCell();
+    },
+    InternalHotkeysScope.CellDateEditMode,
+    [closeEditableCell],
+  );
+
   return <InplaceInputDateEditMode onChange={handleDateChange} value={value} />;
 }

front/src/modules/ui/components/editable-cell/types/EditableCellDoubleText.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 
@@ -29,6 +29,11 @@ export function EditableCellDoubleText({
   const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
   const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
 
+  useEffect(() => {
+    setFirstInternalValue(firstValue);
+    setSecondInternalValue(secondValue);
+  }, [firstValue, secondValue]);
+
   function handleOnChange(firstValue: string, secondValue: string): void {
     setFirstInternalValue(firstValue);
     setSecondInternalValue(secondValue);

front/src/modules/ui/components/table/EntityTableBody.tsx

@@ -17,17 +17,13 @@ export function EntityTableBody({ columns }: { columns: Array<TableColumn> }) {
 
   return (
     <tbody>
-      {!isFetchingEntityTableData ? (
+      {!isFetchingEntityTableData
-        rowIds.map((rowId, index) => (
+        ? rowIds.map((rowId, index) => (
-          <RecoilScope SpecificContext={RowContext} key={rowId}>
+            <RecoilScope SpecificContext={RowContext} key={rowId}>
-            <EntityTableRow columns={columns} rowId={rowId} index={index} />
+              <EntityTableRow columns={columns} rowId={rowId} index={index} />
-          </RecoilScope>
+            </RecoilScope>
-        ))
+          ))
-      ) : (
+        : null}
-        <tr>
-          <td>loading...</td>
-        </tr>
-      )}
     </tbody>
   );
 }

front/src/modules/ui/components/table/EntityTableCell.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { useCurrentRowSelected } from '@/ui/tables/hooks/useCurrentRowSelected';
 import { CellContext } from '@/ui/tables/states/CellContext';
 import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
 import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
-import { currentRowSelectionState } from '@/ui/tables/states/rowSelectionState';
 
 export function EntityTableCell({
   rowId,
@@ -18,8 +18,6 @@ export function EntityTableCell({
   cellIndex: number;
   children: React.ReactNode;
 }) {
-  const [, setCurrentRowSelection] = useRecoilState(currentRowSelectionState);
-
   const [, setCurrentColumnNumber] = useRecoilScopedState(
     currentColumnNumberScopedState,
     CellContext,
@@ -31,9 +29,12 @@ export function EntityTableCell({
 
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
 
-  function handleContextMenu(event: React.MouseEvent, id: string) {
+  const { setCurrentRowSelected } = useCurrentRowSelected();
+
+  function handleContextMenu(event: React.MouseEvent) {
     event.preventDefault();
-    setCurrentRowSelection((prev) => ({ ...prev, [id]: true }));
+
+    setCurrentRowSelected(true);
 
     setContextMenuPosition({
       x: event.clientX,
@@ -43,7 +44,7 @@ export function EntityTableCell({
 
   return (
     <td
-      onContextMenu={(event) => handleContextMenu(event, rowId)}
+      onContextMenu={(event) => handleContextMenu(event)}
       style={{
         width: size,
         minWidth: size,

front/src/modules/ui/components/table/EntityTableRow.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { TableColumn } from '@/people/table/components/peopleColumns';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
@@ -8,8 +8,8 @@ import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'
 import { CellContext } from '@/ui/tables/states/CellContext';
 import { currentRowEntityIdScopedState } from '@/ui/tables/states/currentRowEntityIdScopedState';
 import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { isRowSelectedFamilyState } from '@/ui/tables/states/isRowSelectedFamilyState';
 import { RowContext } from '@/ui/tables/states/RowContext';
-import { currentRowSelectionState } from '@/ui/tables/states/rowSelectionState';
 
 import { CheckboxCell } from './CheckboxCell';
 import { EntityTableCell } from './EntityTableCell';
@@ -28,12 +28,13 @@ export function EntityTableRow({
   rowId: string;
   index: number;
 }) {
-  const [currentRowSelection] = useRecoilState(currentRowSelectionState);
   const [currentRowEntityId, setCurrentRowEntityId] = useRecoilScopedState(
     currentRowEntityIdScopedState,
     RowContext,
   );
 
+  const isCurrentRowSelected = useRecoilValue(isRowSelectedFamilyState(rowId));
+
   const [, setCurrentRowNumber] = useRecoilScopedState(
     currentRowNumberScopedState,
     RowContext,
@@ -53,7 +54,7 @@ export function EntityTableRow({
     <StyledRow
       key={rowId}
       data-testid={`row-id-${rowId}`}
-      selected={!!currentRowSelection[rowId]}
+      selected={isCurrentRowSelected}
     >
       <td>
         <CheckboxCell />

front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { ActionBar } from '@/ui/components/action-bar/ActionBar';
-import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
+import { selectedRowIdsSelector } from '@/ui/tables/states/selectedRowIdsSelector';
 
 type OwnProps = {
   children: React.ReactNode | React.ReactNode[];
 };
 
 export function EntityTableActionBar({ children }: OwnProps) {
-  const selectedRowIds = useRecoilValue(selectedRowIdsState);
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
   return <ActionBar selectedIds={selectedRowIds}>{children}</ActionBar>;
 }

front/src/modules/ui/tables/hooks/useCurrentRowSelected.ts

@@ -1,7 +1,6 @@
 import { useRecoilCallback, useRecoilState } from 'recoil';
 
 import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
-import { numberOfSelectedRowState } from '../states/numberOfSelectedRowState';
 
 import { useCurrentRowEntityId } from './useCurrentEntityId';
 
@@ -21,15 +20,9 @@ export function useCurrentRowSelected() {
           .getLoadable(isRowSelectedFamilyState(currentRowId))
           .valueOrThrow();
 
-        const numberOfSelectedRow = snapshot
-          .getLoadable(numberOfSelectedRowState)
-          .valueOrThrow();
-
         if (newSelectedState && !isRowSelected) {
-          set(numberOfSelectedRowState, numberOfSelectedRow + 1);
           set(isRowSelectedFamilyState(currentRowId), true);
         } else if (!newSelectedState && isRowSelected) {
-          set(numberOfSelectedRowState, numberOfSelectedRow - 1);
           set(isRowSelectedFamilyState(currentRowId), false);
         }
       },

front/src/modules/ui/tables/hooks/useResetTableRowSelection.ts

@@ -1,17 +1,20 @@
-import { useCallback } from 'react';
+import { useRecoilCallback } from 'recoil';
-import { useSetRecoilState } from 'recoil';
 
-import { currentRowSelectionState } from '../states/rowSelectionState';
+import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
+import { tableRowIdsState } from '../states/tableRowIdsState';
 
 export function useResetTableRowSelection() {
-  const setCurrentRowSelectionState = useSetRecoilState(
+  return useRecoilCallback(
-    currentRowSelectionState,
+    ({ snapshot, set }) =>
-  );
+      () => {
+        const tableRowIds = snapshot
+          .getLoadable(tableRowIdsState)
+          .valueOrThrow();
 
-  return useCallback(
+        for (const rowId of tableRowIds) {
-    function resetCurrentRowSelection() {
+          set(isRowSelectedFamilyState(rowId), false);
-      setCurrentRowSelectionState({});
+        }
-    },
+      },
-    [setCurrentRowSelectionState],
+    [],
   );
 }

front/src/modules/ui/tables/hooks/useSelectAllRows.ts

@@ -2,8 +2,6 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { allRowsSelectedStatusSelector } from '../states/allRowsSelectedStatusSelector';
 import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
-import { numberOfSelectedRowState } from '../states/numberOfSelectedRowState';
-import { numberOfTableRowsSelectorState } from '../states/numberOfTableRowsSelectorState';
 import { tableRowIdsState } from '../states/tableRowIdsState';
 
 export function useSelectAllRows() {
@@ -16,23 +14,15 @@ export function useSelectAllRows() {
           .getLoadable(allRowsSelectedStatusSelector)
           .valueOrThrow();
 
-        const numberOfRows = snapshot
-          .getLoadable(numberOfTableRowsSelectorState)
-          .valueOrThrow();
-
         const tableRowIds = snapshot
           .getLoadable(tableRowIdsState)
           .valueOrThrow();
 
         if (allRowsSelectedStatus === 'none') {
-          set(numberOfSelectedRowState, numberOfRows);
-
           for (const rowId of tableRowIds) {
             set(isRowSelectedFamilyState(rowId), true);
           }
         } else {
-          set(numberOfSelectedRowState, 0);
-
           for (const rowId of tableRowIds) {
             set(isRowSelectedFamilyState(rowId), false);
           }

front/src/modules/ui/tables/states/allRowsSelectedStatusSelector.ts

@@ -2,15 +2,17 @@ import { selector } from 'recoil';
 
 import { AllRowsSelectedStatus } from '../types/AllRowSelectedStatus';
 
-import { numberOfSelectedRowState } from './numberOfSelectedRowState';
 import { numberOfTableRowsSelectorState } from './numberOfTableRowsSelectorState';
+import { selectedRowIdsSelector } from './selectedRowIdsSelector';
 
 export const allRowsSelectedStatusSelector = selector<AllRowsSelectedStatus>({
   key: 'allRowsSelectedStatusSelector',
   get: ({ get }) => {
     const numberOfRows = get(numberOfTableRowsSelectorState);
 
-    const numberOfSelectedRows = get(numberOfSelectedRowState);
+    const selectedRowIds = get(selectedRowIdsSelector);
+
+    const numberOfSelectedRows = selectedRowIds.length;
 
     const allRowsSelectedStatus =
       numberOfSelectedRows === 0

front/src/modules/ui/tables/states/numberOfSelectedRowState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const numberOfSelectedRowState = atom<number>({
-  key: 'numberOfSelectedRowState',
-  default: 0,
-});

front/src/modules/ui/tables/states/rowSelectionState.ts

@@ -1,7 +0,0 @@
-import { RowSelectionState } from '@tanstack/react-table';
-import { atom } from 'recoil';
-
-export const currentRowSelectionState = atom<RowSelectionState>({
-  key: 'currentRowSelectionState',
-  default: {},
-});

front/src/modules/ui/tables/states/selectedRowIdsSelector.ts

@@ -0,0 +1,15 @@
+import { selector } from 'recoil';
+
+import { isRowSelectedFamilyState } from './isRowSelectedFamilyState';
+import { tableRowIdsState } from './tableRowIdsState';
+
+export const selectedRowIdsSelector = selector<string[]>({
+  key: 'selectedRowIdsSelector',
+  get: ({ get }) => {
+    const rowIds = get(tableRowIdsState);
+
+    return rowIds.filter(
+      (rowId) => get(isRowSelectedFamilyState(rowId)) === true,
+    );
+  },
+});

front/src/modules/ui/tables/states/selectedRowIdsState.ts

@@ -1,14 +0,0 @@
-import { selector } from 'recoil';
-
-import { currentRowSelectionState } from './rowSelectionState';
-
-export const selectedRowIdsState = selector<string[]>({
-  key: 'selectedRowIdsState',
-  get: ({ get }) => {
-    const currentRowSelection = get(currentRowSelectionState);
-
-    return Object.keys(currentRowSelection).filter(
-      (key) => currentRowSelection[key] === true,
-    );
-  },
-});

front/src/pages/companies/CompanyTableMockMode.tsx

@@ -1,6 +1,7 @@
 import { IconList } from '@tabler/icons-react';
 
 import { companyColumns } from '@/companies/table/components/companyColumns';
+import { CompanyEntityTableDataMocked } from '@/companies/table/components/CompanyEntityTableDataMocked';
 import { EntityTable } from '@/ui/components/table/EntityTable';
 import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
 
@@ -10,6 +11,7 @@ import { availableSorts } from './companies-sorts';
 export function CompanyTableMockMode() {
   return (
     <>
+      <CompanyEntityTableDataMocked />
       <HooksEntityTable
         numberOfColumns={companyColumns.length}
         availableFilters={companiesFilters}

front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx

@@ -5,11 +5,11 @@ import { GET_COMPANIES } from '@/companies/services';
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
 import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
-import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
+import { selectedRowIdsSelector } from '@/ui/tables/states/selectedRowIdsSelector';
 import { useDeleteCompaniesMutation } from '~/generated/graphql';
 
 export function TableActionBarButtonDeleteCompanies() {
-  const selectedRowIds = useRecoilValue(selectedRowIdsState);
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
   const resetRowSelection = useResetTableRowSelection();
 
@@ -18,13 +18,15 @@ export function TableActionBarButtonDeleteCompanies() {
   });
 
   async function handleDeleteClick() {
-    await deleteCompanies({
+    const rowIdsToDelete = selectedRowIds;
-      variables: {
-        ids: selectedRowIds,
-      },
-    });
 
     resetRowSelection();
+
+    await deleteCompanies({
+      variables: {
+        ids: rowIdsToDelete,
+      },
+    });
   }
 
   return (

front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx

@@ -5,11 +5,11 @@ import { GET_PEOPLE } from '@/people/services';
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
 import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
-import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
+import { selectedRowIdsSelector } from '@/ui/tables/states/selectedRowIdsSelector';
 import { useDeletePeopleMutation } from '~/generated/graphql';
 
 export function TableActionBarButtonDeletePeople() {
-  const selectedRowIds = useRecoilValue(selectedRowIdsState);
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
   const resetRowSelection = useResetTableRowSelection();
 
@@ -18,13 +18,15 @@ export function TableActionBarButtonDeletePeople() {
   });
 
   async function handleDeleteClick() {
-    await deletePeople({
+    const rowIdsToDelete = selectedRowIds;
-      variables: {
-        ids: selectedRowIds,
-      },
-    });
 
     resetRowSelection();
+
+    await deletePeople({
+      variables: {
+        ids: rowIdsToDelete,
+      },
+    });
   }
 
   return (

front/yarn.lock

@@ -4739,18 +4739,6 @@
   resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.24.0.tgz#d24f7076dab1ad6c6889258ddee3d25f29080539"
   integrity sha512-Otv6zrVF3HU54G6FK7OPODcQmKR9KgM6Ppi+ib3gHHB1LZEs2HIdQJYTHP5dGE+yOQWtXS9ZnGmSZDkSFLbkkg==
 
-"@tanstack/react-table@^8.8.5":
-  version "8.9.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.9.3.tgz#03a52e9e15f65c82a8c697a445c42bfca0c5cfc4"
-  integrity sha512-Ng9rdm3JPoSCi6cVZvANsYnF+UoGVRxflMb270tVj0+LjeT/ZtZ9ckxF6oLPLcKesza6VKBqtdF9mQ+vaz24Aw==
-  dependencies:
-    "@tanstack/table-core" "8.9.3"
-
-"@tanstack/table-core@8.9.3":
-  version "8.9.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.9.3.tgz#991da6b015f6200fdc841c48048bee5e197f6a46"
-  integrity sha512-NpHZBoHTfqyJk0m/s/+CSuAiwtebhYK90mDuf5eylTvgViNOujiaOaxNDxJkQQAsVvHWZftUGAx1EfO1rkKtLg==
-
 "@testing-library/dom@^8.3.0", "@testing-library/dom@^8.5.0":
   version "8.20.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"