Store backups in server state

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -8,19 +8,21 @@ import Can from '@/components/elements/Can';
 import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import BackupRow from '@/components/server/backups/BackupRow';
+import { ServerContext } from '@/state/server';
+import ListRefreshIndicator from '@/components/elements/ListRefreshIndicator';
 
 export default () => {
     const { uuid } = useServer();
     const { addError, clearFlashes } = useFlash();
     const [ loading, setLoading ] = useState(true);
-    const [ backups, setBackups ] = useState<ServerBackup[]>([]);
+
+    const backups = ServerContext.useStoreState(state => state.backups.data);
+    const setBackups = ServerContext.useStoreActions(actions => actions.backups.setBackups);
 
     useEffect(() => {
         clearFlashes('backups');
         getServerBackups(uuid)
-            .then(data => {
-                setBackups(data.items);
-            })
+            .then(data => setBackups(data.items))
             .catch(error => {
                 console.error(error);
                 addError({ key: 'backups', message: httpErrorToHuman(error) });
@@ -28,12 +30,13 @@ export default () => {
             .then(() => setLoading(false));
     }, []);
 
-    if (loading) {
+    if (backups.length === 0 && loading) {
         return <Spinner size={'large'} centered={true}/>;
     }
 
     return (
         <div className={'mt-10 mb-6'}>
+            <ListRefreshIndicator visible={loading}/>
             <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
             {!backups.length ?
                 <p className="text-center text-sm text-neutral-400">
@@ -44,18 +47,13 @@ export default () => {
                     {backups.map((backup, index) => <BackupRow
                         key={backup.uuid}
                         backup={backup}
-                        onBackupUpdated={data => setBackups(
-                            s => ([ ...s.map(b => b.uuid === data.uuid ? data : b) ]),
-                        )}
                         className={index !== (backups.length - 1) ? 'mb-2' : undefined}
                     />)}
                 </div>
             }
             <Can action={'backup.create'}>
                 <div className={'mt-6 flex justify-end'}>
-                    <CreateBackupButton
-                        onBackupGenerated={backup => setBackups(s => [ ...s, backup ])}
-                    />
+                    <CreateBackupButton/>
                 </div>
             </Can>
         </div>

resources/scripts/components/server/backups/BackupRow.tsx

@@ -15,10 +15,10 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFlash from '@/plugins/useFlash';
 import { httpErrorToHuman } from '@/api/http';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
+import { ServerContext } from '@/state/server';
 
 interface Props {
     backup: ServerBackup;
-    onBackupUpdated: (backup: ServerBackup) => void;
     className?: string;
 }
 
@@ -34,16 +34,18 @@ const DownloadModal = ({ checksum, ...props }: RequiredModalProps & { checksum:
     </Modal>
 );
 
-export default ({ backup, onBackupUpdated, className }: Props) => {
+export default ({ backup, className }: Props) => {
     const { uuid } = useServer();
     const { addError, clearFlashes } = useFlash();
     const [ loading, setLoading ] = useState(false);
     const [ visible, setVisible ] = useState(false);
 
+    const appendBackup = ServerContext.useStoreActions(actions => actions.backups.appendBackup);
+
     useWebsocketEvent(`backup completed:${backup.uuid}`, data => {
         try {
             const parsed = JSON.parse(data);
-            onBackupUpdated({
+            appendBackup({
                 ...backup,
                 sha256Hash: parsed.sha256_hash || '',
                 bytes: parsed.file_size || 0,

resources/scripts/components/server/backups/CreateBackupButton.tsx

@@ -9,17 +9,13 @@ import useServer from '@/plugins/useServer';
 import createServerBackup from '@/api/server/backups/createServerBackup';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { ServerBackup } from '@/api/server/backups/getServerBackups';
+import { ServerContext } from '@/state/server';
 
 interface Values {
     name: string;
     ignored: string;
 }
 
-interface Props {
-    onBackupGenerated: (backup: ServerBackup) => void;
-}
-
 const ModalContent = ({ ...props }: RequiredModalProps) => {
     const { isSubmitting } = useFormikContext<Values>();
 
@@ -66,20 +62,22 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
     );
 };
 
-export default ({ onBackupGenerated }: Props) => {
+export default () => {
     const { uuid } = useServer();
     const { addError, clearFlashes } = useFlash();
     const [ visible, setVisible ] = useState(false);
 
+    const appendBackup = ServerContext.useStoreActions(actions => actions.backups.appendBackup);
+
     useEffect(() => {
         clearFlashes('backups:create');
-    }, [visible]);
+    }, [ visible ]);
 
     const submit = ({ name, ignored }: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes('backups:create')
+        clearFlashes('backups:create');
         createServerBackup(uuid, name, ignored)
             .then(backup => {
-                onBackupGenerated(backup);
+                appendBackup(backup);
                 setVisible(false);
             })
             .catch(error => {