diff --git a/frontend/src/AddSeries/AddNewSeries/useAddSeries.ts b/frontend/src/AddSeries/AddNewSeries/useAddSeries.ts index 086c031d9..016421e1f 100644 --- a/frontend/src/AddSeries/AddNewSeries/useAddSeries.ts +++ b/frontend/src/AddSeries/AddNewSeries/useAddSeries.ts @@ -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'], (oldSeries) => { - if (!oldSeries) { - return [newSeries]; - } - - return [...oldSeries, newSeries]; - }); + queryClient.setQueryData(['/series'], (oldSeries = []) => + addOrUpdateQueryClientItem(oldSeries, newSeries, 'id') + ); }, }, } diff --git a/frontend/src/Commands/useCommands.ts b/frontend/src/Commands/useCommands.ts index f40579cb8..f4eed0752 100644 --- a/frontend/src/Commands/useCommands.ts +++ b/frontend/src/Commands/useCommands.ts @@ -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'], - (oldCommands = []) => { - return [...oldCommands, newCommand]; - } + queryClient.setQueryData(['/command'], (oldCommands = []) => + addOrUpdateQueryClientItem(oldCommands, newCommand, 'id') ); }, }, diff --git a/frontend/src/Helpers/Hooks/useApiMutation.ts b/frontend/src/Helpers/Hooks/useApiMutation.ts index 641db3d50..36999380e 100644 --- a/frontend/src/Helpers/Hooks/useApiMutation.ts +++ b/frontend/src/Helpers/Hooks/useApiMutation.ts @@ -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)); +} diff --git a/frontend/src/RootFolder/useRootFolders.ts b/frontend/src/RootFolder/useRootFolders.ts index 526dccf36..063c2fac4 100644 --- a/frontend/src/RootFolder/useRootFolders.ts +++ b/frontend/src/RootFolder/useRootFolders.ts @@ -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'], - (oldRootFolders = []) => { - return [...oldRootFolders, newRootFolder]; - } + (oldRootFolders = []) => + addOrUpdateQueryClientItem(oldRootFolders, newRootFolder, 'id') ); }, }, diff --git a/frontend/src/Settings/useProviderSettings.ts b/frontend/src/Settings/useProviderSettings.ts index 3bee87878..dced47a4b 100644 --- a/frontend/src/Settings/useProviderSettings.ts +++ b/frontend/src/Settings/useProviderSettings.ts @@ -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 = ( }); }, onSuccess: (updatedSettings: T) => { - queryClient.setQueryData([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([path], (oldData = []) => + addOrUpdateQueryClientItem(oldData, updatedSettings, 'id') + ); onSuccess?.(updatedSettings); }, onError, diff --git a/frontend/src/Tags/useTags.ts b/frontend/src/Tags/useTags.ts index 8e4f3da44..dddb9aa4e 100644 --- a/frontend/src/Tags/useTags.ts +++ b/frontend/src/Tags/useTags.ts @@ -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'], (oldData) => { - if (!oldData) { - return oldData; - } - - return [...oldData, data]; - }); + queryClient.setQueryData(['tag'], (oldData = []) => + addOrUpdateQueryClientItem(oldData, data, 'id') + ); onTagCreated?.(data); },