diff --git a/src/Components/MessagesSidebar/MessagesSidebar.tsx b/src/Components/MessagesSidebar/MessagesSidebar.tsx index c3fc8bf..ca86e3a 100644 --- a/src/Components/MessagesSidebar/MessagesSidebar.tsx +++ b/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> ): 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> +): 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([]); - UseWorker( - props.historyState, - messages, - setMessages - ); + // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions + if (window.Worker) { + UseWorker( + 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;