Lucas/refactored table state with recoil (#149)

* Fixed ActionBar paddings and added transition on button hover

* Added recoil library for state management

* Refactor table state with recoil :

- Removed table internal states
- Added refetchQueries to plug apollo store directly into tables
- Added an action bar component that manages itself
- Use recoil state and selector for row selection
- Refactored Companies and People tables

* Moved hook

* Cleaned some files

* Fix bug infinite re-compute table row selection

---------

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

front/src/modules/ui/common/hooks/useListenClickOutsideArrayOfRef.ts

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { isDefined } from '../../utils/type-guards/isDefined';
+import { isDefined } from '../../../utils/type-guards/isDefined';
 
 export function useListenClickOutsideArrayOfRef<T extends HTMLElement>(
   arrayOfRef: Array<React.RefObject<T>>,

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

@@ -0,0 +1,16 @@
+import { useSetRecoilState } from 'recoil';
+import { currentRowSelectionState } from '../states/rowSelectionState';
+import { useCallback, useMemo } from 'react';
+
+export function useResetTableRowSelection() {
+  const setCurrentRowSelectionState = useSetRecoilState(
+    currentRowSelectionState,
+  );
+
+  return useCallback(
+    function resetCurrentRowSelection() {
+      setCurrentRowSelectionState({});
+    },
+    [setCurrentRowSelectionState],
+  );
+}

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

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

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

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