Merged PR 185: Implement Messages

src/Components/MessagesSidebar/MessagesSidebar.tsx

@@ -0,0 +1,100 @@
+import { TrashIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { FixedSizeList as List } from 'react-window';
+import { MessageType } from '../../Enums/MessageType';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { IMessage } from '../../Interfaces/IMessage';
+
+interface IMessagesSidebarProps {
+  historyState: IHistoryState
+  isOpen: boolean
+}
+
+const myWorker = new Worker('workers/message_worker.js');
+
+function UseWorker(
+  state: IHistoryState,
+  messages: IMessage[],
+  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(messages.concat(event.data as IMessage[]));
+    };
+  }, [messages, setMessages]);
+}
+
+export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
+  const [messages, setMessages] = React.useState<IMessage[]>([]);
+
+  UseWorker(
+    props.historyState,
+    messages,
+    setMessages
+  );
+
+  function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
+    const reversedIndex = (messages.length - 1) - index;
+    const message = messages[reversedIndex];
+    let classType = '';
+    switch (message.type) {
+      case MessageType.Success:
+        classType = 'bg-green-400 hover:bg-green-400/60';
+        break;
+
+      case MessageType.Warning:
+        classType = 'bg-yellow-400 hover:bg-yellow-400/60';
+        break;
+
+      case MessageType.Error:
+        classType = 'bg-red-400 hover:bg-red-400/60';
+        break;
+    }
+    return (<p
+      key={`m-${reversedIndex}`}
+      className={`p-2 ${classType}`}
+      style={style}
+    >
+      {message.text}
+    </p>);
+  }
+
+  const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
+  return (
+    <div className={`fixed z-10 bg-slate-200
+      text-gray-700 transition-all h-full w-64
+      ${isOpenClasses}`}>
+      <div className='bg-slate-100 sidebar-title flex place-content-between'>
+        Messages
+        <button
+          onClick={() => { setMessages([]); }}
+          className='h-6'
+          aria-label='Clear all messages'
+          title='Clear all messages'
+        >
+          <TrashIcon className='heroicon'></TrashIcon>
+        </button>
+      </div>
+      <List
+        className='List md:text-xs font-bold'
+        itemCount={messages.length}
+        itemSize={65}
+        height={window.innerHeight}
+        width={256}
+      >
+        {Row}
+      </List>
+    </div>
+  );
+};