From 584efbb21da70c66cc334f73fcbe8dbc1a91c9c0 Mon Sep 17 00:00:00 2001 From: sphinxrave <62570796+sphinxrave@users.noreply.github.com> Date: Sun, 22 Oct 2023 16:12:06 -0700 Subject: [PATCH] partially completed search bar atoms, changing comp --- .../header/searchbar/SearchBarAtoms.tsx | 60 +++++++++++++++---- 1 file changed, 47 insertions(+), 13 deletions(-) diff --git a/packages/react/src/components/header/searchbar/SearchBarAtoms.tsx b/packages/react/src/components/header/searchbar/SearchBarAtoms.tsx index f1891e594..1f32783ca 100644 --- a/packages/react/src/components/header/searchbar/SearchBarAtoms.tsx +++ b/packages/react/src/components/header/searchbar/SearchBarAtoms.tsx @@ -1,20 +1,25 @@ import { atom } from "jotai"; import { QueryItem, SearchableCategory } from "./types"; -import { atomWithReset } from "jotai/utils"; +import { atomWithDefault, atomWithReset, splitAtom } from "jotai/utils"; import { useTranslation } from "react-i18next"; +import { useState } from "react"; +import { useQuery } from "@tanstack/react-query"; -const searchAutocompleteOptions = atomWithReset({ - vtuber: [], - topic: [], - org: [], - has_song: [], - type: [], - lang: [], - from: [], - to: [], - search: [], - description: [], -} as Record); +// const searchAutocompleteOptions = atomWithReset({ +// vtuber: [], +// topic: [], +// org: [], +// has_song: [], +// type: [], +// lang: [], +// from: [], +// to: [], +// search: [], +// description: [], +// } as Record); + +const queryAtom = atom([] as QueryItem[]); +const splitQueryAtom = splitAtom(queryAtom); // const query = atomWithReset([] as QueryItem[]); @@ -22,3 +27,32 @@ const searchAutocompleteOptions = atomWithReset({ // const { t } = useTranslation(); // } + +function useServerAutocomplete(search: string) { + const out = useQuery({ + queryKey: ["autocomplete", search], + queryFn: async ( + ctx, + ): Promise> => { + return { + vtuber: [], + topic: [], + org: [], + }; + }, + }); +} + +export function useAutocomplete() { + // query: (what's in the search bar) + // search: (the content typed into the input bar) + const [search, updateSearch] = useState(""); + // inverted_lang_index: useMemo(, [t, constants]) + + // server_autocomplete: (async response fetched from serverside autocomplete depending on search) + // client_autocomplete: (sync response from client autocomplete depending on search and inverted_lang_index) + + // autocomplete_items: (merged autocomplete options, but grouped by category, also depending on query to remove selected items from dropdown) + + return { search, updateSearch }; +}