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

@@ -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}>

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,31 +22,31 @@ 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) => {
     return async (dispatch: AppDispatch) => {
         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}`));
         }
-    }
-}
+    };
+};

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;