app APIConfig BackendList Config Logs Root AppConfigSideEffect ThemeS…

…witcher storage
haishanh · Oct 3, 2023 · 1e3ce8f · 1e3ce8f
1 parent 29638c0
commit 1e3ce8f
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 35 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -25,6 +25,7 @@ function insertLinkElement(href: string) {
  l.href = href;
  l.rel = 'preload';
  l.as = 'font';
+ l.type = 'font/woff2';
  l.crossOrigin = '';
 
  document.head.appendChild(l);

diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
@@ -5,8 +5,6 @@ import { BackendList } from 'src/components/BackendList';
 import { clashAPIConfigsAtom, findClashAPIConfigIndexTmp } from 'src/store/app';
 import { ClashAPIConfig } from 'src/types';
 
-import { saveStateTmp } from '$src/misc/storage';
-
 import s0 from './APIConfig.module.scss';
 import Button from './Button';
 import Field from './Field';
@@ -60,7 +58,6 @@ export default function APIConfig() {
  setApiConfigs((apiConfigs) => {
  return [...apiConfigs, { ...conf, addedAt: Date.now() }];
  });
- saveStateTmp({ clashAPIConfigs: apiConfigs });
  }
  });
  }, [baseURL, secret, metaLabel, apiConfigs, setApiConfigs]);

diff --git a/src/components/BackendList.tsx b/src/components/BackendList.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { Eye, EyeOff, X as Close } from 'react-feather';
 
 import { useToggle } from '$src/hooks/basic';
-import { saveStateTmp } from '$src/misc/storage';
 import {
  clashAPIConfigsAtom,
  findClashAPIConfigIndexTmp,
@@ -35,21 +34,13 @@ export function BackendList() {
  [apiConfigs, selectedClashAPIConfigIndex, setApiConfigs, setSelectedClashAPIConfigIndex],
  );
 
- React.useEffect(() => {
- saveStateTmp({
- selectedClashAPIConfigIndex,
- clashAPIConfigs: apiConfigs,
- });
- }, [apiConfigs, selectedClashAPIConfigIndex]);
-
  const selectClashAPIConfig = React.useCallback(
  (conf: ClashAPIConfig) => {
  const idx = findClashAPIConfigIndexTmp(apiConfigs, conf);
  const curr = selectedClashAPIConfigIndex;
  if (curr !== idx) {
  setSelectedClashAPIConfigIndex(idx);
  }
- saveStateTmp({ selectedClashAPIConfigIndex });
 
  // manual clean up is too complex
  // we just reload the app

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
@@ -6,8 +6,6 @@ import * as logsApi from 'src/api/logs';
 import Select from 'src/components/shared/Select';
 import { ClashGeneralConfig, DispatchFn, State } from 'src/store/types';
 
-import { saveStateTmp } from '$src/misc/storage';
-
 import {
  darkModePureBlackToggleAtom,
  latencyTestUrlAtom,
@@ -149,7 +147,6 @@ function ConfigImpl({ dispatch, configs }: ConfigImplProps) {
  );
  const selectChartStyleIndex = useCallback((idx: number) => {
  setSelectedChartStyleIndex(idx);
- saveStateTmp({ selectedChartStyleIndex: idx });
  }, [setSelectedChartStyleIndex])
 
  const handleInputOnBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(

diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
@@ -7,7 +7,7 @@ import { areEqual, FixedSizeList as List, ListChildComponentProps } from 'react-
 import { fetchLogs, reconnect as reconnectLogs, stop as stopLogs } from 'src/api/logs';
 import ContentHeader from 'src/components/ContentHeader';
 import LogSearch from 'src/components/LogSearch';
-import { connect, useStoreActions } from 'src/components/StateProvider';
+import { connect } from 'src/components/StateProvider';
 import SvgYacd from 'src/components/SvgYacd';
 import useRemainingViewPortHeight from 'src/hooks/useRemainingViewPortHeight';
 import { logStreamingPausedAtom, useApiConfig } from 'src/store/app';

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -11,7 +11,8 @@ import Loading from 'src/components/Loading';
 import { Head } from 'src/components/shared/Head';
 import { queryClient } from 'src/misc/query';
 
-import { darkModePureBlackToggleAtom } from '$src/store/app';
+import { AppConfigSideEffect } from '$src/components/fn/AppConfigSideEffect';
+import { darkModePureBlackToggleAtom } from '$src/store/app';
 
 import { actions, initialState } from '../store';
 import APIConfig from './APIConfig';
@@ -87,6 +88,7 @@ const Root = () => (
  <StateProvider initialState={initialState} actions={actions}>
  <QueryClientProvider client={queryClient}>
  <Router>
+ <AppConfigSideEffect />
  <AppShell>
  <Head />
  <Suspense fallback={<Loading />}>

diff --git a/src/components/fn/AppConfigSideEffect.tsx b/src/components/fn/AppConfigSideEffect.tsx
@@ -0,0 +1,66 @@
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+
+import { saveState } from '$src/misc/storage';
+import { debounce } from '$src/misc/utils';
+import {
+ autoCloseOldConnsAtom,
+ clashAPIConfigsAtom,
+ collapsibleIsOpenAtom,
+ hideUnavailableProxiesAtom,
+ latencyTestUrlAtom,
+ logStreamingPausedAtom,
+ proxySortByAtom,
+ selectedChartStyleIndexAtom,
+ selectedClashAPIConfigIndexAtom,
+ themeAtom,
+} from '$src/store/app';
+import { StateApp } from '$src/store/types';
+
+let stateRef: StateApp;
+
+function save0() {
+ if (stateRef) saveState(stateRef);
+}
+
+const save = debounce(save0, 500);
+
+export function AppConfigSideEffect() {
+ const [selectedClashAPIConfigIndex] = useAtom(selectedClashAPIConfigIndexAtom);
+ const [clashAPIConfigs] = useAtom(clashAPIConfigsAtom);
+ const [latencyTestUrl] = useAtom(latencyTestUrlAtom);
+ const [selectedChartStyleIndex] = useAtom(selectedChartStyleIndexAtom);
+ const [theme] = useAtom(themeAtom);
+ const [collapsibleIsOpen] = useAtom(collapsibleIsOpenAtom);
+ const [proxySortBy] = useAtom(proxySortByAtom);
+ const [hideUnavailableProxies] = useAtom(hideUnavailableProxiesAtom);
+ const [autoCloseOldConns] = useAtom(autoCloseOldConnsAtom);
+ const [logStreamingPaused] = useAtom(logStreamingPausedAtom);
+ useEffect(() => {
+ stateRef = {
+ autoCloseOldConns,
+ clashAPIConfigs,
+ collapsibleIsOpen,
+ hideUnavailableProxies,
+ latencyTestUrl,
+ logStreamingPaused,
+ proxySortBy,
+ selectedChartStyleIndex,
+ selectedClashAPIConfigIndex,
+ theme,
+ }
+ save();
+ }, [
+ autoCloseOldConns,
+ clashAPIConfigs,
+ collapsibleIsOpen,
+ hideUnavailableProxies,
+ latencyTestUrl,
+ logStreamingPaused,
+ proxySortBy,
+ selectedChartStyleIndex,
+ selectedClashAPIConfigIndex,
+ theme,
+ ]);
+ return null;
+}
diff --git a/src/components/shared/ThemeSwitcher.tsx b/src/components/shared/ThemeSwitcher.tsx
@@ -7,7 +7,6 @@ import { Check } from 'react-feather';
 import { useTranslation } from 'react-i18next';
 
 import { framerMotionResource } from '$src/misc/motion';
-import { saveStateTmp } from '$src/misc/storage';
 import { setTheme, themeAtom } from '$src/store/app';
 import { ThemeType } from '$src/store/types';
 
@@ -34,7 +33,6 @@ export function ThemeSwitcher() {
  const onSelect = React.useCallback((v: ThemeType) => {
  setThemeAtom(v);
  setTheme(v);
- saveStateTmp({ theme: v });
  }, [setThemeAtom]);
 
  return (

diff --git a/src/misc/storage.ts b/src/misc/storage.ts
@@ -23,20 +23,6 @@ export function saveState(state: StateApp) {
  }
 }
 
-export function saveStateTmp(partial: Partial<StateApp>) {
- const s = loadState();
- if (!s) return;
- try {
- const serialized = JSON.stringify({
- ...s,
- ...partial
- });
- localStorage.setItem(StorageKey, serialized);
- } catch (err) {
- // ignore
- }
-}
-
 export function clearState() {
  try {
  localStorage.removeItem(StorageKey);

diff --git a/src/store/app.ts b/src/store/app.ts
@@ -43,13 +43,13 @@ const CONFIG_QUERY_PARAMS = ['hostname', 'port', 'secret', 'theme'];
 
 export const selectedClashAPIConfigIndexAtom = atom(initialState().selectedClashAPIConfigIndex);
 export const clashAPIConfigsAtom = atom(initialState().clashAPIConfigs);
-export const selectedChartStyleIndexAtom = atom(initialState().selectedChartStyleIndex);
 export const latencyTestUrlAtom = atom(initialState().latencyTestUrl);
+export const selectedChartStyleIndexAtom = atom(initialState().selectedChartStyleIndex);
+export const themeAtom = atom(initialState().theme);
 export const collapsibleIsOpenAtom = atom(initialState().collapsibleIsOpen);
 export const proxySortByAtom = atom(initialState().proxySortBy);
 export const hideUnavailableProxiesAtom = atom(initialState().hideUnavailableProxies);
 export const autoCloseOldConnsAtom = atom(initialState().autoCloseOldConns);
-export const themeAtom = atom(initialState().theme);
 export const logStreamingPausedAtom = atom(initialState().logStreamingPaused);
 
 // hooks