Logs ProxyGroup ProxyProvider Settings ThemeSwitcher app index proxie…

…s types

src/components/Logs.tsx

@@ -1,4 +1,5 @@
 import cx from 'clsx';
+import { useAtom } from 'jotai';
 import * as React from 'react';
 import { Pause, Play } from 'react-feather';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +10,7 @@ import LogSearch from 'src/components/LogSearch';
 import { connect, useStoreActions } from 'src/components/StateProvider';
 import SvgYacd from 'src/components/SvgYacd';
 import useRemainingViewPortHeight from 'src/hooks/useRemainingViewPortHeight';
-import { getLogStreamingPaused, useApiConfig } from 'src/store/app';
+import { logStreamingPausedAtom, useApiConfig } from 'src/store/app';
 import { getLogLevel } from 'src/store/configs';
 import { appendLog, getLogsForDisplay } from 'src/store/logs';
 import { DispatchFn, Log, State } from 'src/store/types';
@@ -64,21 +65,19 @@ function Logs({
   dispatch,
   logLevel,
   logs,
-  logStreamingPaused,
 }: {
   dispatch: DispatchFn;
   logLevel: string;
   logs: Log[];
-  logStreamingPaused: boolean;
 }) {
+  const [logStreamingPaused, setLogStreamingPaused] = useAtom(logStreamingPausedAtom);
   const apiConfig = useApiConfig();
-  const actions = useStoreActions();
   const toggleIsRefreshPaused = useCallback(() => {
     logStreamingPaused ? reconnectLogs({ ...apiConfig, logLevel }) : stopLogs();
     // being lazy here
     // ideally we should check the result of previous operation before updating this
-    actions.app.updateAppConfig('logStreamingPaused', !logStreamingPaused);
-  }, [apiConfig, logLevel, logStreamingPaused, actions.app]);
+    setLogStreamingPaused(!logStreamingPaused);
+  }, [apiConfig, logLevel, logStreamingPaused, setLogStreamingPaused]);
   const appendLogInternal = useCallback((log: Log) => dispatch(appendLog(log)), [dispatch]);
   useEffect(() => {
     fetchLogs({ ...apiConfig, logLevel }, appendLogInternal);
@@ -130,7 +129,6 @@ function Logs({
 const mapState = (s: State) => ({
   logs: getLogsForDisplay(s),
   logLevel: getLogLevel(s),
-  logStreamingPaused: getLogStreamingPaused(s),
 });
 
 export default connect(mapState)(Logs);

src/components/proxies/ProxyGroup.tsx

@@ -7,7 +7,12 @@ import CollapsibleSectionHeader from '$src/components/CollapsibleSectionHeader';
 import { ZapAnimated } from '$src/components/shared/ZapAnimated';
 import { connect, useStoreActions } from '$src/components/StateProvider';
 import { useState2 } from '$src/hooks/basic';
-import { collapsibleIsOpenAtom, getHideUnavailableProxies, getProxySortBy } from '$src/store/app';
+import {
+  autoCloseOldConnsAtom,
+  collapsibleIsOpenAtom,
+  hideUnavailableProxiesAtom,
+  proxySortByAtom,
+} from '$src/store/app';
 import { getProxies, switchProxy } from '$src/store/proxies';
 import { DelayMapping, DispatchFn, ProxiesMapping, State } from '$src/store/types';
 import { ClashAPIConfig } from '$src/types';
@@ -22,8 +27,6 @@ type ProxyGroupImplProps = {
   name: string;
   all: string[];
   delay: DelayMapping;
-  hideUnavailableProxies: boolean;
-  proxySortBy: string;
   proxies: ProxiesMapping;
   type: string;
   now: string;
@@ -35,8 +38,6 @@ function ProxyGroupImpl({
   name,
   all: allItems,
   delay,
-  hideUnavailableProxies,
-  proxySortBy,
   proxies,
   type,
   now,
@@ -45,6 +46,8 @@ function ProxyGroupImpl({
 }: ProxyGroupImplProps) {
   const [collapsibleIsOpen, setCollapsibleIsOpen] = useAtom(collapsibleIsOpenAtom);
   const isOpen = collapsibleIsOpen[`proxyGroup:${name}`];
+  const [proxySortBy] = useAtom(proxySortByAtom);
+  const [hideUnavailableProxies] = useAtom(hideUnavailableProxiesAtom);
   const all = useFilteredAndSorted(allItems, delay, hideUnavailableProxies, proxySortBy, proxies);
   const isSelectable = useMemo(() => type === 'Selector', [type]);
   const {
@@ -59,13 +62,13 @@ function ProxyGroupImpl({
   const toggle = useCallback(() => {
     updateCollapsibleIsOpen('proxyGroup', name, !isOpen);
   }, [isOpen, updateCollapsibleIsOpen, name]);
-
+  const [autoCloseOldConns] = useAtom(autoCloseOldConnsAtom);
   const itemOnTapCallback = useCallback(
     (proxyName: string) => {
       if (!isSelectable) return;
-      dispatch(switchProxy(apiConfig, name, proxyName));
+      dispatch(switchProxy(apiConfig, name, proxyName, autoCloseOldConns));
     },
-    [apiConfig, dispatch, name, isSelectable],
+    [apiConfig, dispatch, name, isSelectable, autoCloseOldConns],
   );
 
   const testingLatency = useState2(false);
@@ -108,15 +111,11 @@ function ProxyGroupImpl({
 
 export const ProxyGroup = connect((s: State, { name, delay }) => {
   const proxies = getProxies(s);
-  const proxySortBy = getProxySortBy(s);
-  const hideUnavailableProxies = getHideUnavailableProxies(s);
   const group = proxies[name];
   const { all, type, now } = group;
   return {
     all,
     delay,
-    hideUnavailableProxies,
-    proxySortBy,
     proxies,
     type,
     now,

src/components/proxies/ProxyProvider.tsx

@@ -10,8 +10,8 @@ import { connect } from 'src/components/StateProvider';
 import { framerMotionResource } from 'src/misc/motion';
 import {
   collapsibleIsOpenAtom,
-  getHideUnavailableProxies,
-  getProxySortBy,
+  hideUnavailableProxiesAtom,
+  proxySortByAtom,
   useApiConfig,
 } from 'src/store/app';
 import { getDelay, healthcheckProviderByName } from 'src/store/proxies';
@@ -30,32 +30,21 @@ type Props = {
   name: string;
   proxies: string[];
   delay: DelayMapping;
-  hideUnavailableProxies: boolean;
-  proxySortBy: string;
   type: 'Proxy' | 'Rule';
   vehicleType: 'HTTP' | 'File' | 'Compatible';
   updatedAt?: string;
   dispatch: (x: any) => Promise<any>;
 };
 
-function ProxyProviderImpl({
-  name,
-  proxies: all,
-  delay,
-  hideUnavailableProxies,
-  proxySortBy,
-  vehicleType,
-  updatedAt,
-  dispatch,
-}: Props) {
+function ProxyProviderImpl({ name, proxies: all, delay, vehicleType, updatedAt, dispatch }: Props) {
   const [collapsibleIsOpen, setCollapsibleIsOpen] = useAtom(collapsibleIsOpenAtom);
   const isOpen = collapsibleIsOpen[`proxyProvider:${name}`];
+  const [proxySortBy] = useAtom(proxySortByAtom);
+  const [hideUnavailableProxies] = useAtom(hideUnavailableProxiesAtom);
   const apiConfig = useApiConfig();
   const proxies = useFilteredAndSorted(all, delay, hideUnavailableProxies, proxySortBy);
   const checkingHealth = useState2(false);
-
   const updateProvider = useUpdateProviderItem({ dispatch, apiConfig, name });
-
   const healthcheckProvider = useCallback(() => {
     if (checkingHealth.value) return;
     checkingHealth.set(true);
@@ -132,14 +121,10 @@ function Refresh() {
 }
 
 const mapState = (s: State, { proxies }) => {
-  const hideUnavailableProxies = getHideUnavailableProxies(s);
   const delay = getDelay(s);
-  const proxySortBy = getProxySortBy(s);
   return {
     proxies,
     delay,
-    hideUnavailableProxies,
-    proxySortBy,
   };
 };
 

src/components/proxies/Settings.tsx

@@ -1,12 +1,11 @@
+import { useAtom } from 'jotai';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import Select from 'src/components/shared/Select';
 
 import { ToggleInput } from '$src/components/form/Toggle';
-import { State, StateApp } from '$src/store/types';
+import Select from '$src/components/shared/Select';
+import { autoCloseOldConnsAtom, hideUnavailableProxiesAtom, proxySortByAtom } from '$src/store/app';
 
-import { getAutoCloseOldConns, getHideUnavailableProxies, getProxySortBy } from '../../store/app';
-import { connect, useStoreActions } from '../StateProvider';
 import s from './Settings.module.scss';
 
 const options = [
@@ -19,23 +18,20 @@ const options = [
 
 const { useCallback } = React;
 
-function Settings({ appConfig }: { appConfig: StateApp }) {
-  const {
-    app: { updateAppConfig },
-  } = useStoreActions();
-
+export default function Settings() {
+  const [autoCloseOldConns, setAutoCloseOldConns] = useAtom(autoCloseOldConnsAtom);
+  const [proxySortBy, setProxySortBy] = useAtom(proxySortByAtom);
+  const [hideUnavailableProxies, setHideUnavailableProxies] = useAtom(hideUnavailableProxiesAtom);
   const handleProxySortByOnChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
-      updateAppConfig('proxySortBy', e.target.value);
-    },
-    [updateAppConfig],
+    (e: React.ChangeEvent<HTMLSelectElement>) => setProxySortBy(e.target.value),
+    [setProxySortBy],
   );
 
   const handleHideUnavailablesSwitchOnChange = useCallback(
     (v: boolean) => {
-      updateAppConfig('hideUnavailableProxies', v);
+      setHideUnavailableProxies(v);
     },
-    [updateAppConfig],
+    [setHideUnavailableProxies],
   );
   const { t } = useTranslation();
   return (
@@ -47,7 +43,7 @@ function Settings({ appConfig }: { appConfig: StateApp }) {
             options={options.map((o) => {
               return [o[0], t(o[1])];
             })}
-            selected={appConfig.proxySortBy}
+            selected={proxySortBy}
             onChange={handleProxySortByOnChange}
           />
         </div>
@@ -58,7 +54,7 @@ function Settings({ appConfig }: { appConfig: StateApp }) {
         <div>
           <ToggleInput
             id="hideUnavailableProxies"
-            checked={appConfig.hideUnavailableProxies}
+            checked={hideUnavailableProxies}
             onChange={handleHideUnavailablesSwitchOnChange}
           />
         </div>
@@ -68,26 +64,11 @@ function Settings({ appConfig }: { appConfig: StateApp }) {
         <div>
           <ToggleInput
             id="autoCloseOldConns"
-            checked={appConfig.autoCloseOldConns}
-            onChange={(v: boolean) => updateAppConfig('autoCloseOldConns', v)}
+            checked={autoCloseOldConns}
+            onChange={setAutoCloseOldConns}
           />
         </div>
       </div>
     </>
   );
 }
-
-const mapState = (s: State) => {
-  const proxySortBy = getProxySortBy(s);
-  const hideUnavailableProxies = getHideUnavailableProxies(s);
-  const autoCloseOldConns = getAutoCloseOldConns(s);
-
-  return {
-    appConfig: {
-      proxySortBy,
-      hideUnavailableProxies,
-      autoCloseOldConns,
-    },
-  };
-};
-export default connect(mapState)(Settings);

src/components/shared/ThemeSwitcher.tsx

@@ -1,17 +1,20 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@reach/menu-button';
 import { Tooltip } from '@reach/tooltip';
 import cx from 'clsx';
+import { useAtom } from 'jotai';
 import * as React from 'react';
 import { Check } from 'react-feather';
 import { useTranslation } from 'react-i18next';
-import { connect } from 'src/components/StateProvider';
-import { framerMotionResource } from 'src/misc/motion';
-import { getTheme, switchTheme } from 'src/store/app';
-import { DispatchFn, State } from 'src/store/types';
+
+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';
 
 import s from './ThemeSwitcher.module.scss';
 
-function ThemeSwitcherImpl({ theme, dispatch }: { theme: string; dispatch: DispatchFn }) {
+export function ThemeSwitcher() {
+  const [theme, setThemeAtom] = useAtom(themeAtom);
   const { t } = useTranslation();
 
   const themeIcon = React.useMemo(() => {
@@ -28,7 +31,11 @@ function ThemeSwitcherImpl({ theme, dispatch }: { theme: string; dispatch: Dispa
     }
   }, [theme]);
 
-  const onSelect = React.useCallback((v: string) => dispatch(switchTheme(v)), [dispatch]);
+  const onSelect = React.useCallback((v: ThemeType) => {
+    setThemeAtom(v);
+    setTheme(v);
+    saveStateTmp({ theme: v });
+  }, [setThemeAtom]);
 
   return (
     <Menu>
@@ -149,6 +156,3 @@ function Auto() {
     </svg>
   );
 }
-
-const mapState = (s: State) => ({ theme: getTheme(s) });
-export const ThemeSwitcher = connect(mapState)(ThemeSwitcherImpl);