feat: Log level status is saved to local storage

This commit is contained in:
huzibaca 2024-11-18 08:14:21 +08:00
parent e8c0051be3
commit 77dd074fc3

View File

@ -2,6 +2,8 @@ import { useMemo, useState } from "react";
import { Box, Button, IconButton, MenuItem } from "@mui/material"; import { Box, Button, IconButton, MenuItem } from "@mui/material";
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from "react-virtuoso";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLocalStorage } from "foxact/use-local-storage";
import { import {
PlayCircleOutlineRounded, PlayCircleOutlineRounded,
PauseCircleOutlineRounded, PauseCircleOutlineRounded,
@ -20,17 +22,20 @@ const LogPage = () => {
const [enableLog, setEnableLog] = useEnableLog(); const [enableLog, setEnableLog] = useEnableLog();
const theme = useTheme(); const theme = useTheme();
const isDark = theme.palette.mode === "dark"; const isDark = theme.palette.mode === "dark";
const [logState, setLogState] = useState<LogLevel>("info"); const [logLevel, setLogLevel] = useLocalStorage<LogLevel>(
"log-level",
"info"
);
const [match, setMatch] = useState(() => (_: string) => true); const [match, setMatch] = useState(() => (_: string) => true);
const logData = useLogData(logState); const logData = useLogData(logLevel);
const filterLogs = useMemo(() => { const filterLogs = useMemo(() => {
return logData return logData
? logData.filter( ? logData.filter(
(data) => data.type.includes(logState) && match(data.payload) (data) => data.type.includes(logLevel) && match(data.payload)
) )
: []; : [];
}, [logData, logState, match]); }, [logData, logLevel, match]);
return ( return (
<BasePage <BasePage
@ -57,7 +62,7 @@ const LogPage = () => {
size="small" size="small"
variant="contained" variant="contained"
onClick={() => { onClick={() => {
clearLogs(logState); clearLogs(logLevel);
}} }}
> >
{t("Clear")} {t("Clear")}
@ -77,8 +82,8 @@ const LogPage = () => {
}} }}
> >
<BaseStyledSelect <BaseStyledSelect
value={logState} value={logLevel}
onChange={(e) => setLogState(e.target.value as LogLevel)} onChange={(e) => setLogLevel(e.target.value as LogLevel)}
> >
<MenuItem value="info">INFO</MenuItem> <MenuItem value="info">INFO</MenuItem>
<MenuItem value="warning">WARNING</MenuItem> <MenuItem value="warning">WARNING</MenuItem>