feat: user filter

Author: guansss

package.json

@@ -44,7 +44,7 @@
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",
     "lodash-es": "^4.17.21",
-    "maa-copilot-client": "https://github.com/MaaAssistantArknights/maa-copilot-client-ts.git#0.1.0-SNAPSHOT.822.787cfb1",
+    "maa-copilot-client": "https://github.com/MaaAssistantArknights/maa-copilot-client-ts.git#0.1.0-SNAPSHOT.824.f8ad839",
     "normalize.css": "^8.0.1",
     "prettier": "^3.2.5",
     "react": "^18.0.0",

src/apis/user.ts

@@ -1,6 +1,5 @@
 import useSWR from 'swr'
 
-import { NotFoundError } from '../utils/error'
 import { UserApi } from '../utils/maa-copilot-client'
 
 export function useUserInfo({
@@ -20,13 +19,27 @@ export function useUserInfo({
         userId,
       })
 
-      // FIXME: 严谨一点！！！
-      if (res.data.userName === '未知用户:(') {
-        throw new NotFoundError()
-      }
-
       return res.data
     },
     { suspense },
   )
 }
+
+export function useUserSearch({ keyword }: { keyword?: string }) {
+  return useSWR(
+    keyword ? ['userSearch', keyword] : null,
+    async ([, keyword]) => {
+      const res = await new UserApi({
+        sendToken: 'never',
+        requireData: true,
+      }).searchUsers({
+        userName: keyword,
+      })
+      return res.data
+    },
+    {
+      revalidateOnFocus: false,
+      keepPreviousData: true,
+    },
+  )
+}

src/components/Operations.tsx

@@ -9,6 +9,7 @@ import {
 import { UseOperationsParams } from 'apis/operation'
 import { useAtom } from 'jotai'
 import { debounce } from 'lodash-es'
+import { MaaUserInfo } from 'maa-copilot-client'
 import { ComponentType, useMemo, useState } from 'react'
 
 import { CardTitle } from 'components/CardTitle'
@@ -20,6 +21,7 @@ import { authAtom } from '../store/auth'
 import { LevelSelect } from './LevelSelect'
 import { OperatorFilter } from './OperatorFilter'
 import { withSuspensable } from './Suspensable'
+import { UserFilter } from './UserFilter'
 
 export const Operations: ComponentType = withSuspensable(() => {
   const [queryParams, setQueryParams] = useState<
@@ -33,6 +35,7 @@ export const Operations: ComponentType = withSuspensable(() => {
     [],
   )
 
+  const [selectedUser, setSelectedUser] = useState<MaaUserInfo>()
   const [selectedOperators, setSelectedOperators] = useState<string[]>([])
 
   const [authState] = useAtom(authAtom)
@@ -133,6 +136,17 @@ export const Operations: ComponentType = withSuspensable(() => {
                   operators={selectedOperators}
                   onChange={setSelectedOperators}
                 />
+                <UserFilter
+                  className="mt-2"
+                  user={selectedUser}
+                  onChange={(user) => {
+                    setSelectedUser(user)
+                    setQueryParams((old) => ({
+                      ...old,
+                      uploaderId: user?.id,
+                    }))
+                  }}
+                />
               </div>
             </div>
             <div className="flex flex-col">

src/components/Suggest.tsx

@@ -1,25 +1,29 @@
 import { Suggest2, Suggest2Props } from '@blueprintjs/select'
 
-import { noop } from 'lodash-es'
+import { debounce, noop } from 'lodash-es'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { ControllerFieldState } from 'react-hook-form'
 
 import { FieldResetButton } from './FieldResetButton'
 
 interface SuggestProps<T> extends Suggest2Props<T> {
-  debounce?: number // defaults to 100(ms), set to 0 to disable
+  query?: string // controlled query, optional
+  debounce?: number // defaults to 100(ms)
   updateQueryOnSelect?: boolean
   fieldState?: ControllerFieldState
+  onDebouncedQueryChange?: (query: string) => void
   onReset?: () => void
 }
 
 export const Suggest = <T,>({
-  debounce = 100,
+  debounce: debounceTime = 100,
   updateQueryOnSelect,
   fieldState,
+  query: propQuery,
+  onQueryChange,
+  onDebouncedQueryChange,
   onReset,
 
-  items,
   itemListPredicate,
   selectedItem,
   inputValueRenderer,
@@ -33,45 +37,60 @@ export const Suggest = <T,>({
     ref.current['selectText'] = noop
   }
 
-  const [query, setQuery] = useState('')
+  const onQueryChangeRef = useRef(onQueryChange)
+  onQueryChangeRef.current = onQueryChange
+  const onDebouncedQueryChangeRef = useRef(onDebouncedQueryChange)
+  onDebouncedQueryChangeRef.current = onDebouncedQueryChange
+
+  const [internalQuery, setInternalQuery] = useState('')
   const [debouncedQuery, setDebouncedQuery] = useState('')
+  const query = propQuery ?? internalQuery
+  const updateQuery = useMemo(() => {
+    // note: debouncing is required to fix https://github.com/MaaAssistantArknights/maa-copilot-frontend/issues/72
+    const debouncedUpdateQuery = debounce((query: string) => {
+      setDebouncedQuery(query)
+      onDebouncedQueryChangeRef.current?.(query)
+    }, debounceTime)
 
-  // the debounce fixes https://github.com/MaaAssistantArknights/maa-copilot-frontend/issues/72
-  useEffect(() => {
-    if (debounce) {
-      const timer = setTimeout(() => setDebouncedQuery(query), debounce)
-      return () => clearTimeout(timer)
+    const updateQuery = (query: string, immediately: boolean) => {
+      setInternalQuery(query)
+      onQueryChangeRef.current?.(query)
+      debouncedUpdateQuery(query)
+      if (immediately) {
+        debouncedUpdateQuery.flush()
+      }
     }
-    setDebouncedQuery(query)
-    return undefined
-  }, [query, debounce])
+    updateQuery.cancel = debouncedUpdateQuery.cancel
+    return updateQuery
+  }, [debounceTime])
 
-  const filteredItems = useMemo(
-    () => itemListPredicate?.(debouncedQuery, items) || items,
-    [itemListPredicate, debouncedQuery, items],
-  )
+  // 取消等待中的调用
+  useEffect(() => () => updateQuery.cancel(), [updateQuery])
 
   useEffect(() => {
-    if (!fieldState?.isTouched) {
-      setQuery('')
-      setDebouncedQuery('')
+    if (fieldState && !fieldState.isTouched) {
+      updateQuery('', true)
     }
-  }, [fieldState?.isTouched])
+  }, [fieldState, updateQuery])
 
   useEffect(() => {
     if (updateQueryOnSelect && selectedItem) {
-      setQuery(inputValueRenderer(selectedItem))
+      updateQuery(inputValueRenderer(selectedItem), true)
     }
-  }, [updateQueryOnSelect, selectedItem, inputValueRenderer])
+  }, [updateQueryOnSelect, selectedItem, inputValueRenderer, updateQuery])
 
   return (
     <Suggest2<T>
       ref={ref}
-      items={filteredItems}
       query={query}
-      onQueryChange={setQuery}
+      onQueryChange={(query) => updateQuery(query, false)}
       selectedItem={selectedItem}
       inputValueRenderer={inputValueRenderer}
+      itemListPredicate={
+        itemListPredicate
+          ? (query, items) => itemListPredicate(debouncedQuery, items)
+          : undefined
+      }
       inputProps={{
         onKeyDown: (event) => {
           // prevent form submission
@@ -82,15 +101,17 @@ export const Suggest = <T,>({
         rightElement: (
           <FieldResetButton
             disabled={
-              fieldState
-                ? !fieldState.isDirty
-                : onReset
-                  ? !(query || selectedItem !== null)
-                  : true
+              !(
+                // enabled =
+                (fieldState
+                  ? fieldState.isDirty
+                  : onReset
+                    ? query || selectedItem !== null
+                    : false)
+              )
             }
             onReset={() => {
-              setQuery('')
-              setDebouncedQuery('')
+              updateQuery('', true)
               onReset?.()
             }}
           />

src/components/UserFilter.tsx

@@ -0,0 +1,83 @@
+import { MenuItem, Spinner } from '@blueprintjs/core'
+
+import clsx from 'clsx'
+import { MaaUserInfo } from 'maa-copilot-client'
+import { FC, useState } from 'react'
+
+import { useUserSearch } from '../apis/user'
+import { formatError } from '../utils/error'
+import { Suggest } from './Suggest'
+
+interface UserFilterProps {
+  className?: string
+  user?: MaaUserInfo
+  onChange: (user: MaaUserInfo | undefined) => void
+}
+
+export const UserFilter: FC<UserFilterProps> = ({
+  className,
+  user,
+  onChange,
+}) => {
+  const [keyword, setKeyword] = useState('')
+  const [debouncedKeyword, setDebouncedKeyword] = useState('')
+  const {
+    data: users = [],
+    error,
+    isLoading,
+    isValidating,
+  } = useUserSearch({
+    // 如果已经选中了用户，就不再搜索
+    keyword: debouncedKeyword === user?.userName ? undefined : debouncedKeyword,
+  })
+
+  return (
+    <Suggest<MaaUserInfo>
+      debounce={500}
+      items={users}
+      itemListPredicate={() => (error ? [] : users)} // 有 error 时用 noResults 显示错误信息
+      query={keyword}
+      onQueryChange={setKeyword}
+      onDebouncedQueryChange={setDebouncedKeyword}
+      onReset={() => onChange(undefined)}
+      className={clsx(className, user && '[&_input:not(:focus)]:italic')}
+      itemRenderer={(item, { handleClick, handleFocus, modifiers }) => (
+        <MenuItem
+          key={item.id}
+          text={item.userName}
+          onClick={handleClick}
+          onFocus={handleFocus}
+          selected={modifiers.active}
+          disabled={modifiers.disabled}
+        />
+      )}
+      selectedItem={user ?? null}
+      onItemSelect={(user) => onChange(user)}
+      inputValueRenderer={(item) => item.userName}
+      noResults={
+        <MenuItem
+          disabled
+          text={
+            isLoading
+              ? '正在搜索...'
+              : error
+                ? '搜索失败：' + formatError(error)
+                : keyword && debouncedKeyword
+                  ? '查无此人 (ﾟДﾟ≡ﾟдﾟ)!?'
+                  : '输入用户名以搜索'
+          }
+        />
+      }
+      inputProps={{
+        placeholder: '上传者',
+        leftIcon: isValidating ? (
+          <Spinner className="bp4-icon" size={16} />
+        ) : (
+          'person'
+        ),
+        large: true,
+        size: 64,
+      }}
+    />
+  )
+}

yarn.lock

@@ -3642,9 +3642,9 @@ lru-cache@^6.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
-"maa-copilot-client@https://github.com/MaaAssistantArknights/maa-copilot-client-ts.git#0.1.0-SNAPSHOT.822.787cfb1":
-  version "0.1.0-SNAPSHOT.822.787cfb1"
-  resolved "https://github.com/MaaAssistantArknights/maa-copilot-client-ts.git#4660878e9f25a4ec9a356dfca6762c3ef5797a55"
+"maa-copilot-client@https://github.com/MaaAssistantArknights/maa-copilot-client-ts.git#0.1.0-SNAPSHOT.824.f8ad839":
+  version "0.1.0-SNAPSHOT.824.f8ad839"
+  resolved "https://github.com/MaaAssistantArknights/maa-copilot-client-ts.git#02c72f9a306c097e3307b8120a35b8e72aff167e"
 
 make-dir@^2.1.0:
   version "2.1.0"