Replace recoil with jotai

haishanh · Sep 18, 2023 · d978da1 · d978da1
1 parent 9bbd434
commit d978da1
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "i18next-browser-languagedetector": "7.1.0",
     "immer": "10.0.2",
     "invariant": "^2.2.4",
+    "jotai": "^2.4.2",
     "lodash-es": "^4.17.21",
     "memoize-one": "6.0.0",
     "modern-normalize": "2.0.0",
@@ -61,7 +62,6 @@
     "react-tabs": "6.0.2",
     "react-tiny-fab": "4.0.4",
     "react-window": "^1.8.9",
-    "recoil": "0.7.7",
     "regenerator-runtime": "0.14.0",
     "reselect": "4.1.8",
     "tslib": "2.6.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -4,7 +4,6 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import { RouteObject } from 'react-router';
 import { HashRouter as Router, useRoutes } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { About } from 'src/components/about/About';
 import Loading from 'src/components/Loading';
 import { Head } from 'src/components/shared/Head';
@@ -75,20 +74,18 @@ function App() {
 
 const Root = () => (
   <ErrorBoundary>
-    <RecoilRoot>
-      <StateProvider initialState={initialState} actions={actions}>
-        <QueryClientProvider client={queryClient}>
-          <Router>
-            <div className={s0.app}>
-              <Head />
-              <Suspense fallback={<Loading />}>
-                <App />
-              </Suspense>
-            </div>
-          </Router>
-        </QueryClientProvider>
-      </StateProvider>
-    </RecoilRoot>
+    <StateProvider initialState={initialState} actions={actions}>
+      <QueryClientProvider client={queryClient}>
+        <Router>
+          <div className={s0.app}>
+            <Head />
+            <Suspense fallback={<Loading />}>
+              <App />
+            </Suspense>
+          </div>
+        </Router>
+      </QueryClientProvider>
+    </StateProvider>
   </ErrorBoundary>
 );
 

diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
@@ -4,7 +4,7 @@ import { areEqual, VariableSizeList } from 'react-window';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
 import { useRuleAndProvider } from 'src/components/rules/rules.hooks';
 import { RulesPageFab } from 'src/components/rules/RulesPageFab';
-import { ruleFilterText } from 'src/store/rules';
+import { ruleFilterTextAtom } from 'src/store/rules';
 import { State } from 'src/store/types';
 import { ClashAPIConfig, RuleType } from 'src/types';
 
@@ -104,7 +104,7 @@ function Rules({ apiConfig }: RulesProps) {
     <div>
       <div className={s.header}>
         <ContentHeader title={t('Rules')} />
-        <TextFilter placeholder="Filter" textAtom={ruleFilterText} />
+        <TextFilter placeholder="Filter" textAtom={ruleFilterTextAtom} />
       </div>
       <div ref={refRulesContainer} style={{ paddingBottom }}>
         <VariableSizeList

diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
@@ -12,7 +12,7 @@ import BaseModal from 'src/components/shared/BaseModal';
 import { connect, useStoreActions } from 'src/components/StateProvider';
 import Equalizer from 'src/components/svg/Equalizer';
 import { getClashAPIConfig } from 'src/store/app';
-import { proxyFilterText } from 'src/store/proxies';
+import { proxyFilterTextAtom } from 'src/store/proxies';
 import {
   fetchProxies,
   getDelay,
@@ -89,7 +89,7 @@ function Proxies({
         <ContentHeader title={t('Proxies')} />
         <div className={s0.topBarRight}>
           <div className={s0.textFilterContainer}>
-            <TextFilter textAtom={proxyFilterText} />
+            <TextFilter textAtom={proxyFilterTextAtom} />
           </div>
           <Tooltip label={t('settings')}>
             <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>

diff --git a/src/components/proxies/hooks.tsx b/src/components/proxies/hooks.tsx
@@ -1,10 +1,10 @@
+import { useAtom } from 'jotai';
 import * as React from 'react';
-import { useRecoilState } from 'recoil';
 import {
   // types
   NonProxyTypes,
   // atom
-  proxyFilterText,
+  proxyFilterTextAtom,
 } from 'src/store/proxies';
 import { DelayMapping, ProxiesMapping, ProxyDelayItem, ProxyItem } from 'src/store/types';
 
@@ -114,7 +114,7 @@ export function useFilteredAndSorted(
   proxySortBy: string,
   proxies?: ProxiesMapping
 ) {
-  const [filterText] = useRecoilState(proxyFilterText);
+  const [filterText] = useAtom(proxyFilterTextAtom);
   return useMemo(
     () =>
       filterAvailableProxiesAndSort(

diff --git a/src/components/rules/rules.hooks.tsx b/src/components/rules/rules.hooks.tsx
@@ -1,13 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useAtom } from 'jotai'
 import * as React from 'react';
-import { useRecoilState } from 'recoil';
 import {
   fetchRuleProviders,
   refreshRuleProviderByName,
   updateRuleProviders,
 } from 'src/api/rule-provider';
 import { fetchRules } from 'src/api/rules';
-import { ruleFilterText } from 'src/store/rules';
+import { ruleFilterTextAtom } from 'src/store/rules';
 import type { ClashAPIConfig } from 'src/types';
 
 const { useCallback } = React;
@@ -66,7 +66,7 @@ export function useRuleAndProvider(apiConfig: ClashAPIConfig) {
   );
   const { data: provider } = useRuleProviderQuery(apiConfig);
 
-  const [filterText] = useRecoilState(ruleFilterText);
+  const [filterText] = useAtom(ruleFilterTextAtom);
   if (filterText === '') {
     return { rules, provider, isFetching };
   } else {

diff --git a/src/components/shared/TextFilter.tsx b/src/components/shared/TextFilter.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
-import type { RecoilState } from 'recoil';
 import { useTextInput } from 'src/hooks/useTextInput';
 
+import { TextAtom } from '$src/store/rules';
+
 import s from './TextFilter.module.scss';
 
-export function TextFilter(props: { textAtom: RecoilState<string>; placeholder?: string }) {
+export function TextFilter(props: { textAtom: TextAtom; placeholder?: string }) {
   const [onChange, text] = useTextInput(props.textAtom);
   return (
     <input

diff --git a/src/hooks/useTextInput.ts b/src/hooks/useTextInput.ts
@@ -1,13 +1,13 @@
+import { PrimitiveAtom, useAtom } from 'jotai';
 import debounce from 'lodash-es/debounce';
 import * as React from 'react';
-import { RecoilState, useRecoilState } from 'recoil';
 
 const { useCallback, useState, useMemo } = React;
 
 export function useTextInput(
-  x: RecoilState<string>
+  x: PrimitiveAtom<string>
 ): [(e: React.ChangeEvent<HTMLInputElement>) => void, string] {
-  const [, setTextGlobal] = useRecoilState(x);
+  const [, setTextGlobal] = useAtom(x);
   const [text, setText] = useState('');
   const setTextDebounced = useMemo(() => debounce(setTextGlobal, 300), [setTextGlobal]);
   const onChange = useCallback(

diff --git a/src/store/proxies.tsx b/src/store/proxies.tsx
@@ -1,4 +1,4 @@
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 import {
   DelayMapping,
   DispatchFn,
@@ -423,7 +423,4 @@ export const actions = {
   closePrevConnsAndTheModal,
 };
 
-export const proxyFilterText = atom({
-  key: 'proxyFilterText',
-  default: '',
-});
+export const proxyFilterTextAtom = atom('');
diff --git a/src/store/rules.ts b/src/store/rules.ts
@@ -1,6 +1,5 @@
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 
-export const ruleFilterText = atom({
-  key: 'ruleFilterText',
-  default: '',
-});
+export const ruleFilterTextAtom = atom('');
+
+export type TextAtom = typeof ruleFilterTextAtom;