Merge pull request #260 from zigzagdev/fix/heritages-results-response-without-query

zigzagdev · web-flow · commit 7ac638ec322e · 2026-03-21T20:39:16.000+09:00
fix: set default region to null in DEFAULT_HERITAGE_SEARCH_PARAMS
diff --git a/client/src/app/features/search/apis/search-api.ts b/client/src/app/features/search/apis/search-api.ts
@@ -28,6 +28,16 @@ export type ApiSearchResponse = {
   };
 };
 
+export const hasSearchConditions = (params: SearchParams): boolean => {
+  return !!(
+    params.keyword?.trim() ||
+    params.region?.trim() ||
+    params.category?.trim() ||
+    params.yearInscribedFrom ||
+    params.yearInscribedTo
+  );
+};
+
 const normalizeApiBase = (apiBase: string): string => apiBase.replace(/\/+$/, "");
 
 export const createSearchApi = ({ apiBase, fetchImpl = fetch }: SearchApiDeps) => {
diff --git a/client/src/app/features/search/containers/search-heritage-form-container.tsx b/client/src/app/features/search/containers/search-heritage-form-container.tsx
@@ -1,12 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import {
-  STUDY_REGIONS,
-  CATEGORIES,
-  type Category,
-  type HeritageSearchParams,
-  type StudyRegion,
-} from "../../../../domain/types";
+import type { HeritageSearchParams } from "../../../../domain/types";
 import {
   parseHeritageSearchParams,
   serializeHeritageSearchParams,
@@ -17,37 +11,25 @@ import type { SearchValues } from "@features/top/components/HeritageSearchForm.t
 const toSearchYearOrNull = (value: string): number | null => {
   const trimmed = value.trim();
   if (trimmed === "") return null;
-
   const parsed = Number(trimmed);
   if (!Number.isFinite(parsed)) return null;
-
   return Math.floor(parsed);
 };
 
-const isStudyRegion = (value: string): value is StudyRegion => {
-  return (STUDY_REGIONS as readonly string[]).includes(value);
-};
-
-const isCategory = (value: string): value is Category => {
-  return (CATEGORIES as readonly string[]).includes(value);
-};
-
-const toRegionOrNull = (value: StudyRegion | ""): StudyRegion | null => {
-  if (value === "") return null;
-  return isStudyRegion(value) ? value : null;
-};
-
-const toCategoryOrNull = (value: Category | ""): Category | null => {
-  if (value === "") return null;
-  return isCategory(value) ? value : null;
+/** 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;
+
+type Props = {
+  /** Notify the parent which API should be used: list or search */
+  onApiModeChange?: (isSearch: boolean) => void;
 };
 
-const toKeywordOrNull = (value: string): string | null => {
-  const trimmed = value.trim();
-  return trimmed === "" ? null : trimmed;
-};
-
-export function SearchHeritageFormContainer() {
+export function SearchHeritageFormContainer({ onApiModeChange }: Props) {
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -56,6 +38,20 @@ export function SearchHeritageFormContainer() {
     [location.search],
   );
 
+  // If any search parameter exists, we consider it as "search mode". Otherwise, it's "list mode".
+  const isSearchMode = useMemo(() => hasSearchParams(params), [params]);
+
+  useEffect(() => {
+    onApiModeChange?.(isSearchMode);
+  }, [isSearchMode, onApiModeChange]);
+
+  // If no search condition exists on the results page, redirect to the list page.
+  useEffect(() => {
+    if (!isSearchMode && location.pathname === "/heritages/results") {
+      navigate({ pathname: "/heritages", search: location.search }, { replace: true });
+    }
+  }, [isSearchMode, location.pathname, location.search, navigate]);
+
   const valueFromUrl: SearchValues = useMemo(
     () => ({
       region: params.region ?? "",
@@ -96,25 +92,18 @@ export function SearchHeritageFormContainer() {
 
       const nextParams: HeritageSearchParams = {
         ...params,
-        region: toRegionOrNull(merged.region),
-        category: toCategoryOrNull(merged.category),
-        search_query: toKeywordOrNull(merged.keyword),
+        region: (merged.region.trim() || null) as HeritageSearchParams["region"],
+        category: (merged.category.trim() || null) as HeritageSearchParams["category"],
+        search_query: merged.keyword.trim() || null,
         year_inscribed_from: toSearchYearOrNull(merged.yearInscribedFrom),
         year_inscribed_to: toSearchYearOrNull(merged.yearInscribedTo),
         current_page: 1,
       };
 
       const search = serializeHeritageSearchParams(nextParams);
-
-      navigate(
-        {
-          pathname: location.pathname,
-          search,
-        },
-        { replace: false },
-      );
+      navigate({ pathname: location.pathname, search }, { replace: false });
     },
-    [draft, location.pathname, navigate, params],
+    [navigate, location.pathname, params, draft],
   );
 
   return <HeritageSubHeader value={draft} onChange={onChange} onSubmit={onSubmit} />;
diff --git a/client/src/app/features/search/mapper/search-heritage.types.ts b/client/src/app/features/search/mapper/search-heritage.types.ts
@@ -1,13 +1,9 @@
-import {
-  type HeritageSearchParams,
-  ID_SORT_OPTIONS,
-  STUDY_REGIONS,
-} from "../../../../domain/types.ts";
+import { type HeritageSearchParams, ID_SORT_OPTIONS } from "../../../../domain/types.ts";
 
 export const DEFAULT_HERITAGE_SEARCH_PARAMS: HeritageSearchParams = {
   search_query: null,
   country: null,
-  region: STUDY_REGIONS[0],
+  region: null,
   category: null,
   year_inscribed_from: null,
   year_inscribed_to: null,
diff --git a/client/src/app/features/top/components/heritage-detail/HeritageSubHeader.tsx b/client/src/app/features/top/components/heritage-detail/HeritageSubHeader.tsx
@@ -3,17 +3,12 @@ import { Button } from "@shared/uis/Button";
 import SearchIcon from "@mui/icons-material/Search";
 import { STUDY_REGIONS, CATEGORIES } from "../../../../../domain/types";
 import type { Category, StudyRegion } from "../../../../../domain/types";
-
-type SearchQuery = {
-  region?: StudyRegion;
-  category?: Category;
-  keyword?: string;
-};
+import type { SearchValues } from "@features/top/components/HeritageSearchForm.tsx";
 
 type Props = {
-  title: string;
-  onSearch?: (q: SearchQuery) => void;
-  onKeywordChange?: (keyword: string) => void;
+  value?: SearchValues;
+  onChange?: (next: SearchValues) => void;
+  onSubmit?: (query: Partial<SearchValues>) => void;
 };
 
 function Divider() {
@@ -37,19 +32,33 @@ const isCategory = (value: string): value is Category => {
   return CATEGORIES.includes(value as Category);
 };
 
-export function HeritageSubHeader({ title, onSearch, onKeywordChange }: Props): React.JSX.Element {
+export function HeritageSubHeader({ value, onChange, onSubmit }: Props): React.JSX.Element {
   const regionOptions = useMemo(() => ["", ...STUDY_REGIONS] as const, []);
   const categoryOptions = useMemo(() => ["", ...CATEGORIES] as const, []);
 
-  const [region, setRegion] = useState<StudyRegion | "">("");
-  const [category, setCategory] = useState<Category | "">("");
-  const [keyword, setKeyword] = useState("");
+  const [internal, setInternal] = useState<SearchValues>({
+    region: value?.region ?? "",
+    category: value?.category ?? "",
+    keyword: value?.keyword ?? "",
+    yearInscribedFrom: value?.yearInscribedFrom ?? "",
+    yearInscribedTo: value?.yearInscribedTo ?? "",
+  });
+
+  const current = value ?? internal;
+
+  const set = (patch: Partial<SearchValues>) => {
+    const next: SearchValues = { ...current, ...patch };
+    if (!value) setInternal(next);
+    onChange?.(next);
+  };
 
   const submit = () => {
-    onSearch?.({
-      region: region === "" ? undefined : region,
-      category: category === "" ? undefined : category,
-      keyword: keyword.trim() === "" ? undefined : keyword.trim(),
+    onSubmit?.({
+      region: current.region,
+      category: current.category,
+      keyword: current.keyword,
+      yearInscribedFrom: current.yearInscribedFrom,
+      yearInscribedTo: current.yearInscribedTo,
     });
   };
 
@@ -61,8 +70,6 @@ export function HeritageSubHeader({ title, onSearch, onKeywordChange }: Props):
             <form
               onSubmit={(e) => {
                 e.preventDefault();
-                console.log(title);
-                onKeywordChange?.(keyword);
                 submit();
               }}
               className="rounded-2xl border border-zinc-200 bg-white px-4 py-3 shadow-sm"
@@ -71,17 +78,17 @@ export function HeritageSubHeader({ title, onSearch, onKeywordChange }: Props):
                 <div className="flex items-center gap-3 md:w-[180px]">
                   <FieldLabel title="Region" subtitle="Area" />
                   <select
-                    value={region}
+                    value={current.region}
                     onChange={(e) => {
-                      const value = e.target.value;
-                      setRegion(value === "" || isStudyRegion(value) ? value : "");
+                      const v = e.target.value;
+                      set({ region: v === "" || isStudyRegion(v) ? v : "" });
                     }}
                     className="h-10 w-full rounded-xl bg-transparent px-2 text-sm font-semibold text-zinc-900 hover:bg-zinc-50 focus:outline-none"
                     aria-label="Region"
                   >
-                    {regionOptions.map((value, index) => (
-                      <option key={`${value || "all"}-${index}`} value={value}>
-                        {value || "All"}
+                    {regionOptions.map((opt, i) => (
+                      <option key={`${opt || "all"}-${i}`} value={opt}>
+                        {opt || "All"}
                       </option>
                     ))}
                   </select>
@@ -92,17 +99,17 @@ export function HeritageSubHeader({ title, onSearch, onKeywordChange }: Props):
                 <div className="flex items-center gap-3 md:w-[220px]">
                   <FieldLabel title="Category" subtitle="Type" />
                   <select
-                    value={category}
+                    value={current.category}
                     onChange={(e) => {
-                      const value = e.target.value;
-                      setCategory(value === "" || isCategory(value) ? value : "");
+                      const v = e.target.value;
+                      set({ category: v === "" || isCategory(v) ? v : "" });
                     }}
                     className="h-10 w-full rounded-xl bg-transparent px-2 text-sm font-semibold text-zinc-900 hover:bg-zinc-50 focus:outline-none"
                     aria-label="Category"
                   >
-                    {categoryOptions.map((value, index) => (
-                      <option key={`${value || "all"}-${index}`} value={value}>
-                        {value || "All"}
+                    {categoryOptions.map((opt, i) => (
+                      <option key={`${opt || "all"}-${i}`} value={opt}>
+                        {opt || "All"}
                       </option>
                     ))}
                   </select>
@@ -113,8 +120,8 @@ export function HeritageSubHeader({ title, onSearch, onKeywordChange }: Props):
                 <div className="flex items-center gap-3 md:flex-1">
                   <FieldLabel title="Keyword" subtitle="Name / Country" />
                   <input
-                    value={keyword}
-                    onChange={(e) => setKeyword(e.target.value)}
+                    value={current.keyword}
+                    onChange={(e) => set({ keyword: e.target.value })}
                     placeholder="Search the List"
                     className="h-10 w-full rounded-xl bg-transparent px-2 text-sm text-zinc-900 placeholder:text-zinc-400 hover:bg-zinc-50 focus:outline-none"
                     aria-label="Keyword"
