Function ContentSearch

apps/web/components/ContentSearch.tsx:23–181

({ tracks }: { tracks: TrackPros[] })

}

export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [input, setInput] = useState("");
  const [searchTracks, setSearchTracks] = useState<any[]>([]);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const scrollableContainerRef = useRef<HTMLDivElement>(null);
  const deferredInput = useDeferredValue(input);
  const [allTracks, setAllTracks] = useState<DataItem[]>([]);
  useEffect(() => {
    const updatedTracks: DataItem[] = [];
    tracks.map((t) => {
      t.problems.map((p) => {
        updatedTracks.push({
          payload: {
            problemId: p.id,
            trackTitle: t.title,
            problemTitle: p.title,
            trackId: t.id,
            image: t.image,
          },
        });
      });
    });
    setAllTracks(updatedTracks);
  }, []);
  useEffect(() => {
    const fuse = new Fuse(allTracks, {
      keys: ["payload.problemTitle"],
    });

    async function fetchSearchResults() {
      if (deferredInput.length > 0) {
        /* const data = await getSearchResults(deferredInput); */
        const data = fuse.search(deferredInput);
        const items = data.map((result) => result.item);
        setSearchTracks(items);
      } else {
        setSearchTracks([]);
      }
    }
    fetchSearchResults();
  }, [deferredInput]);

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      switch (event.code) {
        case "KeyK":
          if (event.ctrlKey) {
            event.preventDefault();
            setDialogOpen(true);
          }
          break;
        case "ArrowDown":
          event.preventDefault();
          setSelectedIndex((prevIndex) => (prevIndex + 1) % searchTracks.length);
          break;
        case "ArrowUp":
          event.preventDefault();