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 };
};