Prevent duplicated items in state on create

This commit is contained in:
Bogdan 2026-04-24 14:42:48 +03:00 committed by Mark McDowall
parent 1c34977841
commit 510cbe54e8
6 changed files with 38 additions and 38 deletions

View file

@ -1,7 +1,9 @@
import { useQueryClient } from '@tanstack/react-query';
import AddSeries from 'AddSeries/AddSeries';
import { AddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
import useApiMutation from 'Helpers/Hooks/useApiMutation';
import useApiMutation, {
addOrUpdateQueryClientItem,
} from 'Helpers/Hooks/useApiMutation';
import useApiQuery from 'Helpers/Hooks/useApiQuery';
import Series from 'Series/Series';
@ -42,13 +44,9 @@ export const useAddSeries = () => {
method: 'POST',
mutationOptions: {
onSuccess: (newSeries) => {
queryClient.setQueryData<Series[]>(['/series'], (oldSeries) => {
if (!oldSeries) {
return [newSeries];
}
return [...oldSeries, newSeries];
});
queryClient.setQueryData<Series[]>(['/series'], (oldSeries = []) =>
addOrUpdateQueryClientItem(oldSeries, newSeries, 'id')
);
},
},
}

View file

@ -2,7 +2,9 @@ import { useQueryClient } from '@tanstack/react-query';
import { useCallback, useMemo, useRef } from 'react';
import { showMessage } from 'App/messagesStore';
import Command, { CommandBody, NewCommandBody } from 'Commands/Command';
import useApiMutation from 'Helpers/Hooks/useApiMutation';
import useApiMutation, {
addOrUpdateQueryClientItem,
} from 'Helpers/Hooks/useApiMutation';
import useApiQuery from 'Helpers/Hooks/useApiQuery';
import {
ERROR,
@ -45,11 +47,8 @@ export const useExecuteCommand = () => {
path: '/command',
mutationOptions: {
onSuccess: (newCommand: Command) => {
queryClient.setQueryData<Command[]>(
['/command'],
(oldCommands = []) => {
return [...oldCommands, newCommand];
}
queryClient.setQueryData<Command[]>(['/command'], (oldCommands = []) =>
addOrUpdateQueryClientItem(oldCommands, newCommand, 'id')
);
},
},

View file

@ -1,5 +1,6 @@
import { useMutation, UseMutationOptions } from '@tanstack/react-query';
import { useMemo } from 'react';
import ModelBase from 'App/ModelBase';
import { ValidationFailures } from 'Store/Selectors/selectSettings';
import {
ValidationError,
@ -71,3 +72,16 @@ export function getValidationFailures(
}
);
}
export function addOrUpdateQueryClientItem<
T extends ModelBase,
K extends keyof T
>(oldData: T[] = [], newItem: T, key: K) {
const existingIndex = oldData.findIndex((item) => item[key] === newItem[key]);
if (existingIndex === -1) {
return [...oldData, newItem];
}
return oldData.map((item) => (item[key] === newItem[key] ? newItem : item));
}

View file

@ -1,6 +1,8 @@
import { useQueryClient } from '@tanstack/react-query';
import ModelBase from 'App/ModelBase';
import useApiMutation from 'Helpers/Hooks/useApiMutation';
import useApiMutation, {
addOrUpdateQueryClientItem,
} from 'Helpers/Hooks/useApiMutation';
import useApiQuery from 'Helpers/Hooks/useApiQuery';
export interface UnmappedFolder {
@ -86,9 +88,8 @@ export const useAddRootFolder = () => {
onSuccess: (newRootFolder) => {
queryClient.setQueryData<RootFolder[]>(
['/rootFolder'],
(oldRootFolders = []) => {
return [...oldRootFolders, newRootFolder];
}
(oldRootFolders = []) =>
addOrUpdateQueryClientItem(oldRootFolders, newRootFolder, 'id')
);
},
},

View file

@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useCallback, useMemo, useRef, useState } from 'react';
import ModelBase from 'App/ModelBase';
import useApiMutation, {
addOrUpdateQueryClientItem,
getValidationFailures,
} from 'Helpers/Hooks/useApiMutation';
import useApiQuery, { QueryOptions } from 'Helpers/Hooks/useApiQuery';
@ -121,19 +122,9 @@ export const useSaveProviderSettings = <T extends ModelBase>(
});
},
onSuccess: (updatedSettings: T) => {
queryClient.setQueryData<T[]>([path], (oldData = []) => {
const existingIndex = oldData.findIndex(
(item) => item.id === updatedSettings.id
);
if (existingIndex === -1) {
return [...oldData, updatedSettings];
}
return oldData.map((item) =>
item.id === updatedSettings.id ? updatedSettings : item
);
});
queryClient.setQueryData<T[]>([path], (oldData = []) =>
addOrUpdateQueryClientItem(oldData, updatedSettings, 'id')
);
onSuccess?.(updatedSettings);
},
onError,

View file

@ -2,6 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
import { useMemo, useState } from 'react';
import ModelBase from 'App/ModelBase';
import useApiMutation, {
addOrUpdateQueryClientItem,
getValidationFailures,
} from 'Helpers/Hooks/useApiMutation';
import useApiQuery from 'Helpers/Hooks/useApiQuery';
@ -56,13 +57,9 @@ export const useAddTag = (onTagCreated?: (tag: Tag) => void) => {
setError(null);
},
onSuccess: (data) => {
queryClient.setQueryData<Tag[]>(['tag'], (oldData) => {
if (!oldData) {
return oldData;
}
return [...oldData, data];
});
queryClient.setQueryData<Tag[]>(['tag'], (oldData = []) =>
addOrUpdateQueryClientItem(oldData, data, 'id')
);
onTagCreated?.(data);
},