first commit

resources/client/search/requests/use-search-results.ts

@@ -0,0 +1,48 @@
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { apiClient } from "@common/http/query-client";
+import {
+  BackendResponse
+} from "@common/http/backend-response/backend-response";
+import { Title } from "@app/titles/models/title";
+import { Person } from "@app/titles/models/person";
+import {
+  getBootstrapData
+} from "@common/core/bootstrap-data/use-backend-bootstrap-data";
+
+export interface SearchResponse extends BackendResponse {
+  query: string;
+  results: (Title | Person)[];
+}
+
+export function useSearchResults(
+  loader: 'searchPage' | 'searchAutocomplete',
+  query: string = '',
+) {
+  query = query.trim();
+  // sending only dot will cause an error as browser strips it out
+  if (query === '.') {
+    query = '';
+  }
+  return useQuery({
+    queryKey: ['search', query, 'loader'],
+    queryFn: ({signal}) => search(loader, query, signal),
+    enabled: !!query,
+    placeholderData: !!query ? keepPreviousData : undefined,
+    initialData: () => {
+      const data = getBootstrapData().loaders?.[loader];
+      if (query && data?.query == query) {
+        return data;
+      }
+    },
+  });
+}
+
+async function search(loader: string, query: string, signal: AbortSignal) {
+  await new Promise(resolve => setTimeout(resolve, 300));
+  return apiClient
+    .get<SearchResponse>(`search/${encodeURIComponent(query)}`, {
+      params: { loader },
+      signal
+    })
+    .then(response => response.data);
+}