refactor: sync fix on pillar labels endpoint

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 ? <Spinner size="sm" color="white" /> : <SearchIcon />;
 

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;

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 }[];
+}

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(),

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

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 (
     <div className="flex flex-col gap-4">
       <AppHeader
-        input={<PillarSearchInput inputPillarItems={inputItems} />}
+        input={
+          <PillarSearchInput nav={nav} pillars={pillars} inputs={inputs} />
+        }
         mainPillar={
           <MainPillarContent
             title={title}

src/search/utils/create-input-items.ts

@@ -5,8 +5,9 @@ import { TPillarItem } from '@/search/core/types';
 export const createInputItems = (
   activeItems: Record<string, TPillarItem[]>,
   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 };
 };