feat: Add undoable message delete with UI-layer snackbar actions and cleaner store boundaries

ui/src/CurrentUser.ts

@@ -92,7 +92,7 @@ export class CurrentUser {
             })
             .catch(() => {
                 this.authenticating = false;
-                return this.snack('Login failed');
+                this.snack('Login failed');
             });
     };
 

ui/src/apiAuth.ts

@@ -2,6 +2,25 @@ import axios from 'axios';
 import {CurrentUser} from './CurrentUser';
 import {SnackReporter} from './snack/SnackManager';
 
+export type TokenProvider = () => string;
+
+let tokenProvider: TokenProvider = () => '';
+
+export const setTokenProvider = (provider: TokenProvider) => {
+    tokenProvider = provider;
+};
+
+export const authFetch = (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const headers = new Headers(init?.headers);
+    if (!headers.has('x-gotify-key')) {
+        const token = tokenProvider();
+        if (token) {
+            headers.set('x-gotify-key', token);
+        }
+    }
+    return fetch(input, {...init, headers});
+};
+
 export const initAxios = (currentUser: CurrentUser, snack: SnackReporter) => {
     axios.interceptors.request.use((config) => {
         if (!config.headers.has('x-gotify-key')) {

ui/src/application/AppStore.ts

@@ -26,7 +26,7 @@ export class AppStore extends BaseStore<IApplication> {
     protected requestDelete = (id: number): Promise<void> =>
         axios.delete(`${config.get('url')}application/${id}`).then(() => {
             this.onDelete();
-            return this.snack('Application deleted');
+            this.snack('Application deleted');
         });
 
     public uploadImage = async (id: number, file: Blob): Promise<void> => {

ui/src/client/ClientStore.ts

@@ -20,9 +20,9 @@ export class ClientStore extends BaseStore<IClient> {
         axios.get<IClient[]>(`${config.get('url')}client`).then((response) => response.data);
 
     protected requestDelete(id: number): Promise<void> {
-        return axios
-            .delete(`${config.get('url')}client/${id}`)
-            .then(() => this.snack('Client deleted'));
+        return axios.delete(`${config.get('url')}client/${id}`).then(() => {
+            this.snack('Client deleted');
+        });
     }
 
     public update = async (id: number, name: string): Promise<void> => {

ui/src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import 'typeface-roboto';
-import {initAxios} from './apiAuth';
+import {initAxios, setTokenProvider} from './apiAuth';
 import * as config from './config';
 import Layout from './layout/Layout';
 import {unregister} from './registerServiceWorker';
@@ -51,6 +51,7 @@ const initStores = (): StoreMapping => {
     config.set('url', prodUrl);
     const stores = initStores();
     initAxios(stores.currentUser, stores.snackManager.snack);
+    setTokenProvider(stores.currentUser.token);
 
     registerReactions(stores);
 

ui/src/message/Messages.tsx

@@ -12,6 +12,7 @@ import LoadingSpinner from '../common/LoadingSpinner';
 import {useStores} from '../stores';
 import {Virtuoso} from 'react-virtuoso';
 import {PushMessageDialog} from './PushMessageDialog';
+import {getMessageDeleteQueue} from './messageDeleteQueue';
 
 const Messages = observer(() => {
     const {id} = useParams<{id: string}>();
@@ -20,22 +21,25 @@ const Messages = observer(() => {
     const [deleteAll, setDeleteAll] = React.useState(false);
     const [pushMessageOpen, setPushMessageOpen] = React.useState(false);
     const [isLoadingMore, setLoadingMore] = React.useState(false);
-    const {messagesStore, appStore} = useStores();
+    const {messagesStore, appStore, snackManager} = useStores();
     const messages = messagesStore.get(appId);
     const hasMore = messagesStore.canLoadMore(appId);
     const name = appStore.getName(appId);
     const hasMessages = messages.length !== 0;
     const expandedState = React.useRef<Record<number, boolean>>({});
     const app = appId === -1 ? undefined : appStore.getByIDOrUndefined(appId);
+    const deleteQueue = getMessageDeleteQueue(messagesStore, snackManager.snack);
 
-    const deleteMessage = (message: IMessage) => () => messagesStore.removeSingle(message);
+    const deleteMessage = (message: IMessage) => () => deleteQueue.requestDelete(message);
 
     React.useEffect(() => {
         if (!messagesStore.loaded(appId)) {
             messagesStore.loadMore(appId);
         }
     }, [appId]);
 
+    React.useEffect(() => () => deleteQueue.finalizePendingDeletes(), [appId, deleteQueue]);
+
     const renderMessage = (_index: number, message: IMessage) => (
         <Message
             key={message.id}
@@ -110,7 +114,10 @@ const Messages = observer(() => {
                         id="refresh-all"
                         variant="contained"
                         color="primary"
-                        onClick={() => messagesStore.refreshByApp(appId)}
+                        onClick={() => {
+                            deleteQueue.finalizePendingDeletes(appId);
+                            messagesStore.refreshByApp(appId);
+                        }}
                         style={{marginRight: 5}}>
                         Refresh
                     </Button>
@@ -133,7 +140,10 @@ const Messages = observer(() => {
                     title="Confirm Delete"
                     text={'Delete all messages?'}
                     fClose={() => setDeleteAll(false)}
-                    fOnSubmit={() => messagesStore.removeByApp(appId)}
+                    fOnSubmit={() => {
+                        deleteQueue.finalizePendingDeletes(appId);
+                        messagesStore.removeByApp(appId);
+                    }}
                 />
             )}
             {pushMessageOpen && app && (

ui/src/message/MessagesStore.ts

@@ -1,6 +1,7 @@
 import {BaseStore} from '../common/BaseStore';
 import {action, IObservableArray, observable, reaction, makeObservable} from 'mobx';
 import axios, {AxiosResponse} from 'axios';
+import {authFetch} from '../apiAuth';
 import * as config from '../config';
 import {createTransformer} from 'mobx-utils';
 import {SnackReporter} from '../snack/SnackManager';
@@ -17,6 +18,7 @@ interface MessagesState {
 
 export class MessagesStore {
     private state: Record<string, MessagesState> = {};
+    private pendingDeleteIds = new Set<number>();
 
     private loading = false;
 
@@ -29,7 +31,10 @@ export class MessagesStore {
             loadMore: action,
             publishSingleMessage: action,
             removeByApp: action,
-            removeSingle: action,
+            removeSingleLocal: action,
+            restoreSingleLocal: action,
+            markPendingDelete: action,
+            clearPendingDelete: action,
             clearAll: action,
             refreshByApp: action,
         });
@@ -59,7 +64,10 @@ export class MessagesStore {
             const pagedResult = await this.fetchMessages(appId, state.nextSince).then(
                 (resp) => resp.data
             );
-            state.messages.replace([...state.messages, ...pagedResult.messages]);
+            const incoming = pagedResult.messages.filter(
+                (message) => !this.pendingDeleteIds.has(message.id)
+            );
+            state.messages.replace([...state.messages, ...incoming]);
             state.nextSince = pagedResult.paging.since ?? 0;
             state.hasMore = 'next' in pagedResult.paging;
             state.loaded = true;
@@ -93,15 +101,30 @@ export class MessagesStore {
         await this.loadMore(appId);
     };
 
-    public removeSingle = async (message: IMessage) => {
-        await axios.delete(config.get('url') + 'message/' + message.id);
-        if (this.exists(AllMessages)) {
-            this.removeFromList(this.state[AllMessages].messages, message);
-        }
-        if (this.exists(message.appid)) {
-            this.removeFromList(this.state[message.appid].messages, message);
+    public removeSingle = async (message: IMessage, options?: {keepalive?: boolean}) => {
+        const url = config.get('url') + 'message/' + message.id;
+        if (options?.keepalive) {
+            const response = await authFetch(url, {
+                method: 'DELETE',
+                keepalive: true,
+                credentials: 'include',
+            });
+            if (!response.ok) {
+                throw new Error('Failed to delete message');
+            }
+            return;
         }
-        this.snack('Message deleted');
+        await axios.delete(url);
+    };
+
+    public removeSingleLocal = (message: IMessage) => {
+        const allIndex = this.exists(AllMessages)
+            ? this.removeFromList(this.state[AllMessages].messages, message)
+            : false;
+        const appIndex = this.exists(message.appid)
+            ? this.removeFromList(this.state[message.appid].messages, message)
+            : false;
+        return {allIndex, appIndex};
     };
 
     public sendMessage = async (
@@ -161,6 +184,27 @@ export class MessagesStore {
         }
     };
 
+    public restoreSingleLocal = (
+        message: IMessage,
+        allIndex: false | number,
+        appIndex: false | number
+    ) => {
+        if (allIndex !== false && this.exists(AllMessages)) {
+            this.state[AllMessages].messages.splice(allIndex, 0, message);
+        }
+        if (appIndex !== false && this.exists(message.appid)) {
+            this.state[message.appid].messages.splice(appIndex, 0, message);
+        }
+    };
+
+    public markPendingDelete = (messageId: number) => {
+        this.pendingDeleteIds.add(messageId);
+    };
+
+    public clearPendingDelete = (messageId: number) => {
+        this.pendingDeleteIds.delete(messageId);
+    };
+
     private getUnCached = (appId: number): Array<IMessage> => {
         const appToImage: Partial<Record<string, string>> = this.appStore
             .getItems()

ui/src/message/messageDeleteQueue.tsx

@@ -0,0 +1,139 @@
+import Button from '@mui/material/Button';
+import React from 'react';
+import {closeSnackbar, SnackbarKey} from 'notistack';
+import {SnackReporter} from '../snack/SnackManager';
+import {IMessage} from '../types';
+import {MessagesStore} from './MessagesStore';
+
+const UndoAutoHideMs = 5000;
+
+interface PendingDelete {
+    message: IMessage;
+    allIndex: false | number;
+    appIndex: false | number;
+    snackKey: SnackbarKey;
+}
+
+class MessageDeleteQueue {
+    private pendingDeletes = new Map<number, PendingDelete>();
+    private pagehideBound = false;
+
+    public constructor(
+        private readonly messagesStore: MessagesStore,
+        private readonly snack: SnackReporter
+    ) {}
+
+    public requestDelete = (message: IMessage) => {
+        this.ensurePagehideHandler();
+        if (this.pendingDeletes.has(message.id)) {
+            return;
+        }
+        const {allIndex, appIndex} = this.messagesStore.removeSingleLocal(message);
+        if (allIndex === false && appIndex === false) {
+            return;
+        }
+        this.messagesStore.markPendingDelete(message.id);
+
+        const snackKey = this.snack('Message deleted', {
+            action: (key) => (
+                <Button
+                    color="inherit"
+                    size="small"
+                    onClick={() => this.undoDelete(message.id, key)}>
+                    Undo
+                </Button>
+            ),
+            autoHideDuration: UndoAutoHideMs,
+            onExited: () => {
+                void this.finalizeDelete(message.id);
+            },
+        });
+
+        this.pendingDeletes.set(message.id, {
+            message,
+            allIndex,
+            appIndex,
+            snackKey,
+        });
+    };
+
+    public undoDelete = (messageId: number, snackKey: SnackbarKey) => {
+        const pending = this.pendingDeletes.get(messageId);
+        if (!pending) {
+            return;
+        }
+        this.pendingDeletes.delete(messageId);
+        this.messagesStore.clearPendingDelete(messageId);
+        this.messagesStore.restoreSingleLocal(pending.message, pending.allIndex, pending.appIndex);
+        closeSnackbar(snackKey);
+        this.snack('Delete undone');
+    };
+
+    public finalizePendingDeletes = (targetAppId?: number) => {
+        const pendingIds = Array.from(this.pendingDeletes.keys());
+        pendingIds.forEach((messageId) => {
+            const pending = this.pendingDeletes.get(messageId);
+            if (!pending) {
+                return;
+            }
+            if (
+                targetAppId != null &&
+                targetAppId !== -1 &&
+                pending.message.appid !== targetAppId
+            ) {
+                return;
+            }
+            void this.finalizeDelete(messageId, {closeSnack: true});
+        });
+    };
+
+    private ensurePagehideHandler = () => {
+        if (this.pagehideBound || typeof window === 'undefined') {
+            return;
+        }
+        this.pagehideBound = true;
+        window.addEventListener('pagehide', this.handlePagehide);
+        window.addEventListener('beforeunload', this.handlePagehide);
+    };
+
+    private handlePagehide = () => {
+        this.finalizePendingDeletes();
+    };
+
+    private finalizeDelete = async (
+        messageId: number,
+        options?: {closeSnack?: boolean}
+    ): Promise<void> => {
+        const pending = this.pendingDeletes.get(messageId);
+        if (!pending) {
+            return;
+        }
+        this.pendingDeletes.delete(messageId);
+        this.messagesStore.clearPendingDelete(messageId);
+        if (options?.closeSnack) {
+            closeSnackbar(pending.snackKey);
+        }
+        try {
+            await this.messagesStore.removeSingle(pending.message, {keepalive: true});
+        } catch {
+            this.messagesStore.restoreSingleLocal(
+                pending.message,
+                pending.allIndex,
+                pending.appIndex
+            );
+            this.snack('Delete failed, message restored');
+        }
+    };
+}
+
+let messageDeleteQueue: MessageDeleteQueue | null = null;
+
+export const getMessageDeleteQueue = (
+    messagesStore: MessagesStore,
+    snack: SnackReporter
+): MessageDeleteQueue => {
+    if (!messageDeleteQueue) {
+        messageDeleteQueue = new MessageDeleteQueue(messagesStore, snack);
+    }
+    return messageDeleteQueue;
+};