dify/web/app/components/apps/hooks/use-apps-query-state.ts

import type { AppListCategory } from '../app-type-filter-shared'
import { debounce, parseAsString, useQueryStates } from 'nuqs'
import { useCallback, useMemo, useState } from 'react'
import { parseAsAppListCategory } from '../app-type-filter-shared'
import { APP_LIST_SEARCH_DEBOUNCE_MS } from '../constants'

const appListQueryParsers = {
  category: parseAsAppListCategory,
  keywords: parseAsString.withDefault('').withOptions({
    limitUrlUpdates: debounce(APP_LIST_SEARCH_DEBOUNCE_MS),
  }),
}

export function useAppsQueryState() {
  const [urlQuery, setUrlQuery] = useQueryStates(appListQueryParsers)
  const [creatorIDs, setCreatorIDs] = useState<string[]>([])

  const setCategory = useCallback(
    (category: AppListCategory) => {
      setUrlQuery({ category })
    },
    [setUrlQuery],
  )

  const setKeywords = useCallback(
    (keywords: string) => {
      setUrlQuery({ keywords })
    },
    [setUrlQuery],
  )

  const handleSetCreatorIDs = useCallback((creatorIDs: string[]) => {
    setCreatorIDs(creatorIDs)
  }, [])

  const query = useMemo(
    () => ({
      ...urlQuery,
      creatorIDs,
    }),
    [creatorIDs, urlQuery],
  )

  return useMemo(
    () => ({
      query,
      setCategory,
      setKeywords,
      setCreatorIDs: handleSetCreatorIDs,
    }),
    [handleSetCreatorIDs, query, setCategory, setKeywords],
  )
}