Files
kiss-translator/src/hooks/Setting.js

122 lines
2.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import {
createContext,
useCallback,
useContext,
useMemo,
useEffect,
} from "react";
import Alert from "@mui/material/Alert";
import {
STOKEY_SETTING,
DEFAULT_SETTING,
KV_SETTING_KEY,
MSG_SET_LOGLEVEL,
} from "../config";
import { useStorage } from "./Storage";
import { debounceSyncMeta } from "../libs/storage";
import Loading from "./Loading";
import { logger } from "../libs/log";
import { sendBgMsg } from "../libs/msg";
import { isExt } from "../libs/client";
const SettingContext = createContext({
setting: DEFAULT_SETTING,
updateSetting: () => {},
reloadSetting: () => {},
});
export function SettingProvider({ children, isSettingPage }) {
const {
data: setting,
isLoading,
update,
reload,
} = useStorage(
STOKEY_SETTING,
DEFAULT_SETTING,
isSettingPage ? KV_SETTING_KEY : ""
);
useEffect(() => {
if (typeof setting?.darkMode === "boolean") {
update((currentSetting) => ({
...currentSetting,
darkMode: currentSetting.darkMode ? "dark" : "light",
}));
}
}, [setting?.darkMode, update]);
useEffect(() => {
if (!isSettingPage) return;
(async () => {
try {
logger.setLevel(setting?.logLevel);
if (isExt) {
await sendBgMsg(MSG_SET_LOGLEVEL, setting?.logLevel);
}
} catch (error) {
logger.error("Failed to fetch log level, using default.", error);
}
})();
}, [isSettingPage, setting?.logLevel]);
const updateSetting = useCallback(
(objOrFn) => {
update(objOrFn);
debounceSyncMeta(KV_SETTING_KEY);
},
[update]
);
const updateChild = useCallback(
(key) => async (obj) => {
updateSetting((prev) => ({
...prev,
[key]: { ...(prev?.[key] || {}), ...obj },
}));
},
[updateSetting]
);
const value = useMemo(
() => ({
setting,
updateSetting,
updateChild,
reloadSetting: reload,
}),
[setting, updateSetting, updateChild, reload]
);
if (isLoading) {
return isSettingPage ? <Loading /> : null;
}
if (!setting) {
return isSettingPage ? (
<center>
<Alert severity="error" sx={{ maxWidth: 600, margin: "60px auto" }}>
<p>数据加载出错请刷新页面或卸载后重新安装</p>
<p>
Data loading error, please refresh the page or uninstall and
reinstall.
</p>
</Alert>
</center>
) : null;
}
return (
<SettingContext.Provider value={value}>{children}</SettingContext.Provider>
);
}
/**
* 设置 hook
* @returns
*/
export function useSetting() {
return useContext(SettingContext);
}