refactor: marketplace state management

web/app/(commonLayout)/plugins/page.tsx

@@ -2,11 +2,11 @@ import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 
-const PluginList = async () => {
+const PluginList = () => {
  return (
  <PluginPage
  plugins={<PluginsPanel />}
- marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
+ marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" />}
  />
  )
 }

web/app/components/plugins/marketplace/atoms.ts

@@ -0,0 +1,81 @@
+import type { ActivePluginType } from './constants'
+import type { PluginsSort, SearchParamsFromCollection } from './types'
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useQueryState } from 'nuqs'
+import { useCallback } from 'react'
+import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
+import { marketplaceSearchParamsParsers } from './search-params'
+
+const marketplaceSortAtom = atom<PluginsSort>(DEFAULT_SORT)
+export function useMarketplaceSort() {
+ return useAtom(marketplaceSortAtom)
+}
+export function useMarketplaceSortValue() {
+ return useAtomValue(marketplaceSortAtom)
+}
+export function useSetMarketplaceSort() {
+ return useSetAtom(marketplaceSortAtom)
+}
+
+/**
+ * Preserve the state for marketplace
+ */
+export const preserveSearchStateInQueryAtom = atom<boolean>(false)
+
+const searchPluginTextAtom = atom<string>('')
+const activePluginTypeAtom = atom<ActivePluginType>('all')
+const filterPluginTagsAtom = atom<string[]>([])
+
+export function useSearchPluginText() {
+ const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+ const queryState = useQueryState('q', marketplaceSearchParamsParsers.q)
+ const atomState = useAtom(searchPluginTextAtom)
+ return preserveSearchStateInQuery ? queryState : atomState
+}
+export function useActivePluginType() {
+ const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+ const queryState = useQueryState('category', marketplaceSearchParamsParsers.category)
+ const atomState = useAtom(activePluginTypeAtom)
+ return preserveSearchStateInQuery ? queryState : atomState
+}
+export function useFilterPluginTags() {
+ const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+ const queryState = useQueryState('tags', marketplaceSearchParamsParsers.tags)
+ const atomState = useAtom(filterPluginTagsAtom)
+ return preserveSearchStateInQuery ? queryState : atomState
+}
+
+/**
+ * Not all categories have collections, so we need to
+ * force the search mode for those categories.
+ */
+export const searchModeAtom = atom<true | null>(null)
+
+export function useMarketplaceSearchMode() {
+ const [searchPluginText] = useSearchPluginText()
+ const [filterPluginTags] = useFilterPluginTags()
+ const [activePluginType] = useActivePluginType()
+
+ const searchMode = useAtomValue(searchModeAtom)
+ const isSearchMode = !!searchPluginText
+ || filterPluginTags.length > 0
+ || (searchMode ?? (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType)))
+ return isSearchMode
+}
+
+export function useMarketplaceMoreClick() {
+ const [,setQ] = useSearchPluginText()
+ const setSort = useSetAtom(marketplaceSortAtom)
+ const setSearchMode = useSetAtom(searchModeAtom)
+
+ return useCallback((searchParams?: SearchParamsFromCollection) => {
+ if (!searchParams)
+ return
+ setQ(searchParams?.query || '')
+ setSort({
+ sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+ sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+ })
+ setSearchMode(true)
+ }, [setQ, setSort, setSearchMode])
+}

web/app/components/plugins/marketplace/constants.ts

@@ -1,6 +1,30 @@
+import { PluginCategoryEnum } from '../types'
+
 export const DEFAULT_SORT = {
  sortBy: 'install_count',
  sortOrder: 'DESC',
 }
 
 export const SCROLL_BOTTOM_THRESHOLD = 100
+
+export const PLUGIN_TYPE_SEARCH_MAP = {
+ all: 'all',
+ model: PluginCategoryEnum.model,
+ tool: PluginCategoryEnum.tool,
+ agent: PluginCategoryEnum.agent,
+ extension: PluginCategoryEnum.extension,
+ datasource: PluginCategoryEnum.datasource,
+ trigger: PluginCategoryEnum.trigger,
+ bundle: 'bundle',
+} as const
+
+type ValueOf<T> = T[keyof T]
+
+export type ActivePluginType = ValueOf<typeof PLUGIN_TYPE_SEARCH_MAP>
+
+export const PLUGIN_CATEGORY_WITH_COLLECTIONS = new Set<ActivePluginType>(
+ [
+ PLUGIN_TYPE_SEARCH_MAP.all,
+ PLUGIN_TYPE_SEARCH_MAP.tool,
+ ],
+)