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/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx

@@ -0,0 +1,34 @@
+import { TbTrash } from 'react-icons/tb';
+import { EntityTableActionBarButton } from '../../../components/table/action-bar/EntityTableActionBarButton';
+import { useDeleteCompaniesMutation } from '../../../generated/graphql';
+import { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
+import { useRecoilValue } from 'recoil';
+import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
+
+export function TableActionBarButtonDeleteCompanies() {
+  const selectedRowIds = useRecoilValue(selectedRowIdsState);
+
+  const resetRowSelection = useResetTableRowSelection();
+
+  const [deleteCompanies] = useDeleteCompaniesMutation({
+    refetchQueries: ['GetCompanies'],
+  });
+
+  async function handleDeleteClick() {
+    await deleteCompanies({
+      variables: {
+        ids: selectedRowIds,
+      },
+    });
+
+    resetRowSelection();
+  }
+
+  return (
+    <EntityTableActionBarButton
+      label="Delete"
+      icon={<TbTrash size={16} />}
+      onClick={handleDeleteClick}
+    />
+  );
+}