-
Notifications
You must be signed in to change notification settings - Fork 305
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(metadata-sidebar): fix loading states #3684
Changes from all commits
961a372
aa1e43b
9344ff8
8877652
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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, () => | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
setEditingTemplate(null), | ||
); | ||
} else { | ||
await handleCreateMetadataInstance(values.metadata as MetadataTemplateInstance, () => | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here, let's use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. as above ⬆️ |
||
setEditingTemplate(null), | ||
); | ||
} | ||
}; | ||
|
||
const metadataDropdown = status === STATUS.SUCCESS && templates && ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ❓ seems like this is now just setting that status to success instead of updating the template instances. We no longer need to update template instances? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
}, | ||
[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 | ||
jankowiakdawid marked this conversation as resolved.
Show resolved
Hide resolved
|
||
.getMetadataAPI(false) | ||
.createMetadataRedesign( | ||
file, | ||
templateInstance, | ||
successCallback, | ||
(error: ElementsXhrError, code: string) => | ||
onApiError(error, code, messages.sidebarMetadataEditingErrorContent), | ||
); | ||
}, | ||
[api, file, onApiError], | ||
); | ||
|
||
const handleUpdateMetadataInstance = React.useCallback( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ❓ I imagine updates and creates should also have a loading states but don't see any There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For creating and updating we pass these async functions to |
||
(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 | ||
jankowiakdawid marked this conversation as resolved.
Show resolved
Hide resolved
|
||
.getMetadataAPI(false) | ||
.updateMetadataRedesign( | ||
file, | ||
metadataInstance, | ||
JSONPatch, | ||
successCallback, | ||
(error: ElementsXhrError, code: string) => { | ||
onApiError(error, code, messages.sidebarMetadataEditingErrorContent); | ||
}, | ||
); | ||
}, | ||
[api, file, onApiError], | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is
templateInstances.length
needed? Shouldn't having onlytemplateInstances
as a dependency observe changes in the size of the array as well?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
templateInstance
is an array from api cache, therefore changes in the array would not trigger thisuseEffect