From 32684a725b9aaa6d6537e614a6403fd242bb782f Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Mon, 3 Oct 2022 20:35:25 +0200 Subject: [PATCH] Fix regression messages not being sent from the beginning --- src/Components/Messages/Messages.tsx | 79 +++------------------------- src/Components/UI/UI.tsx | 19 +++++++ src/Components/UI/UseWorker.tsx | 54 +++++++++++++++++++ 3 files changed, 79 insertions(+), 73 deletions(-) create mode 100644 src/Components/UI/UseWorker.tsx diff --git a/src/Components/Messages/Messages.tsx b/src/Components/Messages/Messages.tsx index 5fd60de..139a123 100644 --- a/src/Components/Messages/Messages.tsx +++ b/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> -): 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> -): 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([]); - - // 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 {
(SidebarType.Components); + const [messages, setMessages] = React.useState([]); + + // 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 = setMessages([])} />; break; diff --git a/src/Components/UI/UseWorker.tsx b/src/Components/UI/UseWorker.tsx new file mode 100644 index 0000000..732c83a --- /dev/null +++ b/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>): 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>): 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]); +}