Added metadata creation (#2086)

* Reworked metadata creation

* Fix from PR

* Removed consolelog

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

@@ -5,16 +5,16 @@ import { useRecoilState } from 'recoil';
 
 import { tokenPairState } from '@/auth/states/tokenPairState';
 
-import { ApolloClientMetadataContext } from '../context/ApolloClientMetadataContext';
+import { ApolloMetadataClientContext } from '../context/ApolloClientMetadataContext';
 
-export const ApolloClientMetadataProvider = ({
+export const ApolloMetadataClientProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
   const [tokenPair] = useRecoilState(tokenPairState);
 
-  const apolloClientMetadata = useMemo(() => {
+  const apolloMetadataClient = useMemo(() => {
     if (tokenPair?.accessToken.token) {
       return new ApolloClient({
         uri: `${process.env.REACT_APP_SERVER_BASE_URL}/metadata`,
@@ -29,8 +29,8 @@ export const ApolloClientMetadataProvider = ({
   }, [tokenPair]);
 
   return (
-    <ApolloClientMetadataContext.Provider value={apolloClientMetadata}>
+    <ApolloMetadataClientContext.Provider value={apolloMetadataClient}>
       {children}
-    </ApolloClientMetadataContext.Provider>
+    </ApolloMetadataClientContext.Provider>
   );
 };

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

@@ -2,10 +2,10 @@ import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { isFlexibleBackendEnabledState } from '@/client-config/states/isFlexibleBackendEnabledState';
-import { ObjectsQuery } from '~/generated-metadata/graphql';
+import { MetadataObjectsQuery } from '~/generated-metadata/graphql';
 
 import { GET_ALL_OBJECTS } from '../graphql/queries';
-import { useApolloClientMetadata } from '../hooks/useApolloClientMetadata';
+import { useApolloMetadataClient } from '../hooks/useApolloClientMetadata';
 import { useSeedCustomObjectsTemp } from '../hooks/useSeedCustomObjectsTemp';
 import { metadataObjectsState } from '../states/metadataObjectsState';
 import { MetadataObject } from '../types/MetadataObject';
@@ -16,7 +16,7 @@ export const FetchMetadataEffect = () => {
   const [isFlexibleBackendEnabled] = useRecoilState(
     isFlexibleBackendEnabledState,
   );
-  const apolloClientMetadata = useApolloClientMetadata();
+  const apolloMetadataClient = useApolloMetadataClient();
 
   const seedCustomObjectsTemp = useSeedCustomObjectsTemp();
 
@@ -24,8 +24,8 @@ export const FetchMetadataEffect = () => {
     if (!isFlexibleBackendEnabled) return;
 
     (async () => {
-      if (apolloClientMetadata && metadataObjects.length === 0) {
-        const objects = await apolloClientMetadata.query<ObjectsQuery>({
+      if (apolloMetadataClient && metadataObjects.length === 0) {
+        const objects = await apolloMetadataClient.query<MetadataObjectsQuery>({
           query: GET_ALL_OBJECTS,
         });
 
@@ -46,9 +46,10 @@ export const FetchMetadataEffect = () => {
           try {
             await seedCustomObjectsTemp();
 
-            const objects = await apolloClientMetadata.query<ObjectsQuery>({
-              query: GET_ALL_OBJECTS,
-            });
+            const objects =
+              await apolloMetadataClient.query<MetadataObjectsQuery>({
+                query: GET_ALL_OBJECTS,
+              });
 
             const formattedObjects: MetadataObject[] =
               objects.data.objects.edges.map((object) => ({
@@ -68,7 +69,7 @@ export const FetchMetadataEffect = () => {
     isFlexibleBackendEnabled,
     metadataObjects,
     setMetadataObjects,
-    apolloClientMetadata,
+    apolloMetadataClient,
     seedCustomObjectsTemp,
   ]);
 

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

@@ -14,21 +14,23 @@ import { useFindManyCustomObjects } from '../hooks/useFindManyCustomObjects';
 import { useSetObjectDataTableData } from '../hooks/useSetDataTableData';
 
 export const ObjectDataTableEffect = ({
-  objectName,
   objectNameSingular,
+  objectNamePlural,
 }: {
+  objectNamePlural: string;
   objectNameSingular: string;
-  objectName: string;
 }) => {
   const setDataTableData = useSetObjectDataTableData();
 
-  const { data } = useFindManyCustomObjects({ objectName });
+  const { objects } = useFindManyCustomObjects({
+    objectNamePlural: objectNamePlural,
+  });
 
   useEffect(() => {
-    const entities = data?.['findMany' + objectNameSingular]?.edges ?? [];
+    const entities = objects ?? [];
 
     setDataTableData(entities);
-  }, [data, objectNameSingular, setDataTableData]);
+  }, [objects, objectNameSingular, setDataTableData]);
 
   const [searchParams] = useSearchParams();
   const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);

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

@@ -9,11 +9,11 @@ import { useTableViews } from '@/views/hooks/useTableViews';
 import { ObjectDataTableEffect } from './ObjectDataTableEffect';
 
 export const ObjectTable = ({
-  objectName,
+  objectNamePlural,
   objectNameSingular,
 }: {
   objectNameSingular: string;
-  objectName: string;
+  objectNamePlural: string;
 }) => {
   const { createView, deleteView, submitCurrentView, updateView } =
     useTableViews({
@@ -32,7 +32,7 @@ export const ObjectTable = ({
       }}
     >
       <ObjectDataTableEffect
-        objectName={objectName}
+        objectNamePlural={objectNamePlural}
         objectNameSingular={objectNameSingular}
       />
       <ViewBarContext.Provider

front/src/modules/metadata/context/ApolloClientMetadataContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
 
-export const ApolloClientMetadataContext =
+export const ApolloMetadataClientContext =
   createContext<ApolloClient<NormalizedCacheObject> | null>(null);

front/src/modules/metadata/graphql/queries.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_ALL_OBJECTS = gql`
-  query Objects {
-    objects(paging: { first: 100 }) {
+  query MetadataObjects {
+    objects {
       edges {
         node {
           id
@@ -17,7 +17,7 @@ export const GET_ALL_OBJECTS = gql`
           isActive
           createdAt
           updatedAt
-          fields(paging: { first: 100 }) {
+          fields {
             edges {
               node {
                 id

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

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
-import { ApolloClientMetadataContext } from '../context/ApolloClientMetadataContext';
+import { ApolloMetadataClientContext } from '../context/ApolloClientMetadataContext';
 
-export const useApolloClientMetadata = () => {
-  return useContext(ApolloClientMetadataContext);
+export const useApolloMetadataClient = () => {
+  return useContext(ApolloMetadataClientContext);
 };

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

@@ -1,8 +0,0 @@
-// 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/useCreateOneMetadataField.ts

@@ -0,0 +1,41 @@
+import { ApolloClient, useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import {
+  CreateOneFieldMutation,
+  CreateOneFieldMutationVariables,
+} from '~/generated-metadata/graphql';
+
+import { CREATE_ONE_FIELD } from '../graphql/mutations';
+import { GET_ALL_OBJECTS } from '../graphql/queries';
+
+import { useApolloMetadataClient } from './useApolloClientMetadata';
+
+export const useCreateOneMetadataField = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    CreateOneFieldMutation,
+    CreateOneFieldMutationVariables
+  >(CREATE_ONE_FIELD, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const createOneMetadataField = (
+    input: CreateOneFieldMutationVariables['input']['field'],
+  ) =>
+    mutate({
+      variables: {
+        input: {
+          field: {
+            ...input,
+          },
+        },
+      },
+      refetchQueries: [getOperationName(GET_ALL_OBJECTS) ?? ''],
+    });
+
+  return {
+    createOneMetadataField,
+  };
+};

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

@@ -0,0 +1,41 @@
+import { ApolloClient, useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import {
+  CreateOneObjectMutation,
+  CreateOneObjectMutationVariables,
+} from '~/generated-metadata/graphql';
+
+import { CREATE_ONE_OBJECT } from '../graphql/mutations';
+import { GET_ALL_OBJECTS } from '../graphql/queries';
+
+import { useApolloMetadataClient } from './useApolloClientMetadata';
+
+export const useCreateOneMetadataObject = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    CreateOneObjectMutation,
+    CreateOneObjectMutationVariables
+  >(CREATE_ONE_OBJECT, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const createOneMetadataObject = (
+    input: CreateOneObjectMutationVariables['input']['object'],
+  ) =>
+    mutate({
+      variables: {
+        input: {
+          object: {
+            ...input,
+          },
+        },
+      },
+      refetchQueries: [getOperationName(GET_ALL_OBJECTS) ?? ''],
+    });
+
+  return {
+    createOneMetadataObject,
+  };
+};

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

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import {
+  MetadataObjectsQuery,
+  MetadataObjectsQueryVariables,
+} from '~/generated-metadata/graphql';
+
+import { GET_ALL_OBJECTS } from '../graphql/queries';
+import { formatPagedMetadataObjectsToMetadataObjects } from '../utils/formatPagedMetadataObjectsToMetadataObjects';
+
+import { useApolloMetadataClient } from './useApolloClientMetadata';
+
+// TODO: test fetchMore
+export const useFindAllMetadata = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const { data, fetchMore: fetchMoreInternal } = useQuery<
+    MetadataObjectsQuery,
+    MetadataObjectsQueryVariables
+  >(GET_ALL_OBJECTS, {
+    client: apolloMetadataClient ?? ({} as any),
+    skip: !apolloMetadataClient,
+  });
+
+  const hasMore = data?.objects?.pageInfo?.hasNextPage;
+
+  const fetchMore = () =>
+    fetchMoreInternal({
+      variables: {
+        afterCursor: data?.objects?.pageInfo?.endCursor,
+      },
+    });
+
+  const metadataObjects = useMemo(() => {
+    return formatPagedMetadataObjectsToMetadataObjects({
+      pagedMetadataObjects: data,
+    });
+  }, [data]);
+
+  return {
+    metadataObjects,
+    hasMore,
+    fetchMore,
+  };
+};

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

@@ -1,27 +1,28 @@
+import { useMemo } from 'react';
 import { gql, useQuery } from '@apollo/client';
-import { useRecoilState } from 'recoil';
 
-import { metadataObjectsState } from '../states/metadataObjectsState';
+import { PaginatedObjectType } from '../types/PaginatedObjectType';
+import { formatPagedObjectsToObjects } from '../utils/formatPagedObjectsToObjects';
 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);
+import { useFindAllMetadata } from './useFindAllMetadata';
 
-  const foundObject = metadataObjects.find(
-    (object) => object.nameSingular === objectName,
+// TODO: test with a wrong name
+// TODO: add zod to validate that we have at least id on each object
+export const useFindManyCustomObjects = <ObjectType extends { id: string }>({
+  objectNamePlural,
+}: {
+  objectNamePlural: string;
+}) => {
+  const { metadataObjects } = useFindAllMetadata();
+
+  const foundMetadataObject = metadataObjects.find(
+    (object) => object.namePlural === objectNamePlural,
   );
 
-  // eslint-disable-next-line no-console
-  console.log({ foundObject });
-
-  const generatedQuery = foundObject
+  const generatedQuery = foundMetadataObject
     ? generateFindManyCustomObjectsQuery({
-        metadataObject: foundObject,
+        metadataObject: foundMetadataObject,
       })
     : gql`
         query EmptyQuery {
@@ -29,31 +30,29 @@ export const useFindManyCustomObjects = ({
         }
       `;
 
-  const {
-    fetchMore: fetchMoreBase,
-    data,
-    loading,
-    error,
-  } = useQuery(generatedQuery, {
-    skip: !foundObject,
-  });
+  const { data, loading, error } = useQuery<PaginatedObjectType<ObjectType>>(
+    generatedQuery,
+    {
+      skip: !foundMetadataObject,
+    },
+  );
 
-  // eslint-disable-next-line no-console
-  console.log({ data, loading, error });
+  const objects = useMemo(
+    () =>
+      formatPagedObjectsToObjects({
+        pagedObjects: data,
+        objectNamePlural,
+      }),
+    [data, objectNamePlural],
+  );
 
-  const fetchMore = ({ fromCursor }: { fromCursor: string }) => {
-    fetchMoreBase({
-      variables: { fromCursor },
-    });
-  };
-
-  const objectNotFoundInMetadata = metadataObjects.length > 0 && !foundObject;
+  const objectNotFoundInMetadata =
+    metadataObjects.length > 0 && !foundMetadataObject;
 
   return {
-    data,
+    objects,
     loading,
     error,
-    fetchMore,
     objectNotFoundInMetadata,
   };
 };

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

@@ -1,77 +1,39 @@
-import {
-  CreateOneFieldMutation,
-  CreateOneFieldMutationVariables,
-  CreateOneObjectMutation,
-  CreateOneObjectMutationVariables,
-} from '~/generated-metadata/graphql';
-
-import { CREATE_ONE_FIELD, CREATE_ONE_OBJECT } from '../graphql/mutations';
-
-import { useApolloClientMetadata } from './useApolloClientMetadata';
+import { useCreateOneMetadataField } from './useCreateOneMetadataField';
+import { useCreateOneMetadataObject } from './useCreateOneMetadataObject';
 
 export const useSeedCustomObjectsTemp = () => {
-  const client = useApolloClientMetadata();
+  const { createOneMetadataObject } = useCreateOneMetadataObject();
+  const { createOneMetadataField } = useCreateOneMetadataField();
 
   return async () => {
-    if (!client) return;
-
-    const { data: createSuppliersData } = await client?.mutate<
-      CreateOneObjectMutation,
-      CreateOneObjectMutationVariables
-    >({
-      mutation: CREATE_ONE_OBJECT,
-      variables: {
-        input: {
-          object: {
-            labelPlural: 'Suppliers',
-            labelSingular: 'Supplier',
-            nameSingular: 'supplier',
-            namePlural: 'suppliers',
-            description: 'Suppliers',
-            icon: 'IconBuilding',
-          },
-        },
-      },
+    const createdMetadataObject = await createOneMetadataObject({
+      labelPlural: 'Suppliers',
+      labelSingular: 'Supplier',
+      nameSingular: 'supplier',
+      namePlural: 'suppliers',
+      description: 'Suppliers',
+      icon: 'IconBuilding',
     });
 
-    const supplierObjectId = createSuppliersData?.createOneObject?.id ?? '';
+    const supplierObjectId =
+      createdMetadataObject.data?.createOneObject?.id ?? '';
 
-    await client?.mutate<
-      CreateOneFieldMutation,
-      CreateOneFieldMutationVariables
-    >({
-      mutation: CREATE_ONE_FIELD,
-      variables: {
-        input: {
-          field: {
-            objectId: supplierObjectId,
-            label: 'Name',
-            name: 'name',
-            type: 'text',
-            description: 'Name',
-            icon: 'IconBuilding',
-          },
-        },
-      },
+    await createOneMetadataField({
+      objectId: supplierObjectId,
+      name: 'name',
+      type: 'text',
+      description: 'Name',
+      label: 'Name',
+      icon: 'IconBuilding',
     });
 
-    await client?.mutate<
-      CreateOneFieldMutation,
-      CreateOneFieldMutationVariables
-    >({
-      mutation: CREATE_ONE_FIELD,
-      variables: {
-        input: {
-          field: {
-            objectId: supplierObjectId,
-            label: 'City',
-            name: 'city',
-            type: 'text',
-            description: 'City',
-            icon: 'IconMap',
-          },
-        },
-      },
+    await createOneMetadataField({
+      objectId: supplierObjectId,
+      label: 'City',
+      name: 'city',
+      type: 'text',
+      description: 'City',
+      icon: 'IconMap',
     });
   };
 };

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

@@ -18,9 +18,7 @@ export const useSetObjectDataTableData = () => {
 
   return useRecoilCallback(
     ({ set, snapshot }) =>
-      <T extends { node: { id: string } }>(newEntityArrayRaw: T[]) => {
-        const newEntityArray = newEntityArrayRaw.map((entity) => entity.node);
-
+      <T extends { id: string }>(newEntityArray: T[]) => {
         for (const entity of newEntityArray) {
           const currentEntity = snapshot
             .getLoadable(entityFieldsFamilyState(entity.id))
@@ -33,9 +31,6 @@ export const useSetObjectDataTableData = () => {
 
         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;

front/src/modules/metadata/types/PaginatedObjectType.ts

@@ -0,0 +1,8 @@
+export type PaginatedObjectType<ObjectType extends { id: string }> = {
+  [objectNamePlural: string]: {
+    edges: {
+      node: ObjectType;
+      cursor: string;
+    }[];
+  };
+};

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

@@ -0,0 +1,17 @@
+import { MetadataObjectsQuery } from '~/generated-metadata/graphql';
+
+import { MetadataObject } from '../types/MetadataObject';
+
+export const formatPagedMetadataObjectsToMetadataObjects = ({
+  pagedMetadataObjects: pagedMetadataObjects,
+}: {
+  pagedMetadataObjects: MetadataObjectsQuery | undefined;
+}) => {
+  const formattedObjects: MetadataObject[] =
+    pagedMetadataObjects?.objects.edges.map((object) => ({
+      ...object.node,
+      fields: object.node.fields.edges.map((field) => field.node),
+    })) ?? [];
+
+  return formattedObjects;
+};

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

@@ -0,0 +1,24 @@
+export const formatPagedObjectsToObjects = <
+  ObjectType extends { id: string },
+  ObjectTypeQuery extends {
+    [objectNamePlural: string]: {
+      edges: ObjectEdge[];
+    };
+  },
+  ObjectEdge extends {
+    node: ObjectType;
+  },
+>({
+  pagedObjects,
+  objectNamePlural,
+}: {
+  pagedObjects: ObjectTypeQuery | undefined;
+  objectNamePlural: string;
+}) => {
+  const formattedObjects: ObjectType[] =
+    pagedObjects?.[objectNamePlural].edges.map((objectEdge: ObjectEdge) => ({
+      ...objectEdge.node,
+    })) ?? [];
+
+  return formattedObjects;
+};

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

@@ -10,8 +10,8 @@ export const generateFindManyCustomObjectsQuery = ({
   _fromCursor?: string;
 }) => {
   return gql`
-    query CustomQuery${metadataObject.nameSingular} {
-      findMany${metadataObject.nameSingular}{
+    query FindMany${metadataObject.namePlural} {
+      ${metadataObject.namePlural}{
         edges {
           node {
             id

front/src/modules/ui/data/data-table/components/DataTableBody.tsx

@@ -27,9 +27,6 @@ export const DataTableBody = () => {
 
   const tableRowIds = useRecoilValue(tableRowIdsState);
 
-  // eslint-disable-next-line no-console
-  console.log({ tableRowIds });
-
   const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState);
   const isFetchingDataTableData = useRecoilValue(isFetchingDataTableDataState);