Add log type filter (#185)

Author: MegaPiggy

app/components/Logs/LogTypeSelect.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { makeStyles, Select, MenuItem } from '@material-ui/core';
+import { uniq } from 'lodash';
+
+import { logsText } from '../../helpers/static-text';
+import { LogLine, LogType } from '../../types';
+import { debugConsole } from '../../helpers/console-log';
+
+const useStyles = makeStyles({
+  root: {
+    maxWidth: 150,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+});
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  logLines: LogLine[];
+};
+
+const LogTypeSelect: React.FunctionComponent<Props> = ({
+  value,
+  onChange,
+  logLines,
+}) => {
+  const styles = useStyles();
+  const [logTypes, setLogTypes] = useState<LogType[]>([]);
+
+  useEffect(() => {
+    debugConsole.log('useEffect: LogTypeSelect set log type');
+    setLogTypes(uniq(logLines.map((line) => line.type)));
+  }, [logLines]);
+
+  const handleLogTypeChange = ({
+    target,
+  }: React.ChangeEvent<{
+    name?: string | undefined;
+    value: unknown;
+  }>) => {
+    onChange(target.value as string);
+  };
+
+  return (
+    <Select
+      variant="outlined"
+      margin="dense"
+      className={styles.root}
+      value={value}
+      onChange={handleLogTypeChange}
+      displayEmpty
+    >
+      <MenuItem value={''}>{logsText.allTypes}</MenuItem>
+      {logTypes.map((logType) => (
+        <MenuItem value={logType} key={logType}>
+          {logType}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+export default LogTypeSelect;

app/components/Logs/LogsPage.tsx

@@ -21,6 +21,7 @@ import { LogLine } from '../../types';
 import { useSettings } from '../../hooks';
 import FilterInput from '../FilterInput';
 import ModNameSelect from './ModNameSelect';
+import LogTypeSelect from './LogTypeSelect';
 import PageContainer from '../PageContainer';
 import { useRecoilState } from 'recoil';
 import { logLinesState } from '../../store';
@@ -63,6 +64,9 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
   header: {
     backgroundColor: 'white',
   },
+  typeSelectHeader: {
+    width: 150,
+  },
   modSelectHeader: {
     width: 150,
   },
@@ -100,6 +104,7 @@ const OwmlLog: React.FunctionComponent = () => {
 
   const [paginatedLines, setPaginatedLines] = useState<LogLine[]>([]);
   const [selectedModName, setSelectedModName] = useState<string>('');
+  const [selectedLogType, setSelectedLogType] = useState<string>('');
   const [filter, setFilter] = useState('');
   const [page, setPage] = useState<number>(0);
 
@@ -122,16 +127,19 @@ const OwmlLog: React.FunctionComponent = () => {
     const lowerCaseFilter = filter.toLowerCase();
     const isFilteringByName = filter !== '';
     const isFilteringByMod = selectedModName !== '';
+    const isFilteringByType = selectedLogType !== '';
 
     let filteredLines: LogLine[] = [];
-    if (isFilteringByName || isFilteringByMod) {
+    if (isFilteringByName || isFilteringByMod || isFilteringByType) {
       filteredLines = logLines.filter((line) => {
         const isFromSelectedMod =
           !isFilteringByMod || line.modName === selectedModName;
+        const isFromSelectedType =
+          !isFilteringByType || line.type === selectedLogType;
         const isMatchWithFilter =
           !isFilteringByName ||
           line.text.toLowerCase().includes(lowerCaseFilter);
-        return isMatchWithFilter && isFromSelectedMod;
+        return isMatchWithFilter && isFromSelectedMod && isFromSelectedType;
       });
     } else {
       filteredLines = logLines;
@@ -152,12 +160,12 @@ const OwmlLog: React.FunctionComponent = () => {
     hasHiddenLines.current = logLines.length !== lines.length;
 
     setPaginatedLines(lines);
-  }, [filter, logLines, selectedModName, page, logLinesLimit]);
+  }, [filter, logLines, selectedModName, selectedLogType, page, logLinesLimit]);
 
   useEffect(() => {
     debugConsole.log('useEffect: LogsPage pagination reset');
     setPage(0);
-  }, [filter, selectedModName]);
+  }, [filter, selectedModName, selectedLogType]);
 
   function handlePreviousPageClick() {
     setPage((prevPage) => prevPage + 1);
@@ -201,6 +209,13 @@ const OwmlLog: React.FunctionComponent = () => {
                   </IconButton>
                 </Tooltip>
               </LogCell>
+              <LogCell className={styles.typeSelectHeader}>
+                <LogTypeSelect
+                  value={selectedLogType}
+                  onChange={setSelectedLogType}
+                  logLines={logLines}
+                />
+              </LogCell>
               <LogCell className={styles.modSelectHeader}>
                 <ModNameSelect
                   value={selectedModName}

app/helpers/static-text.ts

@@ -29,7 +29,8 @@ export const logsText = {
   filterLogsLabel: 'Filter logs',
   clearLogs: 'Clear log entries',
   connectedToConsole: 'Client connected to console',
-  allMods: 'All logs',
+  allTypes: 'All types',
+  allMods: 'All mods',
   disconnectedFromConsole: 'Client disconnected from console',
   consoleServerStart: (port: number) =>
     `Started console server on port ${port}`,