fix(metadata-sidebar): fix loading states (#3684)

* fix(metadata-sidebar): fix loading states * fix(metadata-sidebar): fix loading states --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Oct 4, 2024 · 5c54eb5 · 5c54eb5
1 parent 1850977
commit 5c54eb5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 52 deletions.
diff --git a/src/elements/content-sidebar/MetadataSidebarRedesign.tsx b/src/elements/content-sidebar/MetadataSidebarRedesign.tsx
@@ -94,7 +94,7 @@ function MetadataSidebarRedesign({
 
     React.useEffect(() => {
         setSelectedTemplates(templateInstances);
-    }, [templateInstances]);
+    }, [templateInstances, templateInstances.length]);
 
     const handleTemplateSelect = (selectedTemplate: MetadataTemplate) => {
         if (editingTemplate) {
@@ -126,8 +126,8 @@ function MetadataSidebarRedesign({
         }
     };
 
-    const handleDeleteInstance = (metadataInstance: MetadataTemplateInstance) => {
-        handleDeleteMetadataInstance(metadataInstance);
+    const handleDeleteInstance = async (metadataInstance: MetadataTemplateInstance) => {
+        await handleDeleteMetadataInstance(metadataInstance);
         setEditingTemplate(null);
     };
 
@@ -138,11 +138,15 @@ function MetadataSidebarRedesign({
     };
 
     const handleSubmit = async (values: FormValues, operations: JSONPatchOperations) => {
-        isExistingMetadataInstance()
-            ? handleUpdateMetadataInstance(values.metadata as MetadataTemplateInstance, operations, () =>
-                  setEditingTemplate(null),
-              )
-            : handleCreateMetadataInstance(values.metadata as MetadataTemplateInstance, () => setEditingTemplate(null));
+        if (isExistingMetadataInstance()) {
+            await handleUpdateMetadataInstance(values.metadata as MetadataTemplateInstance, operations, () =>
+                setEditingTemplate(null),
+            );
+        } else {
+            await handleCreateMetadataInstance(values.metadata as MetadataTemplateInstance, () =>
+                setEditingTemplate(null),
+            );
+        }
     };
 
     const metadataDropdown = status === STATUS.SUCCESS && templates && (

diff --git a/src/elements/content-sidebar/__tests__/useSidebarMetadataFetcher.test.tsx b/src/elements/content-sidebar/__tests__/useSidebarMetadataFetcher.test.tsx
@@ -182,7 +182,7 @@ describe('useSidebarMetadataFetcher', () => {
         await waitFor(() => result.current.handleDeleteMetadataInstance(mockTemplateInstances[0]));
 
         expect(result.current.templates).toEqual(mockTemplates);
-        expect(result.current.templateInstances).toEqual([]);
+        expect(result.current.status).toEqual(STATUS.SUCCESS);
         expect(result.current.errorMessage).toBeNull();
     });
 

diff --git a/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts b/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts
@@ -21,13 +21,16 @@ export enum STATUS {
 interface DataFetcher {
     errorMessage: MessageDescriptor | null;
     file: BoxItem | null;
-    handleCreateMetadataInstance: (templateInstance: MetadataTemplateInstance, successCallback: () => void) => void;
-    handleDeleteMetadataInstance: (metadataInstance: MetadataTemplateInstance) => void;
+    handleCreateMetadataInstance: (
+        templateInstance: MetadataTemplateInstance,
+        successCallback: () => void,
+    ) => Promise<void>;
+    handleDeleteMetadataInstance: (metadataInstance: MetadataTemplateInstance) => Promise<void>;
     handleUpdateMetadataInstance: (
         metadataTemplateInstance: MetadataTemplateInstance,
         JSONPatch: Array<Object>,
         successCallback: () => void,
-    ) => void;
+    ) => Promise<void>;
     status: STATUS;
     templateInstances: Array<MetadataTemplateInstance>;
     templates: Array<MetadataTemplate>;
@@ -122,59 +125,51 @@ function useSidebarMetadataFetcher(
         [onApiError],
     );
 
-    const deleteMetadataInstanceSuccessCallback = React.useCallback(
-        (metadataInstance: MetadataTemplateInstance) => {
-            const updatedInstances = templateInstances.filter(
-                templateInstance =>
-                    templateInstance.scope !== metadataInstance.scope &&
-                    templateInstance.templateKey !== metadataInstance.templateKey,
-            );
-            setTemplateInstances(updatedInstances);
-        },
-        [templateInstances],
-    );
-
     const handleDeleteMetadataInstance = React.useCallback(
-        (metadataInstance: MetadataTemplateInstance) => {
+        async (metadataInstance: MetadataTemplateInstance): Promise<void> => {
             if (!file || !metadataInstance) {
                 return;
             }
-
-            api.getMetadataAPI(false).deleteMetadata(
-                file,
-                metadataInstance,
-                deleteMetadataInstanceSuccessCallback,
-                onApiError,
-                true,
-            );
+            setStatus(STATUS.LOADING);
+            await api
+                .getMetadataAPI(false)
+                .deleteMetadata(file, metadataInstance, () => setStatus(STATUS.SUCCESS), onApiError, true);
         },
-        [api, onApiError, file, deleteMetadataInstanceSuccessCallback],
+        [api, onApiError, file],
     );
 
     const handleCreateMetadataInstance = React.useCallback(
-        (templateInstance: MetadataTemplateInstance, successCallback): void => {
-            api.getMetadataAPI(false).createMetadataRedesign(
-                file,
-                templateInstance,
-                successCallback,
-                (error: ElementsXhrError, code: string) =>
-                    onApiError(error, code, messages.sidebarMetadataEditingErrorContent),
-            );
+        async (templateInstance: MetadataTemplateInstance, successCallback: () => void): Promise<void> => {
+            await api
+                .getMetadataAPI(false)
+                .createMetadataRedesign(
+                    file,
+                    templateInstance,
+                    successCallback,
+                    (error: ElementsXhrError, code: string) =>
+                        onApiError(error, code, messages.sidebarMetadataEditingErrorContent),
+                );
         },
         [api, file, onApiError],
     );
 
     const handleUpdateMetadataInstance = React.useCallback(
-        (metadataInstance: MetadataTemplateInstance, JSONPatch: JSONPatchOperations, successCallback: () => void) => {
-            api.getMetadataAPI(false).updateMetadataRedesign(
-                file,
-                metadataInstance,
-                JSONPatch,
-                successCallback,
-                (error: ElementsXhrError, code: string) => {
-                    onApiError(error, code, messages.sidebarMetadataEditingErrorContent);
-                },
-            );
+        async (
+            metadataInstance: MetadataTemplateInstance,
+            JSONPatch: JSONPatchOperations,
+            successCallback: () => void,
+        ) => {
+            await api
+                .getMetadataAPI(false)
+                .updateMetadataRedesign(
+                    file,
+                    metadataInstance,
+                    JSONPatch,
+                    successCallback,
+                    (error: ElementsXhrError, code: string) => {
+                        onApiError(error, code, messages.sidebarMetadataEditingErrorContent);
+                    },
+                );
         },
         [api, file, onApiError],
     );