@redocly/theme/src/core/hooks/search/use-recent-searches.ts

Shared UI components lib

import { useCallback, useState } from 'react';

import { isBrowser } from '@redocly/theme/core/utils';

const RECENT_SEARCHES_KEY = 'recentSearches';
const RECENT_SEARCHES_LIMIT = 5;

function getRecentSearches() {
  if (!isBrowser()) return [];

  const recentSearchesStr = window.localStorage.getItem(RECENT_SEARCHES_KEY);

  if (!recentSearchesStr) return [];

  return JSON.parse(recentSearchesStr) as string[];
}

function updateRecentSearches(value: string, isAdd: boolean) {
  if (!isBrowser()) return [];

  const recentSearches = getRecentSearches();

  if (value === '') return recentSearches;

  const valueIndex = recentSearches.indexOf(value);

  if (valueIndex !== -1) recentSearches.splice(valueIndex, 1);
  if (isAdd) recentSearches.unshift(value);

  localStorage?.setItem(
    RECENT_SEARCHES_KEY,
    JSON.stringify(recentSearches.slice(0, RECENT_SEARCHES_LIMIT)),
  );

  return recentSearches;
}

export const useRecentSearches = () => {
  const [items, setItems] = useState<string[]>(getRecentSearches());

  const addSearchHistoryItem = useCallback((value: string) => {
    setItems(updateRecentSearches(value, true));
  }, []);

  const removeSearchHistoryItem = useCallback((value: string) => {
    setItems(updateRecentSearches(value, false));
  }, []);

  return { items, addSearchHistoryItem, removeSearchHistoryItem };
};