From 6795bae3352cc214cf1cdb7a8cfab7e14373335c Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sun, 8 Nov 2020 17:12:07 -0800 Subject: [PATCH] Fix server state not being updated correctly when adding/removing allocation; closes #2680 --- CHANGELOG.md | 1 + .../components/server/network/DeleteAllocationButton.tsx | 7 ++++++- .../scripts/components/server/network/NetworkContainer.tsx | 6 +++++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 57927b955..90c9c853c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ This project follows [Semantic Versioning](http://semver.org) guidelines. ## v1.1.1 ### Fixed * Fixes allocation permissions checking on the frontend checking the wrong permission therefore leading to the item never showing up. +* Fixes allocations not updating correctly when added or deleted and switching between pages. ## v1.1.0 This release **requires** `Wings@1.1.0` in order to work properly due to breaking internal API changes. diff --git a/resources/scripts/components/server/network/DeleteAllocationButton.tsx b/resources/scripts/components/server/network/DeleteAllocationButton.tsx index e52ba3916..b25d9da1d 100644 --- a/resources/scripts/components/server/network/DeleteAllocationButton.tsx +++ b/resources/scripts/components/server/network/DeleteAllocationButton.tsx @@ -13,8 +13,11 @@ interface Props { } const DeleteAllocationButton = ({ allocation }: Props) => { - const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const [ confirm, setConfirm ] = useState(false); + + const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); + const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState); + const { mutate } = getServerAllocations(); const { clearFlashes, clearAndAddHttpError } = useFlash(); @@ -22,6 +25,8 @@ const DeleteAllocationButton = ({ allocation }: Props) => { clearFlashes('server:network'); mutate(data => data?.filter(a => a.id !== allocation), false); + setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) })); + deleteServerAllocation(uuid, allocation) .catch(error => clearAndAddHttpError({ key: 'server:network', error })); }; diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx index 8583b137a..25bacaae9 100644 --- a/resources/scripts/components/server/network/NetworkContainer.tsx +++ b/resources/scripts/components/server/network/NetworkContainer.tsx @@ -19,6 +19,7 @@ const NetworkContainer = () => { const allocationLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.allocations); // @ts-ignore const allocations: Allocation[] = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual); + const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data, error, mutate } = getServerAllocations(); @@ -38,7 +39,10 @@ const NetworkContainer = () => { setLoading(true); createServerAllocation(uuid) - .then(allocation => mutate(data?.concat(allocation), false)) + .then(allocation => { + setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) })); + return mutate(data?.concat(allocation), false); + }) .catch(error => clearAndAddHttpError({ key: 'server:network', error })) .then(() => setLoading(false)); };