Fix/library settings global update categories empty dialog after updating (#361)

* Prevent dialog not to showing any categories after updating them

After updating to react v18 the dialog categories were empty after updating the category changes

* Immediately close the dialog after starting update

Catalog was open as long as the update was running

* Remove unnecessary state
This commit is contained in:
schroda
2023-06-10 00:42:10 +02:00
committed by GitHub
parent 63c1ac95eb
commit 26b48f15c5

View File

@@ -77,17 +77,13 @@ export default function LibrarySettings() {
setAction(null); setAction(null);
}, [t]); }, [t]);
const { data: categories, isLoading, error: requestError, mutate } = requestManager.useGetCategories(); const { data: categories = [], error: requestError, mutate } = requestManager.useGetCategories();
const [dialogCategories, setDialogCategories] = useState<ICategory[]>(categories);
const [currentCategories, setCurrentCategories] = useState<ICategory[]>(categories ?? []); // categories to check if response categories changed
const [dialogCategories, setDialogCategories] = useState<ICategory[]>(categories ?? []); // categories that are shown and updated in the dialog
const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false);
const retrievedCategoriesChanged = !isLoading && categories?.length && categories !== currentCategories; useEffect(() => {
if (retrievedCategoriesChanged) {
setCurrentCategories(categories);
setDialogCategories(categories); setDialogCategories(categories);
} }, [categories]);
const unsetCategories: ICategory[] = const unsetCategories: ICategory[] =
categories?.filter((category) => category.includeInUpdate === IncludeInGlobalUpdate.UNSET) ?? []; categories?.filter((category) => category.includeInUpdate === IncludeInGlobalUpdate.UNSET) ?? [];
@@ -115,7 +111,7 @@ export default function LibrarySettings() {
const updateCategories = async () => { const updateCategories = async () => {
const categoriesToUpdate = dialogCategories.filter((category) => { const categoriesToUpdate = dialogCategories.filter((category) => {
const currentCategory = currentCategories.find((currCategory) => currCategory.id === category.id); const currentCategory = categories.find((currCategory) => currCategory.id === category.id);
if (!currentCategory) { if (!currentCategory) {
return false; return false;
@@ -124,17 +120,14 @@ export default function LibrarySettings() {
return currentCategory.includeInUpdate !== category.includeInUpdate; return currentCategory.includeInUpdate !== category.includeInUpdate;
}); });
try {
await Promise.all(categoriesToUpdate.map((category) => updateCategory(category)));
} catch (error) {
makeToast(t('global.error.label.failed_to_save_changes'), 'error');
} finally {
setIsDialogOpen(false); setIsDialogOpen(false);
if (categoriesToUpdate.length) { try {
setDialogCategories([]); await Promise.all(categoriesToUpdate.map((category) => updateCategory(category)));
mutate([...dialogCategories], { revalidate: false }); mutate([...dialogCategories], { revalidate: false });
} } catch (error) {
makeToast(t('global.error.label.failed_to_save_changes'), 'error');
mutate([...categories]);
} }
}; };