make mutation on change of file

Author: aashimgarg

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx

@@ -63,16 +63,23 @@ export const EditResource = ({ reload, data }: any) => {
   const [schema, setSchema] = React.useState([]);
 
   const { mutate, isLoading } = useMutation(
-    (data: { fileResourceInput: UpdateFileResourceInput }) =>
-      GraphQL(updateResourceDoc, data),
+    (data: {
+      fileResourceInput: UpdateFileResourceInput;
+      isResetSchema: boolean;
+    }) => GraphQL(updateResourceDoc, data),
     {
-      onSuccess: () => {
+      onSuccess: (data, variables) => {
         toast('File changes saved', {
           action: {
             label: 'Dismiss',
             onClick: () => {},
           },
         });
+        if (variables.isResetSchema) {
+          schemaMutate({
+            resourceId: resourceId,
+          });
+        }
         reload();
       },
       onError: (err: any) => {
@@ -81,6 +88,34 @@ export const EditResource = ({ reload, data }: any) => {
     }
   );
 
+  const resetSchema: any = graphql(`
+    mutation resetFileResourceSchema($resourceId: UUID!) {
+      resetFileResourceSchema(resourceId: $resourceId) {
+        ... on TypeResource {
+          id
+          schema {
+            format
+            description
+            id
+            fieldName
+          }
+        }
+      }
+    }
+  `);
+
+  const { mutate: schemaMutate, isLoading: isSchemaLoading } = useMutation(
+    (data: { resourceId: string }) => GraphQL(resetSchema, data),
+    {
+      onSuccess: () => {
+        refetch();
+      },
+      onError: (err: any) => {
+        console.log('Error ::: ', err);
+      },
+    }
+  );
+
   const {
     data: payload,
     refetch,
@@ -133,6 +168,7 @@ export const EditResource = ({ reload, data }: any) => {
             onClick: () => {},
           },
         });
+        refetch();
         reload();
       },
       onError: (err: any) => {
@@ -204,17 +240,20 @@ export const EditResource = ({ reload, data }: any) => {
     </div>
   );
 
-  const [resourceFile, setResourceFile] = React.useState<File>();
 
   const onDrop = React.useCallback(
-    (_dropFiles: File[], acceptedFiles: File[]) =>
-      setResourceFile(acceptedFiles[0]),
+    (_dropFiles: File[], acceptedFiles: File[]) => {
+      mutate({
+        fileResourceInput: {
+          id: resourceId,
+          file: acceptedFiles[0],
+        },
+        isResetSchema: true,
+      });
+    },
     []
   );
-
-  const fileInput = resourceFile ? (
-    <div className="flex ">{resourceFile.name} </div>
-  ) : (
+  const fileInput = (
     <div className="flex">
       <Text className="break-all">
         {getResourceObject(resourceId)?.fileDetails.file.name.replace(
@@ -239,14 +278,18 @@ export const EditResource = ({ reload, data }: any) => {
         name: resourceName
           ? resourceName
           : getResourceObject(resourceId)?.label,
-        file: resourceFile,
       },
+      isResetSchema: false,
     });
     if (schema.length > 0) {
+      const updatedScheme = schema.map((item) => {
+        const { fieldName, ...rest } = item as any;
+        return rest;
+      });
       modify({
         input: {
           resource: resourceId,
-          updates: schema,
+          updates: updatedScheme,
         },
       });
     }
@@ -425,7 +468,8 @@ export const EditResource = ({ reload, data }: any) => {
           setSchema={setSchema}
           resourceId={resourceId}
           isPending={isPending}
-          refetch={refetch}
+          schemaMutate={schemaMutate}
+          isSchemaLoading={isSchemaLoading}
           data={
             payload?.datasetResources?.filter(
               (item: any) => item.id === resourceId

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSchema.tsx

@@ -60,13 +60,14 @@ export const ResourceSchema = ({
   resourceId,
   isPending,
   data,
-  refetch,
+  schemaMutate,
+  isSchemaLoading
 }: any) => {
 
   const [updatedData, setUpdatedData] = React.useState<any>(data);
 
   React.useEffect(() => {
-    if (data && data.length > 0) {
+    if (data) {
       setUpdatedData(data);
     }
   }, [data]);
@@ -87,35 +88,6 @@ export const ResourceSchema = ({
   };
 
   setSchema(updatedData);
-
-  const resetSchema: any = graphql(`
-    mutation resetFileResourceSchema($resourceId: UUID!) {
-      resetFileResourceSchema(resourceId: $resourceId) {
-        ... on TypeResource {
-          id
-          schema {
-            format
-            description
-            id
-            fieldName
-          }
-        }
-      }
-    }
-  `);
-
-  const { mutate, isLoading } = useMutation(
-    (data: { resourceId: string }) => GraphQL(resetSchema, data),
-    {
-      onSuccess: () => {
-        refetch();
-      },
-      onError: (err: any) => {
-        console.log('Error ::: ', err);
-      },
-    }
-  );
-
   const options = [
     {
       label: 'Integer',
@@ -178,7 +150,7 @@ export const ResourceSchema = ({
   };
 
   const setFields = () => {
-    mutate({
+    schemaMutate({
       resourceId: resourceId,
     });
   };
@@ -206,7 +178,7 @@ export const ResourceSchema = ({
         be changed in Access Models.
       </Text>
       <div className="mt-3">
-        {isPending || isLoading ? (
+        {isPending || isSchemaLoading ? (
           <div className=" mt-8 flex justify-center">
             <Spinner size={30} />
           </div>