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/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 ? (
-        rowIds.map((rowId, index) => (
-          <RecoilScope SpecificContext={RowContext} key={rowId}>
-            <EntityTableRow columns={columns} rowId={rowId} index={index} />
-          </RecoilScope>
-        ))
-      ) : (
-        <tr>
-          <td>loading...</td>
-        </tr>
-      )}
+      {!isFetchingEntityTableData
+        ? rowIds.map((rowId, index) => (
+            <RecoilScope SpecificContext={RowContext} key={rowId}>
+              <EntityTableRow columns={columns} rowId={rowId} index={index} />
+            </RecoilScope>
+          ))
+        : null}
     </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>;
 }