dify/web/app/components/snippet-list/hooks/use-snippets-query-state.ts

import { debounce, parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs'
import { useCallback, useMemo, useState } from 'react'
import { SNIPPET_LIST_SEARCH_DEBOUNCE_MS } from '../constants'

const snippetListQueryParsers = {
  tagIDs: parseAsArrayOf(parseAsString, ';').withDefault([]).withOptions({ history: 'push' }),
  keywords: parseAsString.withDefault('').withOptions({
    limitUrlUpdates: debounce(SNIPPET_LIST_SEARCH_DEBOUNCE_MS),
  }),
}

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

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

  const setTagIDs = useCallback(
    (tagIDs: string[]) => {
      setUrlQuery({ tagIDs })
    },
    [setUrlQuery],
  )

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

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

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