Feat/front forge graphql query

.vscode/settings.json

@@ -5,18 +5,21 @@
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true,
+      "source.addMissingImports": "always"
     }
   },
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true,
+      "source.addMissingImports": "always"
     }
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true,
+      "source.addMissingImports": "always"
     }
   },
   "[json]": {

front/src/App.tsx

@@ -28,6 +28,8 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 import { Tasks } from '~/pages/tasks/Tasks';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
+import { ObjectTablePage } from './pages/companies/ObjectsTable';
+
 export const App = () => {
   const { pathname } = useLocation();
   const pageTitle = getPageTitleFromPath(pathname);
@@ -54,6 +56,16 @@ export const App = () => {
           <Route path={AppPath.Impersonate} element={<ImpersonateEffect />} />
 
           <Route path={AppPath.OpportunitiesPage} element={<Opportunities />} />
+          <Route
+            path={AppPath.ObjectTablePage}
+            element={
+              <ObjectTablePage
+                objectName="supplier"
+                objectNameSingular="Supplier"
+              />
+            }
+          />
+
           <Route
             path={AppPath.SettingsCatchAll}
             element={

front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx

@@ -186,3 +186,39 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
       infoTooltipContent: 'The company Twitter account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
   ];
+
+export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
+  [
+    {
+      key: 'name',
+      name: 'Name',
+      Icon: IconBuildingSkyscraper,
+      size: 180,
+      index: 0,
+      type: 'text',
+      metadata: {
+        fieldName: 'name',
+        placeHolder: 'Company Name',
+      },
+      isVisible: true,
+      buttonIcon: IconArrowUpRight,
+      infoTooltipContent: 'The company name.',
+      basePathToShowPage: '/companies/',
+    } satisfies ColumnDefinition<FieldTextMetadata>,
+    {
+      key: 'city',
+      name: 'City',
+      Icon: IconBuildingSkyscraper,
+      size: 180,
+      index: 0,
+      type: 'text',
+      metadata: {
+        fieldName: 'city',
+        placeHolder: 'Company Name',
+      },
+      isVisible: true,
+      buttonIcon: IconArrowUpRight,
+      infoTooltipContent: 'The company name.',
+      basePathToShowPage: '/companies/',
+    } satisfies ColumnDefinition<FieldTextMetadata>,
+  ];

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],
+  );
+};

front/src/modules/metadata/hooks/useCreateOneCustomObject.ts

@@ -0,0 +1,8 @@
+// TODO: add zod to validate that we have at least id on each object
+export const useCreateOneCustomObject = ({
+  _objectName,
+}: {
+  _objectName: string;
+}) => {
+  // TODO : code
+};

front/src/modules/metadata/hooks/useFindManyCustomObjects.ts

@@ -0,0 +1,59 @@
+import { gql, useQuery } from '@apollo/client';
+import { useRecoilState } from 'recoil';
+
+import { metadataObjectsState } from '../states/metadataObjectsState';
+import { generateFindManyCustomObjectsQuery } from '../utils/generateFindManyCustomObjectsQuery';
+
+// TODO: add zod to validate that we have at least id on each object
+export const useFindManyCustomObjects = ({
+  objectName,
+}: {
+  objectName: string;
+}) => {
+  const [metadataObjects] = useRecoilState(metadataObjectsState);
+
+  const foundObject = metadataObjects.find(
+    (object) => object.nameSingular === objectName,
+  );
+
+  // eslint-disable-next-line no-console
+  console.log({ foundObject });
+
+  const generatedQuery = foundObject
+    ? generateFindManyCustomObjectsQuery({
+        metadataObject: foundObject,
+      })
+    : gql`
+        query EmptyQuery {
+          empty
+        }
+      `;
+
+  const {
+    fetchMore: fetchMoreBase,
+    data,
+    loading,
+    error,
+  } = useQuery(generatedQuery, {
+    skip: !foundObject,
+  });
+
+  // eslint-disable-next-line no-console
+  console.log({ data, loading, error });
+
+  const fetchMore = ({ fromCursor }: { fromCursor: string }) => {
+    fetchMoreBase({
+      variables: { fromCursor },
+    });
+  };
+
+  const objectNotFoundInMetadata = metadataObjects.length > 0 && !foundObject;
+
+  return {
+    data,
+    loading,
+    error,
+    fetchMore,
+    objectNotFoundInMetadata,
+  };
+};

front/src/modules/metadata/utils/generateFindManyCustomObjectsQuery.ts

@@ -0,0 +1,27 @@
+import { gql } from '@apollo/client';
+
+import { MetadataObject } from '../types/MetadataObject';
+
+export const generateFindManyCustomObjectsQuery = ({
+  metadataObject,
+  _fromCursor,
+}: {
+  metadataObject: MetadataObject;
+  _fromCursor?: string;
+}) => {
+  return gql`
+    query CustomQuery${metadataObject.nameSingular} {
+      findMany${metadataObject.nameSingular}{
+        edges {
+          node {
+            id
+            ${metadataObject.fields
+              .map((field) => field.nameSingular)
+              .join('\n')}
+          }
+          cursor
+        }
+      }
+    }
+  `;
+};

front/src/modules/types/AppPath.ts

@@ -17,6 +17,8 @@ export enum AppPath {
   PersonShowPage = '/person/:personId',
   TasksPage = '/tasks',
   OpportunitiesPage = '/opportunities',
+  ObjectTablePage = '/:objectName',
+
   SettingsCatchAll = `/settings/*`,
 
   // Impersonate