Feat/front forge graphql query (#2007)

* wip

* Wip

* Wip

* Finished v1

* Wip

* Fix from PR

* Removed unused fragment masking feature

* Fix from PR

* Removed POC from nav bar

* Fix lint

---------

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

front/src/modules/metadata/components/FetchMetadataEffect.tsx

@@ -21,7 +21,10 @@ export const FetchMetadataEffect = () => {
           query: GET_ALL_OBJECTS,
         });
 
-        if (objects.data.objects.edges.length > 0) {
+        if (
+          objects.data.objects.edges.length > 0 &&
+          metadataObjects.length === 0
+        ) {
           const formattedObjects: MetadataObject[] =
             objects.data.objects.edges.map((object) => ({
               ...object.node,

front/src/modules/metadata/components/ObjectDataTableEffect.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
+
+import { useFindManyCustomObjects } from '../hooks/useFindManyCustomObjects';
+
+import { useSetObjectDataTableData } from './useSetDataTableData';
+
+export const ObjectDataTableEffect = ({
+  objectName,
+  objectNameSingular,
+}: {
+  objectNameSingular: string;
+  objectName: string;
+}) => {
+  const setDataTableData = useSetObjectDataTableData();
+
+  const { data } = useFindManyCustomObjects({ objectName });
+
+  useEffect(() => {
+    const entities = data?.['findMany' + objectNameSingular]?.edges ?? [];
+
+    setDataTableData(entities);
+  }, [data, objectNameSingular, setDataTableData]);
+
+  const [searchParams] = useSearchParams();
+  const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);
+  const handleViewSelect = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async (viewId: string) => {
+        const currentView = await snapshot.getPromise(
+          currentViewIdScopedState(tableRecoilScopeId),
+        );
+        if (currentView === viewId) {
+          return;
+        }
+
+        const savedFilters = await snapshot.getPromise(
+          savedFiltersFamilyState(viewId),
+        );
+        const savedSorts = await snapshot.getPromise(
+          savedSortsFamilyState(viewId),
+        );
+
+        set(filtersScopedState(tableRecoilScopeId), savedFilters);
+        set(sortsScopedState(tableRecoilScopeId), savedSorts);
+        set(currentViewIdScopedState(tableRecoilScopeId), viewId);
+      },
+    [tableRecoilScopeId],
+  );
+
+  useEffect(() => {
+    const viewId = searchParams.get('view');
+    if (viewId) {
+      handleViewSelect(viewId);
+    }
+  }, [handleViewSelect, searchParams]);
+
+  return <></>;
+};

front/src/modules/metadata/components/ObjectTable.tsx

@@ -0,0 +1,57 @@
+import { suppliersAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
+import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
+import { DataTable } from '@/ui/data-table/components/DataTable';
+import { TableContext } from '@/ui/data-table/contexts/TableContext';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
+import { useTableViews } from '@/views/hooks/useTableViews';
+
+import { ObjectDataTableEffect } from './ObjectDataTableEffect';
+
+export const ObjectTable = ({
+  objectName,
+  objectNameSingular,
+}: {
+  objectNameSingular: string;
+  objectName: string;
+}) => {
+  const { createView, deleteView, submitCurrentView, updateView } =
+    useTableViews({
+      objectId: 'company',
+      columnDefinitions: suppliersAvailableColumnDefinitions,
+    });
+
+  const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
+
+  return (
+    <TableContext.Provider
+      value={{
+        onColumnsChange: () => {
+          //
+        },
+      }}
+    >
+      <ObjectDataTableEffect
+        objectName={objectName}
+        objectNameSingular={objectNameSingular}
+      />
+      <ViewBarContext.Provider
+        value={{
+          defaultViewName: 'All Suppliers',
+          onCurrentViewSubmit: submitCurrentView,
+          onViewCreate: createView,
+          onViewEdit: updateView,
+          onViewRemove: deleteView,
+          onImport: openCompanySpreadsheetImport,
+          ViewBarRecoilScopeContext: TableRecoilScopeContext,
+        }}
+      >
+        <DataTable
+          updateEntityMutation={() => {
+            //
+          }}
+        />
+      </ViewBarContext.Provider>
+    </TableContext.Provider>
+  );
+};

front/src/modules/metadata/components/useSetDataTableData.ts

@@ -0,0 +1,61 @@
+import { useRecoilCallback } from 'recoil';
+
+import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
+import { isFetchingDataTableDataState } from '@/ui/data-table/states/isFetchingDataTableDataState';
+import { numberOfTableRowsState } from '@/ui/data-table/states/numberOfTableRowsState';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState';
+import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
+import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
+import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState';
+import { entityCountInCurrentViewState } from '@/ui/view-bar/states/entityCountInCurrentViewState';
+
+export const useSetObjectDataTableData = () => {
+  const resetTableRowSelection = useResetTableRowSelection();
+
+  const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
+
+  return useRecoilCallback(
+    ({ set, snapshot }) =>
+      <T extends { node: { id: string } }>(newEntityArrayRaw: T[]) => {
+        const newEntityArray = newEntityArrayRaw.map((entity) => entity.node);
+
+        for (const entity of newEntityArray) {
+          const currentEntity = snapshot
+            .getLoadable(entityFieldsFamilyState(entity.id))
+            .valueOrThrow();
+
+          if (JSON.stringify(currentEntity) !== JSON.stringify(entity)) {
+            set(entityFieldsFamilyState(entity.id), entity);
+          }
+        }
+
+        const entityIds = newEntityArray.map((entity) => entity.id);
+
+        // eslint-disable-next-line no-console
+        console.log({ newEntityArray, entityIds });
+
+        set(tableRowIdsState, (currentRowIds) => {
+          if (JSON.stringify(currentRowIds) !== JSON.stringify(entityIds)) {
+            return entityIds;
+          }
+
+          return currentRowIds;
+        });
+
+        resetTableRowSelection();
+
+        set(numberOfTableRowsState, entityIds.length);
+
+        set(entityCountInCurrentViewState, entityIds.length);
+
+        set(availableFiltersScopedState(tableContextScopeId), []);
+
+        set(availableSortsScopedState(tableContextScopeId), []);
+
+        set(isFetchingDataTableDataState, false);
+      },
+    [resetTableRowSelection, tableContextScopeId],
+  );
+};