Fix regression messages not being sent from the beginning

src/Components/Messages/Messages.tsx

@@ -2,8 +2,6 @@ import { TrashIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { MessageType } from '../../Enums/MessageType';
-import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
-import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IMessage } from '../../Interfaces/IMessage';
 import { DISABLE_API } from '../../utils/default';
@@ -12,79 +10,14 @@ import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
 
 interface IMessagesProps {
   historyState: IHistoryState
-}
-
-// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-const myWorker = window.Worker && new Worker('workers/message_worker.js');
-
-function UseWorker(
-  state: IHistoryState,
-  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
-): void {
-  React.useEffect(() => {
-    // use webworker for the stringify to avoid freezing
-    myWorker.postMessage({
-      state,
-      url: import.meta.env.VITE_API_GET_FEEDBACK_URL
-    });
-
-    return () => {
-    };
-  }, [state]);
-
-  React.useEffect(() => {
-    myWorker.onmessage = (event) => {
-      setMessages(event.data as IMessage[]);
-    };
-  }, [setMessages]);
-}
-
-function UseAsync(
-  state: IHistoryState,
-  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
-): void {
-  React.useEffect(() => {
-    const request: IGetFeedbackRequest = {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      ApplicationState: state
-    };
-    const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
-    fetch(import.meta.env.VITE_API_GET_FEEDBACK_URL, {
-      method: 'POST',
-      headers: new Headers({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'Content-Type': 'application/json'
-      }),
-      body: dataParsed
-    })
-      .then(async(response) =>
-        await response.json()
-      )
-      .then(async(json: IGetFeedbackResponse) => {
-        setMessages(json.messages);
-      });
-  }, [state]);
+  messages: IMessage[]
+  clearMessage: () => void
 }
 
 export function Messages(props: IMessagesProps): JSX.Element {
-  const [messages, setMessages] = React.useState<IMessage[]>([]);
-
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  if (window.Worker && !DISABLE_API) {
-    UseWorker(
-      props.historyState,
-      setMessages
-    );
-  } else if (!DISABLE_API) {
-    UseAsync(
-      props.historyState,
-      setMessages
-    );
-  }
-
   function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
-    const reversedIndex = (messages.length - 1) - index;
-    const message = messages[reversedIndex];
+    const reversedIndex = (props.messages.length - 1) - index;
+    const message = props.messages[reversedIndex];
     let classType = '';
     switch (message.type) {
       case MessageType.Success:
@@ -114,7 +47,7 @@ export function Messages(props: IMessagesProps): JSX.Element {
     <div>
       <div className='hover:bg-slate-300 h-7 text-right pr-1 pl-1'>
         <button
-          onClick={() => { setMessages([]); }}
+          onClick={() => { props.clearMessage(); }}
           className='h-full hover:bg-slate-400 rounded-lg p-1'
           aria-label='Clear all messages'
           title='Clear all messages'
@@ -124,7 +57,7 @@ export function Messages(props: IMessagesProps): JSX.Element {
       </div>
       <List
         className='List md:text-xs font-bold'
-        itemCount={messages.length}
+        itemCount={props.messages.length}
         itemSize={65}
         height={window.innerHeight - TITLE_BAR_HEIGHT - toolbarHeight}
         width={'100%'}

src/Components/UI/UI.tsx

@@ -15,6 +15,9 @@ import { Sidebar } from '../Sidebar/Sidebar';
 import { Components } from '../Components/Components';
 import { Viewer } from '../Viewer/Viewer';
 import { Settings } from '../Settings/Settings';
+import { IMessage } from '../../Interfaces/IMessage';
+import { DISABLE_API } from '../../utils/default';
+import { UseWorker, UseAsync } from './UseWorker';
 
 export interface IUIProps {
   selectedContainer: IContainerModel | undefined
@@ -63,6 +66,20 @@ function UseSetOrToggleSidebar(
 
 export function UI(props: IUIProps): JSX.Element {
   const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
+  const [messages, setMessages] = React.useState<IMessage[]>([]);
+
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (window.Worker && !DISABLE_API) {
+    UseWorker(
+      props.current,
+      setMessages
+    );
+  } else if (!DISABLE_API) {
+    UseAsync(
+      props.current,
+      setMessages
+    );
+  }
 
   // Please use setOrToggleSidebar rather than setSelectedSidebar so we can close the sidebar
   const setOrToggleSidebar = UseSetOrToggleSidebar(selectedSidebar, setSelectedSidebar);
@@ -120,6 +137,8 @@ export function UI(props: IUIProps): JSX.Element {
       leftSidebarTitle = 'Messages';
       leftChildren = <Messages
         historyState={props.current}
+        messages={messages}
+        clearMessage={() => setMessages([])}
       />;
       break;
 

src/Components/UI/UseWorker.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
+import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
+import { IMessage } from '../../Interfaces/IMessage';
+import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
+
+// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+const myWorker = window.Worker && new Worker('workers/message_worker.js');
+
+export function UseWorker(
+  state: IHistoryState,
+  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>): void {
+  React.useEffect(() => {
+    // use webworker for the stringify to avoid freezing
+    myWorker.postMessage({
+      state,
+      url: import.meta.env.VITE_API_GET_FEEDBACK_URL
+    });
+
+    return () => {
+    };
+  }, [state]);
+
+  React.useEffect(() => {
+    myWorker.onmessage = (event) => {
+      setMessages(event.data as IMessage[]);
+    };
+  }, [setMessages]);
+}
+export function UseAsync(
+  state: IHistoryState,
+  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>): void {
+  React.useEffect(() => {
+    const request: IGetFeedbackRequest = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      ApplicationState: state
+    };
+    const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
+    fetch(import.meta.env.VITE_API_GET_FEEDBACK_URL, {
+      method: 'POST',
+      headers: new Headers({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json'
+      }),
+      body: dataParsed
+    })
+      .then(async (response) => await response.json()
+      )
+      .then(async (json: IGetFeedbackResponse) => {
+        setMessages(json.messages);
+      });
+  }, [state]);
+}