Clean up selected checkbox on delete.

This commit is contained in:
Paulo Gustavo Veiga 2022-03-31 19:29:39 -03:00
parent 3c9fcbf8e1
commit e6e3bc2655
4 changed files with 30 additions and 24 deletions

View File

@ -16,7 +16,7 @@ const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
const [error, setError] = React.useState<ErrorInfo>(); const [error, setError] = React.useState<ErrorInfo>();
const mutation = useMutation((id: number) => client.deleteMap(id), { const mutation = useMutation((id: number) => client.deleteMap(id), {
onSuccess: () => handleOnMutationSuccess(onClose, queryClient), onSuccess: () => handleOnMutationSuccess(() => onClose(true), queryClient),
onError: (error: ErrorInfo) => { onError: (error: ErrorInfo) => {
setError(error); setError(error);
}, },
@ -31,7 +31,7 @@ const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
}; };
const { map } = fetchMapById(mapId) const { map } = fetchMapById(mapId)
const alertTitle=`${intl.formatMessage({ id: 'action.delete-title', defaultMessage: 'Delete' })} ${map?.title}`; const alertTitle = `${intl.formatMessage({ id: 'action.delete-title', defaultMessage: 'Delete' })} ${map?.title}`;
return ( return (
<div> <div>
<BaseDialog <BaseDialog

View File

@ -18,7 +18,7 @@ const DeleteMultiselectDialog = ({
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const mutation = useMutation((ids: number[]) => client.deleteMaps(ids), { const mutation = useMutation((ids: number[]) => client.deleteMaps(ids), {
onSuccess: () => handleOnMutationSuccess(onClose, queryClient), onSuccess: () => handleOnMutationSuccess(() => onClose(true), queryClient),
onError: (error) => { onError: (error) => {
console.error(`Unexpected error ${error}`); console.error(`Unexpected error ${error}`);
}, },

View File

@ -22,7 +22,7 @@ export type BasicMapInfo = {
type ActionDialogProps = { type ActionDialogProps = {
action?: ActionType; action?: ActionType;
mapsId: number[]; mapsId: number[];
onClose: () => void; onClose: (success?: boolean) => void;
fromEditor: boolean; fromEditor: boolean;
}; };
@ -78,12 +78,12 @@ export const handleOnMutationSuccess = (onClose: () => void, queryClient: QueryC
export type SimpleDialogProps = { export type SimpleDialogProps = {
mapId: number; mapId: number;
onClose: () => void; onClose: (success?: boolean) => void;
}; };
export type MultiDialogProps = { export type MultiDialogProps = {
mapsId: number[]; mapsId: number[];
onClose: () => void; onClose: (success?: boolean) => void;
}; };
export default ActionDispatcher; export default ActionDispatcher;

View File

@ -59,9 +59,9 @@ function getComparator<Key extends keyof any>(
order: Order, order: Order,
orderBy: Key orderBy: Key
): ( ): (
a: { [key in Key]: number | string | boolean | Label[] | undefined }, a: { [key in Key]: number | string | boolean | Label[] | undefined },
b: { [key in Key]: number | string | Label[] | boolean } b: { [key in Key]: number | string | Label[] | boolean }
) => number { ) => number {
return order === 'desc' return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy) ? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy); : (a, b) => -descendingComparator(a, b, orderBy);
@ -240,19 +240,19 @@ export type ChangeLabelMutationFunctionParam = { maps: MapInfo[]; label: Label;
export const getChangeLabelMutationFunction = export const getChangeLabelMutationFunction =
(client: Client) => (client: Client) =>
async ({ maps, label, checked }: ChangeLabelMutationFunctionParam): Promise<void> => { async ({ maps, label, checked }: ChangeLabelMutationFunctionParam): Promise<void> => {
if (!label.id) { if (!label.id) {
label.id = await client.createLabel(label.title, label.color); label.id = await client.createLabel(label.title, label.color);
} }
if (checked) { if (checked) {
const toAdd = maps.filter((m) => !m.labels.find((l) => l.id === label.id)); const toAdd = maps.filter((m) => !m.labels.find((l) => l.id === label.id));
await Promise.all(toAdd.map((m) => client.addLabelToMap(label.id, m.id))); await Promise.all(toAdd.map((m) => client.addLabelToMap(label.id, m.id)));
} else { } else {
const toRemove = maps.filter((m) => m.labels.find((l) => l.id === label.id)); const toRemove = maps.filter((m) => m.labels.find((l) => l.id === label.id));
await Promise.all(toRemove.map((m) => client.deleteLabelFromMap(label.id, m.id))); await Promise.all(toRemove.map((m) => client.deleteLabelFromMap(label.id, m.id)));
} }
return Promise.resolve(); return Promise.resolve();
}; };
export const MapsList = (props: MapsListProps): React.ReactElement => { export const MapsList = (props: MapsListProps): React.ReactElement => {
const classes = useStyles(); const classes = useStyles();
@ -400,7 +400,6 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
actionType: 'delete', actionType: 'delete',
mapsId: selected, mapsId: selected,
}); });
setSelected([]);
}; };
const handleAddLabelClick = () => { const handleAddLabelClick = () => {
@ -699,7 +698,14 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<ActionDispatcher <ActionDispatcher
action={activeDialog?.actionType} action={activeDialog?.actionType}
onClose={() => setActiveDialog(undefined)} onClose={(success) => {
setActiveDialog(undefined);
// If it was a success action, reset the selection list ...
if (success) {
setSelected([]);
}
}}
mapsId={activeDialog ? activeDialog.mapsId : []} mapsId={activeDialog ? activeDialog.mapsId : []}
/> />
</div> </div>