Support failed backup display on the frontend; use SWR for backup pages

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { format, formatDistanceToNow } from 'date-fns';
@@ -7,10 +6,11 @@ import Spinner from '@/components/elements/Spinner';
 import { bytesToHuman } from '@/helpers';
 import Can from '@/components/elements/Can';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
-import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import getServerBackups from '@/api/swr/getServerBackups';
+import { ServerBackup } from '@/api/server/types';
 
 interface Props {
     backup: ServerBackup;
@@ -18,17 +18,22 @@ interface Props {
 }
 
 export default ({ backup, className }: Props) => {
-    const appendBackup = ServerContext.useStoreActions(actions => actions.backups.appendBackup);
+    const { mutate } = getServerBackups();
 
     useWebsocketEvent(`backup completed:${backup.uuid}`, data => {
         try {
             const parsed = JSON.parse(data);
-            appendBackup({
-                ...backup,
-                sha256Hash: parsed.sha256_hash || '',
-                bytes: parsed.file_size || 0,
-                completedAt: new Date(),
-            });
+
+            mutate(data => ({
+                ...data,
+                items: data.items.map(b => b.uuid !== backup.uuid ? b : ({
+                    ...b,
+                    isSuccessful: parsed.is_successful || true,
+                    sha256Hash: parsed.sha256_hash || '',
+                    bytes: parsed.file_size || 0,
+                    completedAt: new Date(),
+                })),
+            }), false);
         } catch (e) {
             console.warn(e);
         }
@@ -45,8 +50,13 @@ export default ({ backup, className }: Props) => {
             </div>
             <div css={tw`flex-1`}>
                 <p css={tw`text-sm mb-1`}>
+                    {!backup.isSuccessful &&
+                    <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
+                        Failed
+                    </span>
+                    }
                     {backup.name}
-                    {backup.completedAt &&
+                    {(backup.completedAt && backup.isSuccessful) &&
                     <span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
                     }
                 </p>