From 3ce1f16792b98e83fb3a6d9aa1749a938fa834a4 Mon Sep 17 00:00:00 2001
From: Matthias Fechner <matthias@fechner.net>
Date: Mon, 6 Jan 2025 19:52:19 +0200
Subject: [PATCH] Fixed loading and refreshing of messages

We hold now all messages in the state.
If message of one app are refresh, make sure to sort them by date into the existing messages
---
 ui/src/message/Messages.tsx     |  4 ++--
 ui/src/store/message-actions.ts | 26 ++++++++++----------------
 ui/src/store/message-slice.ts   | 22 +++++++++++++++++-----
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx
index 0e73f526..654ea3bd 100644
--- a/ui/src/message/Messages.tsx
+++ b/ui/src/message/Messages.tsx
@@ -29,8 +29,8 @@ const Messages = () => {
     const hasMessages = messages.length !== 0;
 
     useEffect(() => {
-        dispatch(fetchMessages(appId));
-    }, [dispatch, appId]);
+        dispatch(fetchMessages());
+    }, [dispatch]);
 
     const label = (text: string) => (
         <Grid size={12}>
diff --git a/ui/src/store/message-actions.ts b/ui/src/store/message-actions.ts
index 0ff0bd6f..0b82683d 100644
--- a/ui/src/store/message-actions.ts
+++ b/ui/src/store/message-actions.ts
@@ -5,18 +5,12 @@ import {AppDispatch} from './index.ts';
 import {messageActions} from './message-slice.ts';
 import {uiActions} from './ui-slice.ts';
 
-const AllMessages = -1;
-
-const refreshByApp = (appId: number) => {
-    return async (dispatch: AppDispatch) => {
-
-    }
-}
+export const AllMessages = -1;
 
 export const fetchMessages = (appId: number = AllMessages, since: number = 0) => {
     return async (dispatch: AppDispatch) => {
         const sendRequest = async (url: string) => {
-            const response = await axios.get(url);
+            const response = await axios.get<IPagedMessages>(url);
             return response.data;
         };
         dispatch(messageActions.loading(true));
@@ -28,11 +22,11 @@ export const fetchMessages = (appId: number = AllMessages, since: number = 0) =>
         }
         try {
             const data = await sendRequest(url);
-            dispatch(messageActions.set(data));
+            dispatch(messageActions.set({appId, pagedMessages: data}));
         } catch (error) {
             dispatch(messageActions.loading(false));
         }
-    }
+    };
 };
 
 export const removeSingleMessage = (message: IMessage) => {
@@ -40,19 +34,19 @@ export const removeSingleMessage = (message: IMessage) => {
         const sendRequest = async () => {
             const response = await axios.delete(config.get('url') + 'message/' + message.id);
             return response.data;
-        }
+        };
         await sendRequest();
         dispatch(messageActions.remove(message.id));
         dispatch(uiActions.addSnackMessage('Message deleted'));
-    }
-}
+    };
+};
 
 export const removeMessagesByApp = (app: IApplication | undefined) => {
     return async (dispatch: AppDispatch) => {
         const sendRequest = async (url: string) => {
             const response = await axios.delete(url);
             return response.data;
-        }
+        };
         let url;
         if (app === undefined) {
             url = config.get('url') + 'message';
@@ -65,5 +59,5 @@ export const removeMessagesByApp = (app: IApplication | undefined) => {
             dispatch(messageActions.removeByAppId(app.id));
             dispatch(uiActions.addSnackMessage(`Deleted all messages from ${app.name}`));
         }
-    }
-}
+    };
+};
diff --git a/ui/src/store/message-slice.ts b/ui/src/store/message-slice.ts
index bc3bbe64..f5511401 100644
--- a/ui/src/store/message-slice.ts
+++ b/ui/src/store/message-slice.ts
@@ -1,5 +1,6 @@
 import {createSlice, PayloadAction} from '@reduxjs/toolkit';
 import {IMessage, IPagedMessages} from '../types.ts';
+import {AllMessages} from './message-actions.ts';
 
 interface MessagesState {
     items: IMessage[];
@@ -19,9 +20,20 @@ export const messageSlice = createSlice({
     name: 'message',
     initialState: initialMessageState,
     reducers: {
-        set(state, action: PayloadAction<IPagedMessages>) {
-            state.items = action.payload.messages;
-            state.nextSince = action.payload.paging.since ?? 0;
+        set(state, action: PayloadAction<{appId: number; pagedMessages: IPagedMessages;}>) {
+            if (action.payload.appId === AllMessages) {
+                state.items = action.payload.pagedMessages.messages;
+            } else {
+                const allMessages = state.items = [
+                    ...state.items.filter(item => item.appid !== action.payload.appId),
+                    ...action.payload.pagedMessages.messages,
+                ];
+                // keep the messages sorted from newest to oldest message
+                state.items = allMessages.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+            }
+            // TODO: paging functionality is missing (do not have a test case to test it with)
+            // TODO: we maybe need to add here an additional state array object that is holding the information of more messages are existing
+            // state.nextSince = action.payload.paging.since ?? 0;
             state.loaded = true;
         },
         add(state, action: PayloadAction<IMessage>) {
@@ -38,8 +50,8 @@ export const messageSlice = createSlice({
         },
         loading(state, action: PayloadAction<boolean>) {
             state.loaded = !action.payload;
-        }
-    }
+        },
+    },
 });
 
 export const messageActions = messageSlice.actions;