feat: add option for saving selected operators (#371)

Author: guansss

src/components/Operations.tsx

@@ -7,21 +7,17 @@ import {
 } from '@blueprintjs/core'
 
 import { UseOperationsParams } from 'apis/operation'
-import { useAtom, useAtomValue } from 'jotai'
+import { useAtom } from 'jotai'
 import { debounce } from 'lodash-es'
 import { ComponentType, useMemo, useState } from 'react'
 
 import { CardTitle } from 'components/CardTitle'
 import { OperationList } from 'components/OperationList'
 import { OperationSetList } from 'components/OperationSetList'
 import { neoLayoutAtom } from 'store/pref'
-import {
-  selectedOperatorQueryAtom,
-  selectedOperatorsAtom,
-} from 'store/selectedOperators'
 
 import { authAtom } from '../store/auth'
-import { OperatorSelect } from './OperatorSelect'
+import { OperatorFilter } from './OperatorFilter'
 import { withSuspensable } from './Suspensable'
 
 export const Operations: ComponentType = withSuspensable(() => {
@@ -31,14 +27,13 @@ export const Operations: ComponentType = withSuspensable(() => {
     limit: 10,
     orderBy: 'hot',
   })
-  const [selectedOperators, setSelectedOperators] = useAtom(
-    selectedOperatorsAtom,
-  )
-  const selectedOperatorQuery = useAtomValue(selectedOperatorQueryAtom)
   const debouncedSetQueryParams = useMemo(
     () => debounce(setQueryParams, 500),
     [],
   )
+
+  const [selectedOperators, setSelectedOperators] = useState<string[]>([])
+
   const [authState] = useAtom(authAtom)
   const [neoLayout, setNeoLayout] = useAtom(neoLayoutAtom)
   const [listMode, setListMode] = useState<'operation' | 'operationSet'>(
@@ -104,14 +99,7 @@ export const Operations: ComponentType = withSuspensable(() => {
         {listMode === 'operation' && (
           <div className="flex flex-wrap items-end">
             <div className="flex mr-4">
-              <FormGroup
-                helperText={
-                  selectedOperators.length
-                    ? '点击干员标签以标记为排除该干员'
-                    : undefined
-                }
-                className="max-w-md"
-              >
+              <div className="max-w-md">
                 <InputGroup
                   className="[&>input]:!rounded-md"
                   placeholder="标题、描述、神秘代码"
@@ -145,12 +133,12 @@ export const Operations: ComponentType = withSuspensable(() => {
                   }
                   onBlur={() => debouncedSetQueryParams.flush()}
                 />
-                <OperatorSelect
+                <OperatorFilter
                   className="mt-2"
-                  operators={selectedOperatorQuery.split(',')}
+                  operators={selectedOperators}
                   onChange={setSelectedOperators}
                 />
-              </FormGroup>
+              </div>
             </div>
             <div className="flex flex-col">
               {filterNode}
@@ -221,7 +209,7 @@ export const Operations: ComponentType = withSuspensable(() => {
         {listMode === 'operation' && (
           <OperationList
             {...queryParams}
-            operator={selectedOperatorQuery}
+            operator={selectedOperators.join(',')}
             // 按热度排序时列表前几页的变化不会太频繁，可以不刷新第一页，节省点流量
             revalidateFirstPage={queryParams.orderBy !== 'hot'}
           />

src/components/OperatorFilter.tsx

@@ -0,0 +1,71 @@
+import { Checkbox } from '@blueprintjs/core'
+
+import { useAtom } from 'jotai'
+import { FC, useEffect } from 'react'
+
+import {
+  selectedOperatorsAtom,
+  shouldSaveSelectedOperatorsAtom,
+} from '../store/selectedOperators'
+import { OperatorSelect } from './OperatorSelect'
+
+interface OperatorSelectProps {
+  className?: string
+  operators: string[]
+  onChange: (operators: string[]) => void
+}
+
+export const OperatorFilter: FC<OperatorSelectProps> = ({
+  className,
+  operators,
+  onChange,
+}) => {
+  const [shouldSaveSelectedOperators, setShouldSaveSelectedOperators] = useAtom(
+    shouldSaveSelectedOperatorsAtom,
+  )
+  const [savedSelectedOperators, setSavedSelectedOperators] = useAtom(
+    selectedOperatorsAtom,
+  )
+
+  useEffect(() => {
+    // 用户在另一个标签页中修改选择时，savedSelectedOperators 会同步到当前标签页，需要手动更新给 operators
+    if (shouldSaveSelectedOperators) {
+      onChange(savedSelectedOperators)
+    }
+  }, [shouldSaveSelectedOperators, savedSelectedOperators, onChange])
+
+  const handleSelectOperator = (operators: string[]) => {
+    onChange(operators)
+
+    if (shouldSaveSelectedOperators) {
+      setSavedSelectedOperators(operators)
+    }
+  }
+
+  const handleShouldSaveSelectedOperators = (shouldSave: boolean) => {
+    setShouldSaveSelectedOperators(shouldSave)
+
+    if (shouldSave) {
+      setSavedSelectedOperators(operators)
+    }
+  }
+
+  return (
+    <div className={className}>
+      <OperatorSelect operators={operators} onChange={handleSelectOperator} />
+      {operators.length > 0 && (
+        <div className="flex justify-between items-baseline text-zinc-500">
+          <div>点击干员标签以标记为排除该干员</div>
+          <Checkbox
+            checked={shouldSaveSelectedOperators}
+            onChange={(e) =>
+              handleShouldSaveSelectedOperators(e.currentTarget.checked)
+            }
+          >
+            <span className="-ml-2">记住选择</span>
+          </Checkbox>
+        </div>
+      )}
+    </div>
+  )
+}

src/store/selectedOperators.ts

@@ -1,17 +1,11 @@
-import { atom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 
-interface OperatorEntry {
-  name: string
-  exclude?: boolean
-}
-
 export const selectedOperatorsAtom = atomWithStorage(
   'maa-copilot-selectedOperators',
   [] as string[],
 )
 
-export const selectedOperatorQueryAtom = atom((get) => {
-  const operators = get(selectedOperatorsAtom)
-  return operators.join(',')
-})
+export const shouldSaveSelectedOperatorsAtom = atomWithStorage(
+  'maa-copilot-saveSelectedOperators',
+  true,
+)