feat: Extensive refactoring and modification to support any number of interfaces
This commit is contained in:
Gabe
123
src/hooks/Api.js
123
src/hooks/Api.js
@@ -1,34 +1,107 @@
|
||||
import { useCallback } from "react";
|
||||
import { DEFAULT_TRANS_APIS } from "../config";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { DEFAULT_API_LIST, API_SPE_TYPES } from "../config";
|
||||
import { useSetting } from "./Setting";
|
||||
|
||||
export function useApi(translator) {
|
||||
function useApiState() {
|
||||
const { setting, updateSetting } = useSetting();
|
||||
const transApis = setting?.transApis || DEFAULT_TRANS_APIS;
|
||||
const transApis = setting?.transApis || [];
|
||||
|
||||
const updateApi = useCallback(
|
||||
async (obj) => {
|
||||
const api = {
|
||||
...DEFAULT_TRANS_APIS[translator],
|
||||
...(transApis[translator] || {}),
|
||||
};
|
||||
Object.assign(transApis, { [translator]: { ...api, ...obj } });
|
||||
await updateSetting({ transApis });
|
||||
},
|
||||
[translator, transApis, updateSetting]
|
||||
return { transApis, updateSetting };
|
||||
}
|
||||
|
||||
export function useApiList() {
|
||||
const { transApis, updateSetting } = useApiState();
|
||||
|
||||
const userApis = useMemo(
|
||||
() =>
|
||||
transApis
|
||||
.filter((api) => !API_SPE_TYPES.builtin.has(api.apiSlug))
|
||||
.sort((a, b) => a.apiSlug.localeCompare(b.apiSlug)),
|
||||
[transApis]
|
||||
);
|
||||
|
||||
const resetApi = useCallback(async () => {
|
||||
Object.assign(transApis, { [translator]: DEFAULT_TRANS_APIS[translator] });
|
||||
await updateSetting({ transApis });
|
||||
}, [translator, transApis, updateSetting]);
|
||||
const builtinApis = useMemo(
|
||||
() => transApis.filter((api) => API_SPE_TYPES.builtin.has(api.apiSlug)),
|
||||
[transApis]
|
||||
);
|
||||
|
||||
return {
|
||||
api: {
|
||||
...DEFAULT_TRANS_APIS[translator],
|
||||
...(transApis[translator] || {}),
|
||||
const enabledApis = useMemo(
|
||||
() => transApis.filter((api) => !api.isDisabled),
|
||||
[transApis]
|
||||
);
|
||||
|
||||
const addApi = useCallback(
|
||||
(apiType) => {
|
||||
const defaultApiOpt =
|
||||
DEFAULT_API_LIST.find((da) => da.apiType === apiType) || {};
|
||||
const uuid = crypto.randomUUID();
|
||||
const apiSlug = `${apiType}_${crypto.randomUUID()}`;
|
||||
const apiName = `${apiType}_${uuid.slice(0, 8)}`;
|
||||
const newApi = {
|
||||
...defaultApiOpt,
|
||||
apiSlug,
|
||||
apiName,
|
||||
apiType,
|
||||
};
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
transApis: [...(prev?.transApis || []), newApi],
|
||||
}));
|
||||
},
|
||||
updateApi,
|
||||
resetApi,
|
||||
};
|
||||
[updateSetting]
|
||||
);
|
||||
|
||||
const deleteApi = useCallback(
|
||||
(apiSlug) => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
transApis: (prev?.transApis || []).filter((api) => api.apiSlug !== apiSlug),
|
||||
}));
|
||||
},
|
||||
[updateSetting]
|
||||
);
|
||||
|
||||
return { transApis, userApis, builtinApis, enabledApis, addApi, deleteApi };
|
||||
}
|
||||
|
||||
export function useApiItem(apiSlug) {
|
||||
const { transApis, updateSetting } = useApiState();
|
||||
|
||||
const api = useMemo(
|
||||
() => transApis.find((a) => a.apiSlug === apiSlug),
|
||||
[transApis, apiSlug]
|
||||
);
|
||||
|
||||
const update = useCallback(
|
||||
(updateData) => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
transApis: (prev?.transApis || []).map((item) =>
|
||||
item.apiSlug === apiSlug ? { ...item, ...updateData, apiSlug } : item
|
||||
),
|
||||
}));
|
||||
},
|
||||
[apiSlug, updateSetting]
|
||||
);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
transApis: (prev?.transApis || []).map((item) => {
|
||||
if (item.apiSlug === apiSlug) {
|
||||
const defaultApiOpt =
|
||||
DEFAULT_API_LIST.find((da) => da.apiType === item.apiType) || {};
|
||||
return {
|
||||
...defaultApiOpt,
|
||||
apiSlug: item.apiSlug,
|
||||
apiName: item.apiName,
|
||||
apiType: item.apiType,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
}));
|
||||
}, [apiSlug, updateSetting]);
|
||||
|
||||
return { api, update, reset };
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ export function useTextAudio(text, lan = "uk", spd = 3) {
|
||||
try {
|
||||
setSrc(await apiBaiduTTS(text, lan, spd));
|
||||
} catch (err) {
|
||||
kissLog(err, "baidu tts");
|
||||
kissLog("baidu tts", err);
|
||||
}
|
||||
})();
|
||||
}, [text, lan, spd]);
|
||||
|
||||
@@ -11,8 +11,8 @@ export function useDarkMode() {
|
||||
updateSetting,
|
||||
} = useSetting();
|
||||
|
||||
const toggleDarkMode = useCallback(async () => {
|
||||
await updateSetting({ darkMode: !darkMode });
|
||||
const toggleDarkMode = useCallback(() => {
|
||||
updateSetting({ darkMode: !darkMode });
|
||||
}, [darkMode, updateSetting]);
|
||||
|
||||
return { darkMode, toggleDarkMode };
|
||||
|
||||
97
src/hooks/Confirm.js
Normal file
97
src/hooks/Confirm.js
Normal file
@@ -0,0 +1,97 @@
|
||||
import {
|
||||
useState,
|
||||
useContext,
|
||||
createContext,
|
||||
useCallback,
|
||||
useRef,
|
||||
useMemo,
|
||||
} from "react";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogActions from "@mui/material/DialogActions";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import DialogContentText from "@mui/material/DialogContentText";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import Button from "@mui/material/Button";
|
||||
import { useI18n } from "./I18n";
|
||||
|
||||
const ConfirmContext = createContext(null);
|
||||
|
||||
export function ConfirmProvider({ children }) {
|
||||
const [dialogConfig, setDialogConfig] = useState(null);
|
||||
const resolveRef = useRef(null);
|
||||
const i18n = useI18n();
|
||||
|
||||
const translatedDefaults = useMemo(
|
||||
() => ({
|
||||
title: i18n("confirm_title", "Confirm"),
|
||||
message: i18n("confirm_message", "Are you sure you want to proceed?"),
|
||||
confirmText: i18n("confirm_action", "Confirm"),
|
||||
cancelText: i18n("cancel_action", "Cancel"),
|
||||
}),
|
||||
[i18n]
|
||||
);
|
||||
|
||||
const confirm = useCallback(
|
||||
(config) => {
|
||||
return new Promise((resolve) => {
|
||||
setDialogConfig({ ...translatedDefaults, ...config });
|
||||
resolveRef.current = resolve;
|
||||
});
|
||||
},
|
||||
[translatedDefaults]
|
||||
);
|
||||
|
||||
const handleClose = () => {
|
||||
if (resolveRef.current) {
|
||||
resolveRef.current(false);
|
||||
}
|
||||
setDialogConfig(null);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (resolveRef.current) {
|
||||
resolveRef.current(true);
|
||||
}
|
||||
setDialogConfig(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfirmContext.Provider value={confirm}>
|
||||
{children}
|
||||
|
||||
<Dialog
|
||||
open={!!dialogConfig}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="confirm-dialog-title"
|
||||
aria-describedby="confirm-dialog-description"
|
||||
>
|
||||
{dialogConfig && (
|
||||
<>
|
||||
<DialogTitle id="confirm-dialog-title">
|
||||
{dialogConfig.title}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="confirm-dialog-description">
|
||||
{dialogConfig.message}
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>{dialogConfig.cancelText}</Button>
|
||||
<Button onClick={handleConfirm} color="primary" autoFocus>
|
||||
{dialogConfig.confirmText}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)}
|
||||
</Dialog>
|
||||
</ConfirmContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useConfirm() {
|
||||
const context = useContext(ConfirmContext);
|
||||
if (!context) {
|
||||
throw new Error("useConfirm must be used within a ConfirmProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
17
src/hooks/DebouncedCallback.js
Normal file
17
src/hooks/DebouncedCallback.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useMemo, useEffect, useRef } from "react";
|
||||
import { debounce } from "../libs/utils";
|
||||
|
||||
export function useDebouncedCallback(callback, delay) {
|
||||
const callbackRef = useRef(callback);
|
||||
|
||||
useEffect(() => {
|
||||
callbackRef.current = callback;
|
||||
}, [callback]);
|
||||
|
||||
const debouncedCallback = useMemo(
|
||||
() => debounce((...args) => callbackRef.current(...args), delay),
|
||||
[delay]
|
||||
);
|
||||
|
||||
return debouncedCallback;
|
||||
}
|
||||
@@ -1,11 +1,13 @@
|
||||
import { STOKEY_FAB } from "../config";
|
||||
import { useStorage } from "./Storage";
|
||||
|
||||
const DEFAULT_FAB = {};
|
||||
|
||||
/**
|
||||
* fab hook
|
||||
* @returns
|
||||
*/
|
||||
export function useFab() {
|
||||
const { data, update } = useStorage(STOKEY_FAB);
|
||||
const { data, update } = useStorage(STOKEY_FAB, DEFAULT_FAB);
|
||||
return { fab: data, updateFab: update };
|
||||
}
|
||||
|
||||
@@ -1,68 +1,55 @@
|
||||
import { KV_WORDS_KEY } from "../config";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { trySyncWords } from "../libs/sync";
|
||||
import { getWordsWithDefault, setWords } from "../libs/storage";
|
||||
import { useSyncMeta } from "./Sync";
|
||||
import { kissLog } from "../libs/log";
|
||||
import { STOKEY_WORDS, KV_WORDS_KEY } from "../config";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useStorage } from "./Storage";
|
||||
|
||||
const DEFAULT_FAVWORDS = {};
|
||||
|
||||
export function useFavWords() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [favWords, setFavWords] = useState({});
|
||||
const { updateSyncMeta } = useSyncMeta();
|
||||
const { data: favWords, save } = useStorage(
|
||||
STOKEY_WORDS,
|
||||
DEFAULT_FAVWORDS,
|
||||
KV_WORDS_KEY
|
||||
);
|
||||
|
||||
const toggleFav = useCallback(
|
||||
async (word) => {
|
||||
const favs = { ...favWords };
|
||||
if (favs[word]) {
|
||||
(word) => {
|
||||
save((prev) => {
|
||||
if (!prev[word]) {
|
||||
return { ...prev, [word]: { createdAt: Date.now() } };
|
||||
}
|
||||
|
||||
const favs = { ...prev };
|
||||
delete favs[word];
|
||||
} else {
|
||||
favs[word] = { createdAt: Date.now() };
|
||||
}
|
||||
await setWords(favs);
|
||||
await updateSyncMeta(KV_WORDS_KEY);
|
||||
await trySyncWords();
|
||||
setFavWords(favs);
|
||||
return favs;
|
||||
});
|
||||
},
|
||||
[updateSyncMeta, favWords]
|
||||
[save]
|
||||
);
|
||||
|
||||
const mergeWords = useCallback(
|
||||
async (newWords) => {
|
||||
const favs = { ...favWords };
|
||||
newWords.forEach((word) => {
|
||||
if (!favs[word]) {
|
||||
favs[word] = { createdAt: Date.now() };
|
||||
}
|
||||
});
|
||||
await setWords(favs);
|
||||
await updateSyncMeta(KV_WORDS_KEY);
|
||||
await trySyncWords();
|
||||
setFavWords(favs);
|
||||
(words) => {
|
||||
save((prev) => ({
|
||||
...words.reduce((acc, key) => {
|
||||
acc[key] = { createdAt: Date.now() };
|
||||
return acc;
|
||||
}, {}),
|
||||
...prev,
|
||||
}));
|
||||
},
|
||||
[updateSyncMeta, favWords]
|
||||
[save]
|
||||
);
|
||||
|
||||
const clearWords = useCallback(async () => {
|
||||
await setWords({});
|
||||
await updateSyncMeta(KV_WORDS_KEY);
|
||||
await trySyncWords();
|
||||
setFavWords({});
|
||||
}, [updateSyncMeta]);
|
||||
const clearWords = useCallback(() => {
|
||||
save({});
|
||||
}, [save]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await trySyncWords();
|
||||
const favWords = await getWordsWithDefault();
|
||||
setFavWords(favWords);
|
||||
} catch (err) {
|
||||
kissLog(err, "query fav");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
const favList = useMemo(
|
||||
() =>
|
||||
Object.entries(favWords || {}).sort((a, b) => a[0].localeCompare(b[0])),
|
||||
[favWords]
|
||||
);
|
||||
|
||||
return { loading, favWords, toggleFav, mergeWords, clearWords };
|
||||
const wordList = useMemo(() => favList.map(([word]) => word), [favList]);
|
||||
|
||||
return { favWords, favList, wordList, toggleFav, mergeWords, clearWords };
|
||||
}
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
import { useCallback } from "react";
|
||||
import { DEFAULT_INPUT_RULE } from "../config";
|
||||
import { useSetting } from "./Setting";
|
||||
|
||||
export function useInputRule() {
|
||||
const { setting, updateSetting } = useSetting();
|
||||
const { setting, updateChild } = useSetting();
|
||||
const inputRule = setting?.inputRule || DEFAULT_INPUT_RULE;
|
||||
|
||||
const updateInputRule = useCallback(
|
||||
async (obj) => {
|
||||
Object.assign(inputRule, obj);
|
||||
await updateSetting({ inputRule });
|
||||
},
|
||||
[inputRule, updateSetting]
|
||||
);
|
||||
const updateInputRule = updateChild("inputRule");
|
||||
|
||||
return { inputRule, updateInputRule };
|
||||
}
|
||||
|
||||
16
src/hooks/Loading.js
Normal file
16
src/hooks/Loading.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import CircularProgress from "@mui/material/CircularProgress";
|
||||
import Link from "@mui/material/Link";
|
||||
import Divider from "@mui/material/Divider";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<center>
|
||||
<Divider>
|
||||
<Link
|
||||
href={process.env.REACT_APP_HOMEPAGE}
|
||||
>{`KISS Translator v${process.env.REACT_APP_VERSION}`}</Link>
|
||||
</Divider>
|
||||
<CircularProgress />
|
||||
</center>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,11 @@
|
||||
import { useCallback } from "react";
|
||||
import { DEFAULT_MOUSE_HOVER_SETTING } from "../config";
|
||||
import { useSetting } from "./Setting";
|
||||
|
||||
export function useMouseHoverSetting() {
|
||||
const { setting, updateSetting } = useSetting();
|
||||
const { setting, updateChild } = useSetting();
|
||||
const mouseHoverSetting =
|
||||
setting?.mouseHoverSetting || DEFAULT_MOUSE_HOVER_SETTING;
|
||||
|
||||
const updateMouseHoverSetting = useCallback(
|
||||
async (obj) => {
|
||||
Object.assign(mouseHoverSetting, obj);
|
||||
await updateSetting({ mouseHoverSetting });
|
||||
},
|
||||
[mouseHoverSetting, updateSetting]
|
||||
);
|
||||
const updateMouseHoverSetting = updateChild("mouseHoverSetting");
|
||||
|
||||
return { mouseHoverSetting, updateMouseHoverSetting };
|
||||
}
|
||||
|
||||
@@ -1,90 +1,88 @@
|
||||
import { STOKEY_RULES, DEFAULT_RULES, KV_RULES_KEY } from "../config";
|
||||
import { useStorage } from "./Storage";
|
||||
import { trySyncRules } from "../libs/sync";
|
||||
import { checkRules } from "../libs/rules";
|
||||
import { useCallback } from "react";
|
||||
import { useSyncMeta } from "./Sync";
|
||||
|
||||
/**
|
||||
* 规则 hook
|
||||
* @returns
|
||||
*/
|
||||
export function useRules() {
|
||||
const { data: list, save } = useStorage(STOKEY_RULES, DEFAULT_RULES);
|
||||
const { updateSyncMeta } = useSyncMeta();
|
||||
|
||||
const updateRules = useCallback(
|
||||
async (rules) => {
|
||||
await save(rules);
|
||||
await updateSyncMeta(KV_RULES_KEY);
|
||||
trySyncRules();
|
||||
},
|
||||
[save, updateSyncMeta]
|
||||
const { data: list, save } = useStorage(
|
||||
STOKEY_RULES,
|
||||
DEFAULT_RULES,
|
||||
KV_RULES_KEY
|
||||
);
|
||||
|
||||
const add = useCallback(
|
||||
async (rule) => {
|
||||
const rules = [...list];
|
||||
if (rule.pattern === "*") {
|
||||
return;
|
||||
}
|
||||
if (rules.map((item) => item.pattern).includes(rule.pattern)) {
|
||||
return;
|
||||
}
|
||||
rules.unshift(rule);
|
||||
await updateRules(rules);
|
||||
(rule) => {
|
||||
save((prev) => {
|
||||
if (
|
||||
rule.pattern === "*" ||
|
||||
prev.some((item) => item.pattern === rule.pattern)
|
||||
) {
|
||||
return prev;
|
||||
}
|
||||
return [rule, ...prev];
|
||||
});
|
||||
},
|
||||
[list, updateRules]
|
||||
[save]
|
||||
);
|
||||
|
||||
const del = useCallback(
|
||||
async (pattern) => {
|
||||
let rules = [...list];
|
||||
if (pattern === "*") {
|
||||
return;
|
||||
}
|
||||
rules = rules.filter((item) => item.pattern !== pattern);
|
||||
await updateRules(rules);
|
||||
(pattern) => {
|
||||
save((prev) => {
|
||||
if (pattern === "*") {
|
||||
return prev;
|
||||
}
|
||||
return prev.filter((item) => item.pattern !== pattern);
|
||||
});
|
||||
},
|
||||
[list, updateRules]
|
||||
[save]
|
||||
);
|
||||
|
||||
const clear = useCallback(async () => {
|
||||
let rules = [...list];
|
||||
rules = rules.filter((item) => item.pattern === "*");
|
||||
await updateRules(rules);
|
||||
}, [list, updateRules]);
|
||||
const clear = useCallback(() => {
|
||||
save((prev) => prev.filter((item) => item.pattern === "*"));
|
||||
}, [save]);
|
||||
|
||||
const put = useCallback(
|
||||
async (pattern, obj) => {
|
||||
const rules = [...list];
|
||||
if (pattern === "*") {
|
||||
obj.pattern = "*";
|
||||
}
|
||||
const rule = rules.find((r) => r.pattern === pattern);
|
||||
rule && Object.assign(rule, obj);
|
||||
await updateRules(rules);
|
||||
(pattern, obj) => {
|
||||
save((prev) => {
|
||||
if (
|
||||
prev.some(
|
||||
(item) => item.pattern === obj.pattern && item.pattern !== pattern
|
||||
)
|
||||
) {
|
||||
return prev;
|
||||
}
|
||||
return prev.map((item) =>
|
||||
item.pattern === pattern ? { ...item, ...obj } : item
|
||||
);
|
||||
});
|
||||
},
|
||||
[list, updateRules]
|
||||
[save]
|
||||
);
|
||||
|
||||
const merge = useCallback(
|
||||
async (newRules) => {
|
||||
const rules = [...list];
|
||||
newRules = checkRules(newRules);
|
||||
newRules.forEach((newRule) => {
|
||||
const rule = rules.find(
|
||||
(oldRule) => oldRule.pattern === newRule.pattern
|
||||
);
|
||||
if (rule) {
|
||||
Object.assign(rule, newRule);
|
||||
} else {
|
||||
rules.unshift(newRule);
|
||||
(rules) => {
|
||||
save((prev) => {
|
||||
const adds = checkRules(rules);
|
||||
if (adds.length === 0) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
const map = new Map();
|
||||
// 不进行深度合并
|
||||
// [...prev, ...adds].forEach((item) => {
|
||||
// const k = item.pattern;
|
||||
// map.set(k, { ...(map.get(k) || {}), ...item });
|
||||
// });
|
||||
prev.forEach((item) => map.set(item.pattern, item));
|
||||
adds.forEach((item) => map.set(item.pattern, item));
|
||||
return [...map.values()];
|
||||
});
|
||||
await updateRules(rules);
|
||||
},
|
||||
[list, updateRules]
|
||||
[save]
|
||||
);
|
||||
|
||||
return { list, add, del, clear, put, merge };
|
||||
|
||||
@@ -1,51 +1,70 @@
|
||||
import { createContext, useCallback, useContext, useMemo } from "react";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import { STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY } from "../config";
|
||||
import { useStorage } from "./Storage";
|
||||
import { trySyncSetting } from "../libs/sync";
|
||||
import { createContext, useCallback, useContext, useMemo } from "react";
|
||||
import { debounce } from "../libs/utils";
|
||||
import { useSyncMeta } from "./Sync";
|
||||
import { debounceSyncMeta } from "../libs/storage";
|
||||
import Loading from "./Loading";
|
||||
|
||||
const SettingContext = createContext({
|
||||
setting: null,
|
||||
updateSetting: async () => {},
|
||||
reloadSetting: async () => {},
|
||||
setting: DEFAULT_SETTING,
|
||||
updateSetting: () => {},
|
||||
reloadSetting: () => {},
|
||||
});
|
||||
|
||||
export function SettingProvider({ children }) {
|
||||
const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
|
||||
const { updateSyncMeta } = useSyncMeta();
|
||||
|
||||
const syncSetting = useMemo(
|
||||
() =>
|
||||
debounce(() => {
|
||||
trySyncSetting();
|
||||
}, [2000]),
|
||||
[]
|
||||
);
|
||||
const {
|
||||
data: setting,
|
||||
isLoading,
|
||||
update,
|
||||
reload,
|
||||
} = useStorage(STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY);
|
||||
|
||||
const updateSetting = useCallback(
|
||||
async (obj) => {
|
||||
await update(obj);
|
||||
await updateSyncMeta(KV_SETTING_KEY);
|
||||
syncSetting();
|
||||
(objOrFn) => {
|
||||
update(objOrFn);
|
||||
debounceSyncMeta(KV_SETTING_KEY);
|
||||
},
|
||||
[update, syncSetting, updateSyncMeta]
|
||||
[update]
|
||||
);
|
||||
|
||||
if (!data) {
|
||||
return;
|
||||
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 <Loading />;
|
||||
}
|
||||
|
||||
if (!setting) {
|
||||
<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>;
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingContext.Provider
|
||||
value={{
|
||||
setting: data,
|
||||
updateSetting,
|
||||
reloadSetting: reload,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SettingContext.Provider>
|
||||
<SettingContext.Provider value={value}>{children}</SettingContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -6,13 +6,14 @@ export function useShortcut(action) {
|
||||
const { setting, updateSetting } = useSetting();
|
||||
const shortcuts = setting?.shortcuts || DEFAULT_SHORTCUTS;
|
||||
const shortcut = shortcuts[action] || [];
|
||||
|
||||
const setShortcut = useCallback(
|
||||
async (val) => {
|
||||
Object.assign(shortcuts, { [action]: val });
|
||||
await updateSetting({ shortcuts });
|
||||
(val) => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
shortcuts: { ...(prev?.shortcuts || {}), [action]: val },
|
||||
}));
|
||||
},
|
||||
[action, shortcuts, updateSetting]
|
||||
[action, updateSetting]
|
||||
);
|
||||
|
||||
return { shortcut, setShortcut };
|
||||
|
||||
@@ -1,70 +1,144 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { storage } from "../libs/storage";
|
||||
import { kissLog } from "../libs/log";
|
||||
import { syncData } from "../libs/sync";
|
||||
import { useDebouncedCallback } from "./DebouncedCallback";
|
||||
|
||||
/**
|
||||
* 用于将组件状态与 Storage 同步
|
||||
*
|
||||
* @param {*} key
|
||||
* @param {*} defaultVal 需为调用hook外的常量
|
||||
* @returns
|
||||
* @param {string} key 用于在 Storage 中存取值的键
|
||||
* @param {*} defaultVal 默认值。建议在组件外定义为常量。
|
||||
* @param {string} [syncKey=""] 用于远端同步的可选键名
|
||||
* @returns {{
|
||||
* data: *,
|
||||
* save: (valueOrFn: any | ((prevData: any) => any)) => void,
|
||||
* update: (partialDataOrFn: object | ((prevData: object) => object)) => void,
|
||||
* remove: () => Promise<void>,
|
||||
* reload: () => Promise<void>
|
||||
* }}
|
||||
*/
|
||||
export function useStorage(key, defaultVal) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState(null);
|
||||
export function useStorage(key, defaultVal = null, syncKey = "") {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [data, setData] = useState(defaultVal);
|
||||
|
||||
const save = useCallback(
|
||||
async (val) => {
|
||||
setData(val);
|
||||
await storage.setObj(key, val);
|
||||
},
|
||||
[key]
|
||||
);
|
||||
// 首次加载数据
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const update = useCallback(
|
||||
async (obj) => {
|
||||
setData((pre = {}) => ({ ...pre, ...obj }));
|
||||
await storage.putObj(key, obj);
|
||||
},
|
||||
[key]
|
||||
);
|
||||
|
||||
const remove = useCallback(async () => {
|
||||
setData(null);
|
||||
await storage.del(key);
|
||||
}, [key]);
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const val = await storage.getObj(key);
|
||||
if (val) {
|
||||
setData(val);
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
const storedVal = await storage.getObj(key);
|
||||
if (storedVal === undefined || storedVal === null) {
|
||||
await storage.setObj(key, defaultVal);
|
||||
} else if (isMounted) {
|
||||
setData(storedVal);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog(`storage load error for key: ${key}`, err);
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadInitialData();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [key, defaultVal]);
|
||||
|
||||
// 远端同步
|
||||
const runSync = useCallback(async (keyToSync, valueToSync) => {
|
||||
try {
|
||||
const { value, isNew } = await syncData(keyToSync, valueToSync);
|
||||
if (isNew) {
|
||||
setData(value);
|
||||
}
|
||||
} catch (error) {
|
||||
kissLog("Sync failed", keyToSync);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const debouncedSync = useDebouncedCallback(runSync, 3000);
|
||||
|
||||
// 持久化
|
||||
useEffect(() => {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
storage.setObj(key, data).catch((err) => {
|
||||
kissLog(`storage save error for key: ${key}`, err);
|
||||
});
|
||||
|
||||
// 触发远端同步
|
||||
if (syncKey) {
|
||||
debouncedSync(syncKey, data);
|
||||
}
|
||||
}, [key, syncKey, isLoading, data, debouncedSync]);
|
||||
|
||||
/**
|
||||
* 全量替换状态值
|
||||
* @param {any | ((prevData: any) => any)} valueOrFn 新的值或一个返回新值的函数。
|
||||
*/
|
||||
const save = useCallback((valueOrFn) => {
|
||||
// kissLog("save storage:", valueOrFn);
|
||||
setData((prevData) =>
|
||||
typeof valueOrFn === "function" ? valueOrFn(prevData) : valueOrFn
|
||||
);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 合并对象到当前状态（假设状态是一个对象）。
|
||||
* @param {object | ((prevData: object) => object)} partialDataOrFn 要合并的对象或一个返回该对象的函数。
|
||||
*/
|
||||
const update = useCallback((partialDataOrFn) => {
|
||||
// kissLog("update storage:", partialDataOrFn);
|
||||
setData((prevData) => {
|
||||
const partialData =
|
||||
typeof partialDataOrFn === "function"
|
||||
? partialDataOrFn(prevData)
|
||||
: partialDataOrFn;
|
||||
// 确保 preData 是一个对象，避免展开 null 或 undefined
|
||||
const baseObj =
|
||||
typeof prevData === "object" && prevData !== null ? prevData : {};
|
||||
return { ...baseObj, ...partialData };
|
||||
});
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 从 Storage 中删除该值，并将状态重置为 null。
|
||||
*/
|
||||
const remove = useCallback(async () => {
|
||||
// kissLog("remove storage:");
|
||||
try {
|
||||
await storage.del(key);
|
||||
setData(null);
|
||||
} catch (err) {
|
||||
kissLog(err, "storage reload");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
kissLog(`storage remove error for key: ${key}`, err);
|
||||
}
|
||||
}, [key]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const val = await storage.getObj(key);
|
||||
if (val) {
|
||||
setData(val);
|
||||
} else if (defaultVal) {
|
||||
setData(defaultVal);
|
||||
await storage.setObj(key, defaultVal);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog(err, "storage load");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
/**
|
||||
* 从 Storage 重新加载数据以覆盖当前状态。
|
||||
*/
|
||||
const reload = useCallback(async () => {
|
||||
// kissLog("reload storage:");
|
||||
try {
|
||||
const storedVal = await storage.getObj(key);
|
||||
setData(storedVal ?? defaultVal);
|
||||
} catch (err) {
|
||||
kissLog(`storage reload error for key: ${key}`, err);
|
||||
// setData(defaultVal);
|
||||
}
|
||||
}, [key, defaultVal]);
|
||||
|
||||
return { data, save, update, remove, reload, loading };
|
||||
return { data, save, update, remove, reload, isLoading };
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { DEFAULT_SUBRULES_LIST, DEFAULT_OW_RULE } from "../config";
|
||||
import { useSetting } from "./Setting";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { loadOrFetchSubRules } from "../libs/subRules";
|
||||
import { delSubRules } from "../libs/storage";
|
||||
import { kissLog } from "../libs/log";
|
||||
|
||||
/**
|
||||
@@ -19,50 +18,36 @@ export function useSubRules() {
|
||||
const selectedUrl = selectedSub.url;
|
||||
|
||||
const selectSub = useCallback(
|
||||
async (url) => {
|
||||
const subrulesList = [...list];
|
||||
subrulesList.forEach((item) => {
|
||||
if (item.url === url) {
|
||||
item.selected = true;
|
||||
} else {
|
||||
item.selected = false;
|
||||
}
|
||||
});
|
||||
await updateSetting({ subrulesList });
|
||||
(url) => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
subrulesList: prev.subrulesList.map((item) => ({
|
||||
...item,
|
||||
selected: item.url === url,
|
||||
})),
|
||||
}));
|
||||
},
|
||||
[list, updateSetting]
|
||||
);
|
||||
|
||||
const updateSub = useCallback(
|
||||
async (url, obj) => {
|
||||
const subrulesList = [...list];
|
||||
subrulesList.forEach((item) => {
|
||||
if (item.url === url) {
|
||||
Object.assign(item, obj);
|
||||
}
|
||||
});
|
||||
await updateSetting({ subrulesList });
|
||||
},
|
||||
[list, updateSetting]
|
||||
[updateSetting]
|
||||
);
|
||||
|
||||
const addSub = useCallback(
|
||||
async (url) => {
|
||||
const subrulesList = [...list];
|
||||
subrulesList.push({ url, selected: false });
|
||||
await updateSetting({ subrulesList });
|
||||
(url) => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
subrulesList: [...prev.subrulesList, { url, selected: false }],
|
||||
}));
|
||||
},
|
||||
[list, updateSetting]
|
||||
[updateSetting]
|
||||
);
|
||||
|
||||
const delSub = useCallback(
|
||||
async (url) => {
|
||||
let subrulesList = [...list];
|
||||
subrulesList = subrulesList.filter((item) => item.url !== url);
|
||||
await updateSetting({ subrulesList });
|
||||
await delSubRules(url);
|
||||
(url) => {
|
||||
updateSetting((prev) => ({
|
||||
...prev,
|
||||
subrulesList: prev.subrulesList.filter((item) => item.url !== url),
|
||||
}));
|
||||
},
|
||||
[list, updateSetting]
|
||||
[updateSetting]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -73,7 +58,7 @@ export function useSubRules() {
|
||||
const rules = await loadOrFetchSubRules(selectedUrl);
|
||||
setSelectedRules(rules);
|
||||
} catch (err) {
|
||||
kissLog(err, "loadOrFetchSubRules");
|
||||
kissLog("loadOrFetchSubRules", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -84,7 +69,6 @@ export function useSubRules() {
|
||||
return {
|
||||
subList: list,
|
||||
selectSub,
|
||||
updateSub,
|
||||
addSub,
|
||||
delSub,
|
||||
selectedSub,
|
||||
@@ -100,15 +84,9 @@ export function useSubRules() {
|
||||
* @returns
|
||||
*/
|
||||
export function useOwSubRule() {
|
||||
const { setting, updateSetting } = useSetting();
|
||||
const { owSubrule = DEFAULT_OW_RULE } = setting;
|
||||
|
||||
const updateOwSubrule = useCallback(
|
||||
async (obj) => {
|
||||
await updateSetting({ owSubrule: { ...owSubrule, ...obj } });
|
||||
},
|
||||
[owSubrule, updateSetting]
|
||||
);
|
||||
const { setting, updateChild } = useSetting();
|
||||
const owSubrule = setting?.owSubrule || DEFAULT_OW_RULE;
|
||||
const updateOwSubrule = updateChild("owSubrule");
|
||||
|
||||
return { owSubrule, updateOwSubrule };
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback } from "react";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { STOKEY_SYNC, DEFAULT_SYNC } from "../config";
|
||||
import { useStorage } from "./Storage";
|
||||
|
||||
@@ -16,15 +16,24 @@ export function useSync() {
|
||||
* @returns
|
||||
*/
|
||||
export function useSyncMeta() {
|
||||
const { sync, updateSync } = useSync();
|
||||
const { updateSync } = useSync();
|
||||
|
||||
const updateSyncMeta = useCallback(
|
||||
async (key) => {
|
||||
const syncMeta = sync?.syncMeta || {};
|
||||
syncMeta[key] = { ...(syncMeta[key] || {}), updateAt: Date.now() };
|
||||
await updateSync({ syncMeta });
|
||||
(key) => {
|
||||
updateSync((prevSync) => {
|
||||
const newSyncMeta = {
|
||||
...(prevSync?.syncMeta || {}),
|
||||
[key]: {
|
||||
...(prevSync?.syncMeta?.[key] || {}),
|
||||
updateAt: Date.now(),
|
||||
},
|
||||
};
|
||||
return { syncMeta: newSyncMeta };
|
||||
});
|
||||
},
|
||||
[sync?.syncMeta, updateSync]
|
||||
[updateSync]
|
||||
);
|
||||
|
||||
return { updateSyncMeta };
|
||||
}
|
||||
|
||||
@@ -37,25 +46,32 @@ export function useSyncCaches() {
|
||||
const { sync, updateSync, reloadSync } = useSync();
|
||||
|
||||
const updateDataCache = useCallback(
|
||||
async (url) => {
|
||||
const dataCaches = sync?.dataCaches || {};
|
||||
dataCaches[url] = Date.now();
|
||||
await updateSync({ dataCaches });
|
||||
(url) => {
|
||||
updateSync((prevSync) => ({
|
||||
dataCaches: {
|
||||
...(prevSync?.dataCaches || {}),
|
||||
[url]: Date.now(),
|
||||
},
|
||||
}));
|
||||
},
|
||||
[sync, updateSync]
|
||||
[updateSync]
|
||||
);
|
||||
|
||||
const deleteDataCache = useCallback(
|
||||
async (url) => {
|
||||
const dataCaches = sync?.dataCaches || {};
|
||||
delete dataCaches[url];
|
||||
await updateSync({ dataCaches });
|
||||
(url) => {
|
||||
updateSync((prevSync) => {
|
||||
const newDataCaches = { ...(prevSync?.dataCaches || {}) };
|
||||
delete newDataCaches[url];
|
||||
return { dataCaches: newDataCaches };
|
||||
});
|
||||
},
|
||||
[sync, updateSync]
|
||||
[updateSync]
|
||||
);
|
||||
|
||||
const dataCaches = useMemo(() => sync?.dataCaches || {}, [sync?.dataCaches]);
|
||||
|
||||
return {
|
||||
dataCaches: sync?.dataCaches || {},
|
||||
dataCaches,
|
||||
updateDataCache,
|
||||
deleteDataCache,
|
||||
reloadSync,
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
import { useCallback } from "react";
|
||||
import { DEFAULT_TRANBOX_SETTING } from "../config";
|
||||
import { useSetting } from "./Setting";
|
||||
|
||||
export function useTranbox() {
|
||||
const { setting, updateSetting } = useSetting();
|
||||
const { setting, updateChild } = useSetting();
|
||||
const tranboxSetting = setting?.tranboxSetting || DEFAULT_TRANBOX_SETTING;
|
||||
|
||||
const updateTranbox = useCallback(
|
||||
async (obj) => {
|
||||
Object.assign(tranboxSetting, obj);
|
||||
await updateSetting({ tranboxSetting });
|
||||
},
|
||||
[tranboxSetting, updateSetting]
|
||||
);
|
||||
const updateTranbox = updateChild("tranboxSetting");
|
||||
|
||||
return { tranboxSetting, updateTranbox };
|
||||
}
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { tryDetectLang } from "../libs";
|
||||
import { apiTranslate } from "../apis";
|
||||
import { DEFAULT_TRANS_APIS } from "../config";
|
||||
import { kissLog } from "../libs/log";
|
||||
|
||||
/**
|
||||
* 翻译hook
|
||||
* @param {*} q
|
||||
* @param {*} rule
|
||||
* @param {*} setting
|
||||
* @returns
|
||||
*/
|
||||
export function useTranslate(q, rule, setting, docInfo) {
|
||||
const [text, setText] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sameLang, setSamelang] = useState(false);
|
||||
|
||||
const { translator, fromLang, toLang, detectRemote, skipLangs = [] } = rule;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!q.replace(/\[(\d+)\]/g, "").trim()) {
|
||||
setText(q);
|
||||
setSamelang(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let deLang = "";
|
||||
if (fromLang === "auto") {
|
||||
deLang = await tryDetectLang(
|
||||
q,
|
||||
detectRemote === "true",
|
||||
setting.langDetector
|
||||
);
|
||||
}
|
||||
if (deLang && (toLang.includes(deLang) || skipLangs.includes(deLang))) {
|
||||
setSamelang(true);
|
||||
} else {
|
||||
const [trText, isSame] = await apiTranslate({
|
||||
translator,
|
||||
text: q,
|
||||
fromLang,
|
||||
toLang,
|
||||
apiSetting: {
|
||||
...DEFAULT_TRANS_APIS[translator],
|
||||
...(setting.transApis[translator] || {}),
|
||||
},
|
||||
docInfo,
|
||||
});
|
||||
setText(trText);
|
||||
setSamelang(isSame);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog(err, "translate");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [
|
||||
q,
|
||||
translator,
|
||||
fromLang,
|
||||
toLang,
|
||||
detectRemote,
|
||||
skipLangs,
|
||||
setting,
|
||||
docInfo,
|
||||
]);
|
||||
|
||||
return { text, sameLang, loading };
|
||||
}
|
||||
Reference in New Issue
Block a user