Feat/metadata add update and delete on frontend (#2102)

* Reworked metadata creation

* Wip

* Fix from PR

* Removed consolelog

* Post merge

* Fixed seeds

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+import { gql, useMutation } from '@apollo/client';
+
+import { generateCreateOneObjectMutation } from '../utils/generateCreateOneObjectMutation';
+
+import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
+
+export const useCreateOneObject = ({
+  objectNamePlural,
+}: {
+  objectNamePlural: string;
+}) => {
+  const { metadataObjects } = useFindManyMetadataObjects();
+
+  const foundMetadataObject = metadataObjects.find(
+    (object) => object.namePlural === objectNamePlural,
+  );
+
+  const generatedMutation = foundMetadataObject
+    ? generateCreateOneObjectMutation({
+        metadataObject: foundMetadataObject,
+      })
+    : gql`
+        mutation EmptyMutation {
+          empty
+        }
+      `;
+
+  const [mutate] = useMutation(generatedMutation);
+
+  const createOneObject = foundMetadataObject
+    ? (input: Record<string, any>) => {
+        return mutate({
+          variables: {
+            input: {
+              ...input,
+            },
+          },
+        });
+      }
+    : undefined;
+
+  const objectNotFoundInMetadata =
+    metadataObjects.length > 0 && !foundMetadataObject;
+
+  return {
+    createOneObject,
+    objectNotFoundInMetadata,
+  };
+};

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

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import {
+  MetadataObjectsQuery,
+  MetadataObjectsQueryVariables,
+} from '~/generated-metadata/graphql';
+
+import { FIND_MANY_METADATA_OBJECTS } from '../graphql/queries';
+import { formatPagedMetadataObjectsToMetadataObjects } from '../utils/formatPagedMetadataObjectsToMetadataObjects';
+
+import { useApolloMetadataClient } from './useApolloMetadataClient';
+
+// TODO: test fetchMore
+export const useFindManyMetadataObjects = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const { data, fetchMore: fetchMoreInternal } = useQuery<
+    MetadataObjectsQuery,
+    MetadataObjectsQueryVariables
+  >(FIND_MANY_METADATA_OBJECTS, {
+    client: apolloMetadataClient ?? undefined,
+    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]);
+
+  const getMetadataObjectsFromCache = () => {
+    const queryResult = apolloMetadataClient?.readQuery<
+      MetadataObjectsQuery,
+      MetadataObjectsQueryVariables
+    >({
+      query: FIND_MANY_METADATA_OBJECTS,
+    });
+
+    return formatPagedMetadataObjectsToMetadataObjects({
+      pagedMetadataObjects: queryResult ?? undefined,
+    });
+  };
+
+  return {
+    metadataObjects,
+    hasMore,
+    fetchMore,
+    getMetadataObjectsFromCache,
+  };
+};

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

@@ -5,16 +5,18 @@ import { PaginatedObjectType } from '../types/PaginatedObjectType';
 import { formatPagedObjectsToObjects } from '../utils/formatPagedObjectsToObjects';
 import { generateFindManyCustomObjectsQuery } from '../utils/generateFindManyCustomObjectsQuery';
 
-import { useFindAllMetadata } from './useFindAllMetadata';
+import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
 
 // 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 }>({
+export const useFindManyObjects = <
+  ObjectType extends { id: string } & Record<string, any>,
+>({
   objectNamePlural,
 }: {
   objectNamePlural: string;
 }) => {
-  const { metadataObjects } = useFindAllMetadata();
+  const { metadataObjects } = useFindManyMetadataObjects();
 
   const foundMetadataObject = metadataObjects.find(
     (object) => object.namePlural === objectNamePlural,

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

@@ -1,39 +1,75 @@
+import { isNonEmptyArray } from '~/utils/isNonEmptyArray';
+
 import { useCreateOneMetadataField } from './useCreateOneMetadataField';
 import { useCreateOneMetadataObject } from './useCreateOneMetadataObject';
+import { useUpdateOneMetadataField } from './useUpdateOneMetadataField';
+import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
 
 export const useSeedCustomObjectsTemp = () => {
   const { createOneMetadataObject } = useCreateOneMetadataObject();
   const { createOneMetadataField } = useCreateOneMetadataField();
 
+  const { updateOneMetadataObject } = useUpdateOneMetadataObject();
+  const { updateOneMetadataField } = useUpdateOneMetadataField();
+
   return async () => {
-    const createdMetadataObject = await createOneMetadataObject({
-      labelPlural: 'Suppliers',
-      labelSingular: 'Supplier',
-      nameSingular: 'supplier',
-      namePlural: 'suppliers',
-      description: 'Suppliers',
-      icon: 'IconBuilding',
-    });
+    const { data: createdMetadataObject, errors } =
+      await createOneMetadataObject({
+        labelPlural: 'Suppliers',
+        labelSingular: 'Supplier',
+        nameSingular: 'supplier',
+        namePlural: 'suppliers',
+        description: 'Suppliers',
+        icon: 'IconBuilding',
+      });
 
-    const supplierObjectId =
-      createdMetadataObject.data?.createOneObject?.id ?? '';
+    if (!isNonEmptyArray(errors)) {
+      const supplierObjectId = createdMetadataObject?.createOneObject?.id ?? '';
 
-    await createOneMetadataField({
-      objectId: supplierObjectId,
-      name: 'name',
-      type: 'text',
-      description: 'Name',
-      label: 'Name',
-      icon: 'IconBuilding',
-    });
+      const { data: createNameFieldData } = await createOneMetadataField({
+        objectId: supplierObjectId,
+        name: 'name',
+        type: 'text',
+        description: 'Name',
+        label: 'Name',
+        icon: 'IconBuilding',
+      });
 
-    await createOneMetadataField({
-      objectId: supplierObjectId,
-      label: 'City',
-      name: 'city',
-      type: 'text',
-      description: 'City',
-      icon: 'IconMap',
-    });
+      const nameFieldId = createNameFieldData?.createOneField.id ?? '';
+
+      const { data: createCityFieldData } = await createOneMetadataField({
+        objectId: supplierObjectId,
+        label: 'City',
+        name: 'city',
+        type: 'text',
+        description: 'City',
+        icon: 'IconMap',
+      });
+
+      const cityFieldId = createCityFieldData?.createOneField.id ?? '';
+
+      await updateOneMetadataObject({
+        idToUpdate: supplierObjectId,
+        updatePayload: {
+          labelPlural: 'Suppliers 2',
+        },
+      });
+
+      await updateOneMetadataField({
+        objectIdToUpdate: supplierObjectId,
+        fieldIdToUpdate: cityFieldId,
+        updatePayload: {
+          label: 'City 2',
+        },
+      });
+
+      await updateOneMetadataField({
+        objectIdToUpdate: supplierObjectId,
+        fieldIdToUpdate: nameFieldId,
+        updatePayload: {
+          label: 'Name 2',
+        },
+      });
+    }
   };
 };

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

@@ -0,0 +1,76 @@
+import { useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import {
+  UpdateOneMetadataFieldMutation,
+  UpdateOneMetadataFieldMutationVariables,
+} from '~/generated-metadata/graphql';
+
+import { UPDATE_ONE_METADATA_FIELD } from '../graphql/mutations';
+import { FIND_MANY_METADATA_OBJECTS } from '../graphql/queries';
+
+import { useApolloMetadataClient } from './useApolloMetadataClient';
+import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
+
+export const useUpdateOneMetadataField = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const { getMetadataObjectsFromCache } = useFindManyMetadataObjects();
+
+  const [mutate] = useMutation<
+    UpdateOneMetadataFieldMutation,
+    UpdateOneMetadataFieldMutationVariables
+  >(UPDATE_ONE_METADATA_FIELD, {
+    client: apolloMetadataClient ?? undefined,
+  });
+
+  const updateOneMetadataField = ({
+    objectIdToUpdate,
+    fieldIdToUpdate,
+    updatePayload,
+  }: {
+    objectIdToUpdate: string;
+    fieldIdToUpdate: UpdateOneMetadataFieldMutationVariables['idToUpdate'];
+    updatePayload: Partial<
+      Pick<
+        UpdateOneMetadataFieldMutationVariables['updatePayload'],
+        'description' | 'icon' | 'isActive' | 'label'
+      >
+    >;
+  }) => {
+    const metadataObjects = getMetadataObjectsFromCache();
+
+    const foundMetadataObject = metadataObjects.find(
+      (metadataObject) => metadataObject.id === objectIdToUpdate,
+    );
+
+    if (!foundMetadataObject)
+      throw new Error(`Metadata object with id ${objectIdToUpdate} not found`);
+
+    const foundMetadataField = foundMetadataObject.fields.find(
+      (metadataField) => metadataField.id === fieldIdToUpdate,
+    );
+
+    if (!foundMetadataField)
+      throw new Error(`Metadata field with id ${fieldIdToUpdate} not found`);
+
+    return mutate({
+      variables: {
+        idToUpdate: fieldIdToUpdate,
+        updatePayload: {
+          name: foundMetadataField.name,
+          description: foundMetadataField.description,
+          icon: foundMetadataField.icon,
+          isActive: foundMetadataField.isActive,
+          label: foundMetadataField.label,
+          ...updatePayload,
+        },
+      },
+      refetchQueries: [getOperationName(FIND_MANY_METADATA_OBJECTS) ?? ''],
+    });
+  };
+
+  return {
+    updateOneMetadataField,
+  };
+};

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

@@ -0,0 +1,71 @@
+import { useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import {
+  UpdateOneMetadataObjectMutation,
+  UpdateOneMetadataObjectMutationVariables,
+} from '~/generated-metadata/graphql';
+
+import { UPDATE_ONE_METADATA_OBJECT } from '../graphql/mutations';
+import { FIND_MANY_METADATA_OBJECTS } from '../graphql/queries';
+
+import { useApolloMetadataClient } from './useApolloMetadataClient';
+import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
+
+// TODO: Slice the Apollo store synchronously in the update function instead of subscribing, so we can use update after read in the same function call
+export const useUpdateOneMetadataObject = () => {
+  const apolloClientMetadata = useApolloMetadataClient();
+
+  const { getMetadataObjectsFromCache: queryMetadataObjects } =
+    useFindManyMetadataObjects();
+
+  const [mutate] = useMutation<
+    UpdateOneMetadataObjectMutation,
+    UpdateOneMetadataObjectMutationVariables
+  >(UPDATE_ONE_METADATA_OBJECT, {
+    client: apolloClientMetadata ?? undefined,
+  });
+
+  const updateOneMetadataObject = ({
+    idToUpdate,
+    updatePayload,
+  }: {
+    idToUpdate: UpdateOneMetadataObjectMutationVariables['idToUpdate'];
+    updatePayload: Partial<
+      Pick<
+        UpdateOneMetadataObjectMutationVariables['updatePayload'],
+        'description' | 'icon' | 'isActive' | 'labelPlural' | 'labelSingular'
+      >
+    >;
+  }) => {
+    const metadataObjects = queryMetadataObjects();
+
+    const foundMetadataObject = metadataObjects.find(
+      (metadataObject) => metadataObject.id === idToUpdate,
+    );
+
+    if (!foundMetadataObject)
+      throw new Error(`Metadata object with id ${idToUpdate} not found`);
+
+    return mutate({
+      variables: {
+        idToUpdate,
+        updatePayload: {
+          namePlural: foundMetadataObject.namePlural,
+          nameSingular: foundMetadataObject.nameSingular,
+          description: foundMetadataObject.description,
+          icon: foundMetadataObject.icon,
+          isActive: foundMetadataObject.isActive,
+          labelPlural: foundMetadataObject.labelPlural,
+          labelSingular: foundMetadataObject.labelSingular,
+          ...updatePayload,
+        },
+      },
+      refetchQueries: [getOperationName(FIND_MANY_METADATA_OBJECTS) ?? ''],
+    });
+  };
+
+  return {
+    updateOneMetadataObject,
+  };
+};