Add clear button to logs tab. Closes #23

src/renderer/react/ModManagerLogs.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import ReactVirtualizedAutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { Clear } from '@mui/icons-material';
 import CloseIcon from '@mui/icons-material/Close';
 import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
 import DownloadIcon from '@mui/icons-material/Download';
@@ -20,6 +21,7 @@ import {
   AppBar,
   Box,
   Button,
+  ButtonGroup,
   Divider,
   Drawer,
   IconButton,
@@ -37,7 +39,7 @@ import {
 } from '@mui/material';
 import type { ILogLevel } from 'bridge/ConsoleAPI';
 import { useIsInstalling } from './context/InstallContext';
-import { useLogLevels, useLogs } from './context/LogContext';
+import { useLogLevels, useLogger, useLogs } from './context/LogContext';
 
 const ROW_HEIGHT = 80;
 
@@ -59,6 +61,7 @@ type Props = Record<string, never>;
 
 export default function ModManagerSettings(_props: Props): JSX.Element {
   const logs = useLogs();
+  const { clear } = useLogger();
   const [isInstalling] = useIsInstalling();
   const [levels, setLevels] = useLogLevels();
   const [filter, setFilter] = useState('');
@@ -67,6 +70,10 @@ export default function ModManagerSettings(_props: Props): JSX.Element {
   const [exportAnchorEl, setExportAnchorEl] =
     useState<HTMLButtonElement | null>(null);
 
+  const onClear = useCallback(() => {
+    clear();
+  }, [clear]);
+
   const onOpenExportMenu = useCallback(
     (event: MouseEvent<HTMLButtonElement>): void =>
       setExportAnchorEl(event.currentTarget),
@@ -260,13 +267,18 @@ export default function ModManagerSettings(_props: Props): JSX.Element {
             Debug
           </ToggleButton>
         </ToggleButtonGroup>
-        <Button
-          onClick={onOpenExportMenu}
-          startIcon={<DownloadIcon />}
-          variant="outlined"
-        >
-          Export
-        </Button>
+        <ButtonGroup>
+          <Button
+            onClick={onOpenExportMenu}
+            startIcon={<DownloadIcon />}
+            variant="outlined"
+          >
+            Export
+          </Button>
+          <Button onClick={onClear} startIcon={<Clear />} variant="outlined">
+            Clear
+          </Button>
+        </ButtonGroup>
         <Menu
           anchorEl={exportAnchorEl}
           onClose={onCloseExportMenu}

src/renderer/react/context/LogContext.tsx

@@ -1,10 +1,9 @@
 import React, {
   useCallback,
   useContext,
-  useEffect,
   useMemo,
-  useRef,
   useState,
+  useTransition,
 } from 'react';
 import type { ConsoleArg, ILogLevel } from 'bridge/ConsoleAPI';
 import useConsoleListener from '../hooks/useConsoleListener';
@@ -69,7 +68,7 @@ type Props = {
 };
 
 export function LogsProvider({ children }: Props): JSX.Element {
-  const logsRef = useRef<ILogs>([]);
+  const [, startTransition] = useTransition();
   const [logs, setLogs] = useState<ILogs>([]);
   const [levels, setLevels] = useState<ILogLevel[]>(['error', 'warn', 'log']);
 
@@ -82,12 +81,9 @@ export function LogsProvider({ children }: Props): JSX.Element {
       timestamp: Date.now(),
       data: args,
     };
-
-    // TODO: use R18 transitions instaed
-    // we don't necessarily want to re-render every time a log comes in
-    // it could get laggy, and it could break if the log is from a React render error
-    // so we put them all in a ref and update the state every second
-    logsRef.current = [...logsRef.current, newLog];
+    startTransition(() => {
+      setLogs((logs) => [...logs, newLog]);
+    });
   }, []);
 
   const error = useCallback(
@@ -124,13 +120,6 @@ export function LogsProvider({ children }: Props): JSX.Element {
 
   useConsoleListener(add);
 
-  useEffect(() => {
-    const intervalID = setInterval(() => {
-      setLogs(logsRef.current);
-    }, 1000);
-    return () => clearInterval(intervalID);
-  }, []);
-
   return (
     <WriterContext.Provider value={writerContext}>
       <ReaderContext.Provider value={readerContext}>