revert prev. commit and extract message state to a new file

ui/src/components/messages/MessageState.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Message } from './SubscriptionsHook'
+
+export type MessageStateType = {
+  set: React.Dispatch<React.SetStateAction<Message[]>>
+  get: Message[]
+  add(message: Message): void
+  removeKey(key: string): void
+}
+
+export const MessageState: MessageStateType = {
+  set: fn => {
+    console.warn('set function is not defined yet, called with', fn)
+  },
+  get: [],
+  add: message => {
+    MessageState.set(messages => {
+      const newMessages = messages.filter(msg => msg.key !== message.key)
+      newMessages.push(message)
+
+      return newMessages
+    })
+  },
+  removeKey: key => {
+    MessageState.set(messages => {
+      const newMessages = messages.filter(msg => msg.key !== key)
+      return newMessages
+    })
+  },
+}

ui/src/components/messages/Messages.test.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
 import { NotificationType } from '../../__generated__/globalTypes'
-import { MessageState } from './Messages'
+import { MessageState } from './MessageState'
 import MessagePlain from './Message'
 import MessageProgress from './MessageProgress'
 
-// Define the mock for SubscriptionsHook before importing it
+// Define the mock for SubscriptionsHook before using it
 const MockSubscriptionsHook = ({ messages, setMessages }: any) => {
   return (
     <div>

ui/src/components/messages/Messages.tsx

@@ -5,6 +5,7 @@ import MessageProgress from './MessageProgress'
 import MessagePlain from './Message'
 import SubscriptionsHook, { Message } from './SubscriptionsHook'
 import { NotificationType } from '../../__generated__/globalTypes'
+import { MessageState } from './MessageState'
 
 const Container = styled.div`
   position: fixed;
@@ -19,34 +20,6 @@ const Container = styled.div`
   }
 `
 
-type MessageStateType = {
-  set: React.Dispatch<React.SetStateAction<Message[]>>
-  get: Message[]
-  add(message: Message): void
-  removeKey(key: string): void
-}
-
-export const MessageState: MessageStateType = {
-  set: fn => {
-    console.warn('set function is not defined yet, called with', fn)
-  },
-  get: [],
-  add: message => {
-    MessageState.set(messages => {
-      const newMessages = messages.filter(msg => msg.key != message.key)
-      newMessages.push(message)
-
-      return newMessages
-    })
-  },
-  removeKey: key => {
-    MessageState.set(messages => {
-      const newMessages = messages.filter(msg => msg.key != key)
-      return newMessages
-    })
-  },
-}
-
 const Messages = () => {
   const [messages, setMessages] = useState<Message[]>([])
   MessageState.set = setMessages