use-search-value.ts1.6 KBView on GitHub
import { useCedarStore } from '@/modules/store';
import { useCallback } from 'react';

type SearchState = {
  value: string;
  highlight: string;
  folder: string;
  isLoading: boolean;
  isAISearching: boolean;
};

/**
 * Hook to get and set search state
 * Returns a tuple [state, setState] similar to Jotai's useAtom API
 */
export function useSearchValue() {
  const value = useCedarStore((state) => state.value);
  const highlight = useCedarStore((state) => state.highlight);
  const folder = useCedarStore((state) => state.folder);
  const isLoading = useCedarStore((state) => state.isLoading);
  const isAISearching = useCedarStore((state) => state.isAISearching);
  const setSearchState = useCedarStore((state) => state.setSearchState);

  const state = { value, highlight, folder, isLoading, isAISearching };

  // Wrapper to support both function updater and direct object patterns
  const setState = useCallback(
    (update: Partial<SearchState> | ((prev: SearchState) => Partial<SearchState>)) => {
      if (typeof update === 'function') {
        // Get current state and call the updater function
        const currentState = useCedarStore.getState();
        const current = {
          value: currentState.value,
          highlight: currentState.highlight,
          folder: currentState.folder,
          isLoading: currentState.isLoading,
          isAISearching: currentState.isAISearching,
        };
        const newState = update(current);
        setSearchState(newState);
      } else {
        setSearchState(update);
      }
    },
    [setSearchState],
  );

  return [state, setState] as const;
}