Merge pull request #263 from zigzagdev/fix/default-heritage-search-params-initial-state

feat: redirect to list page when no search condition exists

Author: zigzagdev

client/src/app/features/search/containers/search-heritage-result-container.tsx

@@ -40,6 +40,14 @@ const isValidListResult = (
   return Array.isArray(value.items) && isObject(value.pagination);
 };
 
+/** Determine whether any valid search condition exists */
+const hasSearchParams = (params: HeritageSearchParams): boolean =>
+  params.search_query !== null ||
+  params.region !== null ||
+  params.category !== null ||
+  params.year_inscribed_from !== null ||
+  params.year_inscribed_to !== null;
+
 const toDraftValues = (params: HeritageSearchParams): SearchValues => ({
   region: params.region ?? "",
   category: params.category ?? "",
@@ -93,9 +101,18 @@ export function SearchHeritageResultsContainer(): React.ReactElement {
     [location.search],
   );
 
+  // If no search condition exists, redirect to the list page.
+  const isSearchMode = hasSearchParams(params);
+
+  React.useEffect(() => {
+    if (!isSearchMode) {
+      navigate({ pathname: "/heritages", search: location.search }, { replace: true });
+    }
+  }, [isSearchMode, location.search, navigate]);
+
   const { draft, setDraft, handleChange } = useHeritageSearchDraft(params);
 
-  const { data, isLoading, error } = useHeritageSearchQuery(params);
+  const { data, isLoading, error } = useHeritageSearchQuery(params, { enabled: isSearchMode });
 
   const handleClickItem = React.useCallback(
     (id: number) => {

client/src/app/features/search/hooks/use-search-heritage-query.ts

@@ -18,14 +18,29 @@ const toSearchParams = (params: HeritageSearchParams): SearchParams => ({
   perPage: params.per_page,
 });
 
-export function useHeritageSearchQuery(params: HeritageSearchParams) {
+type Options = {
+  /** If false, the API call is skipped. Defaults to true. */
+  enabled?: boolean;
+};
+
+export function useHeritageSearchQuery(
+  params: HeritageSearchParams,
+  { enabled = true }: Options = {},
+) {
   const [data, setData] = useState<ListResult<ApiWorldHeritageDto> | null>(null);
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<unknown>(null);
 
   const request: SearchParams = useMemo(() => toSearchParams(params), [params]);
 
   useEffect(() => {
+    if (!enabled) {
+      setData(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+
     const abortController = new AbortController();
 
     setLoading(true);
@@ -42,7 +57,7 @@ export function useHeritageSearchQuery(params: HeritageSearchParams) {
       .finally(() => setLoading(false));
 
     return () => abortController.abort();
-  }, [request]);
+  }, [enabled, request]);
 
   return { data, isLoading, error };
 }