feat: selected operators are now persisted by jotai atoms

Author: zhangchi0104

src/components/Operations.tsx

@@ -7,23 +7,33 @@ import {
 } from '@blueprintjs/core'
 
 import { UseOperationsParams } from 'apis/operation'
-import { useAtom } from 'jotai'
+import { useAtom, useAtomValue } 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 { withSuspensable } from './Suspensable'
 
 export const Operations: ComponentType = withSuspensable(() => {
-  const [queryParams, setQueryParams] = useState<UseOperationsParams>({
+  const [queryParams, setQueryParams] = useState<
+    Omit<UseOperationsParams, 'operator'>
+  >({
     orderBy: 'hot',
   })
+  const [selectedOperators, setSelectedOperators] = useAtom(
+    selectedOperatorsAtom,
+  )
+  const selectedOperatorQuery = useAtomValue(selectedOperatorQueryAtom)
   const debouncedSetQueryParams = useMemo(
     () => debounce(setQueryParams, 500),
     [],
@@ -95,7 +105,7 @@ export const Operations: ComponentType = withSuspensable(() => {
             <div className="flex mr-4">
               <FormGroup
                 helperText={
-                  queryParams.operator?.length
+                  selectedOperators.length
                     ? '点击干员标签以标记为排除该干员'
                     : undefined
                 }
@@ -135,13 +145,8 @@ export const Operations: ComponentType = withSuspensable(() => {
                 />
                 <OperatorSelect
                   className="mt-2"
-                  operators={queryParams.operator?.split(',') || []}
-                  onChange={(operators) =>
-                    setQueryParams((old) => ({
-                      ...old,
-                      operator: operators.join(','),
-                    }))
-                  }
+                  operators={selectedOperatorQuery.split(',')}
+                  onChange={setSelectedOperators}
                 />
               </FormGroup>
             </div>
@@ -210,9 +215,12 @@ export const Operations: ComponentType = withSuspensable(() => {
       </Card>
 
       <div className="tabular-nums">
-        {listMode === 'operation' && <OperationList {...queryParams} />}
+        {listMode === 'operation' && (
+          <OperationList {...queryParams} operator={selectedOperatorQuery} />
+        )}
         {listMode === 'operationSet' && <OperationSetList {...queryParams} />}
       </div>
     </>
   )
 })
+Operations.displayName = 'Operations'

src/components/OperatorSelect.tsx

@@ -14,7 +14,7 @@ interface OperatorSelectProps {
   onChange: (operators: string[]) => void
 }
 
-type OperatorInfo = typeof OPERATORS[number]
+type OperatorInfo = (typeof OPERATORS)[number]
 
 interface OperatorEntry {
   name: string
@@ -122,11 +122,12 @@ export const OperatorSelect: FC<OperatorSelectProps> = ({
         leftIcon: 'person',
         className: '!flex !p-0 !pl-[5px]',
         large: true,
-        tagProps(value, index) {
+        tagProps(_value, index) {
           const operator = operators[index]
 
           return {
             interactive: true,
+            className: operator.exclude ? 'line-through' : undefined,
             intent: operator?.exclude ? 'danger' : 'primary',
             onClick: () => setExclude(index, !operator?.exclude),
           }

src/store/selectedOperators.ts

@@ -0,0 +1,17 @@
+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(',')
+})