Set query param to empty when input box is empty

This commit is contained in:
bkellam 2024-08-24 20:10:01 -07:00
parent d14d76d952
commit 90b6256a4e

View file

@ -28,13 +28,14 @@ interface ZoekFileMatch {
URL: string, URL: string,
} }
interface ZoekSearchResult { interface ZoekResult {
result: {
QueryStr: string, QueryStr: string,
FileMatches: ZoekFileMatch[] | null, FileMatches: ZoekFileMatch[] | null,
}
} }
interface ZoekSearchResponse {
result: ZoekResult;
}
export default function Home() { export default function Home() {
const router = useRouter(); const router = useRouter();
@ -67,9 +68,8 @@ export default function Home() {
query={query} query={query}
numResults={numResults} numResults={numResults}
onQueryChange={(query) => setQuery(query)} onQueryChange={(query) => setQuery(query)}
onClear={() => setFileMatches([])} onSearchResult={(result) => {
onSearchResult={({ result }) => { setFileMatches(result?.FileMatches ?? []);
setFileMatches(result.FileMatches ?? []);
router.push(`?query=${query}&numResults=${numResults}`); router.push(`?query=${query}&numResults=${numResults}`);
}} }}
/> />
@ -91,8 +91,7 @@ interface SearchBarProps {
query: string; query: string;
numResults: number; numResults: number;
onQueryChange: (query: string) => void; onQueryChange: (query: string) => void;
onSearchResult: (result: ZoekSearchResult) => void, onSearchResult: (result?: ZoekResult) => void,
onClear: () => void,
} }
const SearchBar = ({ const SearchBar = ({
@ -100,20 +99,19 @@ const SearchBar = ({
numResults, numResults,
onQueryChange, onQueryChange,
onSearchResult, onSearchResult,
onClear,
}: SearchBarProps) => { }: SearchBarProps) => {
const SEARCH_DEBOUNCE_MS = 200; const SEARCH_DEBOUNCE_MS = 200;
const search = useDebouncedCallback((query: string) => { const search = useDebouncedCallback((query: string) => {
if (query === "") { if (query === "") {
onClear(); onSearchResult(undefined);
return; return;
} }
console.log('making query...'); console.log('making query...');
fetch(`http://localhost:3000/zoekt/search?query=${query}&numResults=${numResults}`) fetch(`http://localhost:3000/zoekt/search?query=${query}&numResults=${numResults}`)
.then(response => response.json()) .then(response => response.json())
.then(({ data }: { data: ZoekSearchResult }) => { .then(({ data }: { data: ZoekSearchResponse }) => {
onSearchResult(data); onSearchResult(data.result);
}) })
// @todo : error handling // @todo : error handling
.catch(error => { .catch(error => {