Refactor/remove react table (#642)

* Refactored tables without tan stack
* Fixed checkbox behavior with multiple handlers on click
* Fixed hotkeys scope
* Fix debounce in editable cells
* Lowered coverage

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/components/editable-cell/CellSkeleton.tsx

@@ -0,0 +1,9 @@
+import Skeleton from 'react-loading-skeleton';
+
+export function CellSkeleton() {
+  return (
+    <div style={{ width: '100%', alignItems: 'center' }}>
+      <Skeleton />
+    </div>
+  );
+}

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

@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 
+import { CellSkeleton } from '../CellSkeleton';
 import { EditableCell } from '../EditableCell';
 
 import { EditableCellDoubleTextEditMode } from './EditableCellDoubleTextEditMode';
@@ -13,6 +14,7 @@ type OwnProps = {
   secondValuePlaceholder: string;
   nonEditModeContent: ReactElement;
   onChange: (firstValue: string, secondValue: string) => void;
+  loading?: boolean;
 };
 
 export function EditableCellDoubleText({
@@ -22,20 +24,30 @@ export function EditableCellDoubleText({
   secondValuePlaceholder,
   onChange,
   nonEditModeContent,
+  loading,
 }: OwnProps) {
+  const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
+  const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
+
+  function handleOnChange(firstValue: string, secondValue: string): void {
+    setFirstInternalValue(firstValue);
+    setSecondInternalValue(secondValue);
+    onChange(firstValue, secondValue);
+  }
+
   return (
     <EditableCell
       editHotkeysScope={{ scope: InternalHotkeysScope.CellDoubleTextInput }}
       editModeContent={
         <EditableCellDoubleTextEditMode
-          firstValue={firstValue}
-          secondValue={secondValue}
+          firstValue={firstInternalValue}
+          secondValue={secondInternalValue}
           firstValuePlaceholder={firstValuePlaceholder}
           secondValuePlaceholder={secondValuePlaceholder}
-          onChange={onChange}
+          onChange={handleOnChange}
         />
       }
-      nonEditModeContent={nonEditModeContent}
+      nonEditModeContent={loading ? <CellSkeleton /> : nonEditModeContent}
     ></EditableCell>
   );
 }

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 
 import { InplaceInputPhoneDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputPhoneDisplayMode';
 import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
@@ -8,17 +8,17 @@ import { EditableCell } from '../EditableCell';
 type OwnProps = {
   placeholder?: string;
   value: string;
-  changeHandler: (updated: string) => void;
+  onChange: (updated: string) => void;
 };
 
-export function EditableCellPhone({
-  value,
-  placeholder,
-  changeHandler,
-}: OwnProps) {
+export function EditableCellPhone({ value, placeholder, onChange }: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   return (
     <EditableCell
       editModeContent={
@@ -29,7 +29,7 @@ export function EditableCellPhone({
           value={inputValue}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             setInputValue(event.target.value);
-            changeHandler(event.target.value);
+            onChange(event.target.value);
           }}
         />
       }

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

@@ -1,9 +1,9 @@
-import { ChangeEvent, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 
 import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
 import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
-import { debounce } from '@/utils/debounce';
 
+import { CellSkeleton } from '../CellSkeleton';
 import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
@@ -11,6 +11,7 @@ type OwnProps = {
   value: string;
   onChange: (newValue: string) => void;
   editModeHorizontalAlign?: 'left' | 'right';
+  loading?: boolean;
 };
 
 export function EditableCellText({
@@ -18,12 +19,13 @@ export function EditableCellText({
   placeholder,
   onChange,
   editModeHorizontalAlign,
+  loading,
 }: OwnProps) {
   const [internalValue, setInternalValue] = useState(value);
 
-  const debouncedOnChange = useMemo(() => {
-    return debounce(onChange, 200);
-  }, [onChange]);
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
 
   return (
     <EditableCell
@@ -35,14 +37,18 @@ export function EditableCellText({
           value={internalValue}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             setInternalValue(event.target.value);
-            debouncedOnChange(event.target.value);
+            onChange(event.target.value);
           }}
         />
       }
       nonEditModeContent={
-        <InplaceInputTextDisplayMode>
-          {internalValue}
-        </InplaceInputTextDisplayMode>
+        loading ? (
+          <CellSkeleton />
+        ) : (
+          <InplaceInputTextDisplayMode>
+            {internalValue}
+          </InplaceInputTextDisplayMode>
+        )
       }
     ></EditableCell>
   );

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

@@ -1,4 +1,11 @@
-import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  ComponentType,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
@@ -55,6 +62,10 @@ export function EditableCellChip({
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   const handleRightEndContentClick = (
     event: React.MouseEvent<HTMLDivElement>,
   ) => {