Skip to content

Commit

Permalink
Merge pull request #312 from MaaAssistantArknights/feat/persist-opera…
Browse files Browse the repository at this point in the history
…tors-filter

feat: selected operators are now persisted by jotai atoms
  • Loading branch information
guansss authored Jun 16, 2024
2 parents ce32f47 + 81ca7a5 commit 17489ca
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 13 deletions.
30 changes: 19 additions & 11 deletions src/components/Operations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
[],
Expand Down Expand Up @@ -95,7 +105,7 @@ export const Operations: ComponentType = withSuspensable(() => {
<div className="flex mr-4">
<FormGroup
helperText={
queryParams.operator?.length
selectedOperators.length
? '点击干员标签以标记为排除该干员'
: undefined
}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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'
5 changes: 3 additions & 2 deletions src/components/OperatorSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface OperatorSelectProps {
onChange: (operators: string[]) => void
}

type OperatorInfo = typeof OPERATORS[number]
type OperatorInfo = (typeof OPERATORS)[number]

interface OperatorEntry {
name: string
Expand Down Expand Up @@ -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),
}
Expand Down
17 changes: 17 additions & 0 deletions src/store/selectedOperators.ts
Original file line number Diff line number Diff line change
@@ -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(',')
})

0 comments on commit 17489ca

Please sign in to comment.