Fix message sidebar when webworker are not supported

src/Components/MessagesSidebar/MessagesSidebar.tsx

@@ -1,20 +1,23 @@
 import { TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';
+import { IGetFeedbackRequest } from '../../dts/dist/Interfaces/IGetFeedbackRequest';
 import { MessageType } from '../../Enums/MessageType';
+import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IMessage } from '../../Interfaces/IMessage';
+import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
 
 interface IMessagesSidebarProps {
   historyState: IHistoryState
   isOpen: boolean
 }
 
-const myWorker = new Worker('workers/message_worker.js');
+// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+const myWorker = window.Worker && new Worker('workers/message_worker.js');
 
 function UseWorker(
   state: IHistoryState,
-  messages: IMessage[],
   setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
 ): void {
   React.useEffect(() => {
@@ -32,17 +35,50 @@ function UseWorker(
     myWorker.onmessage = (event) => {
       setMessages(event.data as IMessage[]);
     };
-  }, [messages, setMessages]);
+  }, [setMessages]);
+}
+
+function UseAsync(
+  state: IHistoryState,
+  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
+): void {
+  React.useEffect(() => {
+    const request: IGetFeedbackRequest = {
+      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]);
 }
 
 export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
   const [messages, setMessages] = React.useState<IMessage[]>([]);
 
-  UseWorker(
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    props.historyState,
+  if (window.Worker) {
-    messages,
+    UseWorker(
-    setMessages
+      props.historyState,
-  );
+      setMessages
+    );
+  } else {
+    UseAsync(
+      props.historyState,
+      setMessages
+    );
+  }
 
   function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
     const reversedIndex = (messages.length - 1) - index;