Fix server state not being updated correctly when adding/removing allocation; closes pterodactyl#2680

Author: DaneEveritt

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.

resources/scripts/components/server/network/DeleteAllocationButton.tsx

@@ -13,15 +13,20 @@ 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();
 
     const deleteAllocation = () => {
         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 }));
     };

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));
     };