diff --git a/src/search/components/pillar-search-input.tsx b/src/search/components/pillar-search-input.tsx index f3c5832..647b80d 100644 --- a/src/search/components/pillar-search-input.tsx +++ b/src/search/components/pillar-search-input.tsx @@ -9,19 +9,19 @@ import { cn } from '@/shared/utils/cn'; import { DraggableWrapper } from '@/shared/components/draggable-wrapper'; import { SearchIcon } from '@/shared/components/icons/sidebar-search-icon'; -import { TPillarItem } from '@/search/core/types'; +import { GetPillarInputLabelsProps } from '@/search/core/types'; import { usePillarInputLabels } from '@/search/hooks/use-pillar-input-labels'; import { PillarSearchInputItem } from '@/search/components/pillar-search-input-item'; import { usePillarRoutesContext } from '@/search/state/contexts/pillar-routes-context'; -interface Props { - inputPillarItems: TPillarItem[]; -} - -export const PillarSearchInput = ({ inputPillarItems }: Props) => { +export const PillarSearchInput = ({ + nav, + pillars, + inputs, +}: GetPillarInputLabelsProps) => { const { isPendingPillarRoute } = usePillarRoutesContext(); - const { data } = usePillarInputLabels(inputPillarItems); + const { data } = usePillarInputLabels({ nav, pillars, inputs }); const [items, setItems] = useState< { label: string | null; @@ -38,7 +38,7 @@ export const PillarSearchInput = ({ inputPillarItems }: Props) => { const [animateRef] = useAutoAnimate(); - const hasInputPillarItems = inputPillarItems.length > 0; + const hasInputPillarItems = inputs.length > 0; const isLoading = (isPendingPillarRoute || !data) && hasInputPillarItems; const icon = isLoading ? : ; diff --git a/src/search/core/query-keys.ts b/src/search/core/query-keys.ts index 3722c7f..a6c41c9 100644 --- a/src/search/core/query-keys.ts +++ b/src/search/core/query-keys.ts @@ -1,4 +1,8 @@ -import { GetPillarInfoProps, GetPillarItemsProps } from '@/search/core/types'; +import { + GetPillarInfoProps, + GetPillarInputLabelsProps, + GetPillarItemsProps, +} from '@/search/core/types'; export const searchQueryKeys = { all: ['search'] as const, @@ -7,8 +11,14 @@ export const searchQueryKeys = { [...searchQueryKeys.all, 'pillar-items', props] as const, getPillarInfo: (props: GetPillarInfoProps) => [...searchQueryKeys.all, 'pillar-info', props] as const, - getPillarInputLabels: (inputs: { slug: string; href: string }[]) => - [...searchQueryKeys.all, 'pillar-input-labels', inputs] as const, + getPillarInputLabels: ({ nav, pillars, inputs }: GetPillarInputLabelsProps) => + [ + ...searchQueryKeys.all, + 'pillar-input-labels', + nav, + pillars, + inputs, + ] as const, }; export type SearchQueryKeys = typeof searchQueryKeys; diff --git a/src/search/core/types.ts b/src/search/core/types.ts index 69945d1..40fae6f 100644 --- a/src/search/core/types.ts +++ b/src/search/core/types.ts @@ -28,3 +28,9 @@ export interface TPillarItem { href: string; isActive: boolean; } + +export interface GetPillarInputLabelsProps { + nav: string; + pillars: string[]; + inputs: { slug: string; href: string }[]; +} diff --git a/src/search/data/get-pillar-input-labels.ts b/src/search/data/get-pillar-input-labels.ts index a0c885d..7109716 100644 --- a/src/search/data/get-pillar-input-labels.ts +++ b/src/search/data/get-pillar-input-labels.ts @@ -2,12 +2,17 @@ import { MW_URL } from '@/shared/core/envs'; import { mwGET } from '@/shared/utils/mw-get'; import { pillarInputLabelsResponseDtoSchema } from '@/search/core/schemas'; +import { GetPillarInputLabelsProps } from '@/search/core/types'; -export const getPillarInputLabels = async ( - inputs: { slug: string; href: string }[], -) => { - const url = new URL(`${MW_URL}/search/pillar/input-labels`); - url.searchParams.set('inputs', inputs.join(',')); +export const getPillarInputLabels = async ({ + nav, + pillars, + inputs, +}: GetPillarInputLabelsProps) => { + const url = new URL(`${MW_URL}/search/pillar/labels`); + url.searchParams.set('nav', nav); + url.searchParams.set('pillars', pillars.join(',')); + url.searchParams.set('slugs', inputs.map((input) => input.slug).join(',')); const response = await mwGET({ url: url.toString(), diff --git a/src/search/hooks/use-pillar-input-labels.ts b/src/search/hooks/use-pillar-input-labels.ts index e5a137c..35e5826 100644 --- a/src/search/hooks/use-pillar-input-labels.ts +++ b/src/search/hooks/use-pillar-input-labels.ts @@ -3,15 +3,14 @@ import { useQuery } from '@tanstack/react-query'; import { QUERY_STALETIME } from '@/shared/core/constants'; import { searchQueryKeys } from '@/search/core/query-keys'; +import { GetPillarInputLabelsProps } from '@/search/core/types'; import { getPillarInputLabels } from '@/search/data/get-pillar-input-labels'; -export const usePillarInputLabels = ( - inputs: { slug: string; href: string }[], -) => { +export const usePillarInputLabels = (props: GetPillarInputLabelsProps) => { return useQuery({ - queryKey: searchQueryKeys.getPillarInputLabels(inputs), - queryFn: async () => getPillarInputLabels(inputs), + queryKey: searchQueryKeys.getPillarInputLabels(props), + queryFn: async () => getPillarInputLabels(props), staleTime: QUERY_STALETIME.DEFAULT, - enabled: inputs.length > 0, + enabled: props.inputs.length > 0 && props.pillars.length > 0, }); }; diff --git a/src/search/pages/pillar-page.tsx b/src/search/pages/pillar-page.tsx index 2677a9a..1250154 100644 --- a/src/search/pages/pillar-page.tsx +++ b/src/search/pages/pillar-page.tsx @@ -53,12 +53,18 @@ export const PillarPage = async ({ isIndex, }); - const inputItems = createInputItems(activeItems, params.item); + const { pillars, inputs } = createInputItems( + activeItems, + params.item, + pillarInfo.mainPillar.slug, + ); return (
} + input={ + + } mainPillar={ , itemParam: string | null, -): TPillarItem[] => { - if (!itemParam) return []; + mainPillar: string, +) => { + if (!itemParam) return { inputs: [], pillars: [] }; // Get the current main item if it exists const mainItem = (activeItems.include ?? []).find( @@ -24,13 +25,15 @@ export const createInputItems = ( .flatMap(([_, items]) => items); // Combine all items in the desired order - const items = [ + const inputs = [ ...(mainItem ? [{ ...mainItem, href: '/search' }] : []), ...remainingMainItems, ...altItemsArray, ]; - return items.map((item) => ({ - ...item, - })); + const pillars: string[] = Object.keys(activeItems).map((key) => + key === 'include' ? mainPillar : key, + ); + + return { inputs, pillars }; };