Merge pull request #301 from zigzagdev/refactor/use-locale-context-in-detail

Refactor/use locale context in detail

Author: zigzagdev

client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import type { WorldHeritageDetailVm, SearchValues } from "../../../../../domain/types.ts";
-import type { Locale } from "../../../../../domain/criteria";
 import { HeritageSubHeader } from "../HeritageSubHeader.tsx";
 import { HeritageHero } from "./HeritageHero";
 import { HeritageOverViewSection } from "./HeritageOverviewSection";
@@ -11,6 +10,7 @@ import { DetailHeritageMap } from "@features/top/components/heritage-detail/Deta
 import { textType } from "@shared/styles/typography";
 import { useSetBreadcrumbLabel } from "@features/breadcrumbs/BreadCrumbHooks.ts";
 import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
+import { useLocale } from "@shared/locale/LocaleHooks.ts";
 
 const DEFAULT_SEARCH: SearchValues = {
   region: "",
@@ -93,18 +93,11 @@ function KeyExamInfo({ item }: { item: WorldHeritageDetailVm }) {
   );
 }
 
-export function HeritageDetailLayout({
-  item,
-  locale,
-  toggleLocale,
-}: {
-  item: WorldHeritageDetailVm;
-  locale: Locale;
-  toggleLocale: () => void;
-}) {
+export function HeritageDetailLayout({ item }: { item: WorldHeritageDetailVm }) {
   const [search, setSearch] = useState<SearchValues>(DEFAULT_SEARCH);
   const setLabel = useSetBreadcrumbLabel();
   const navigate = useNavigate();
+  const { locale, toggleLocale } = useLocale();
 
   const handleSubmit = (q: Partial<SearchValues>) => {
     const next = { ...search, ...q };
@@ -145,7 +138,7 @@ export function HeritageDetailLayout({
       </div>
 
       {/* Hero image */}
-      <HeritageHero item={item} locale={locale} />
+      <HeritageHero item={item} />
 
       {/* Key exam info: always visible */}
       <KeyExamInfo item={item} />
@@ -159,7 +152,7 @@ export function HeritageDetailLayout({
         <div className="grid gap-6 lg:gap-8 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start">
           {/* Left: Overview → Gallery */}
           <div className="space-y-8" id="content">
-            <HeritageOverViewSection item={item} locale={locale} />
+            <HeritageOverViewSection item={item} />
             <HeritageGallery images={item.images} />
           </div>
 

client/src/app/features/top/components/heritage-detail/HeritageHero.tsx

@@ -1,7 +1,8 @@
 import type { WorldHeritageDetailVm, WorldHeritageImageVm } from "../../../../../domain/types.ts";
-import type { Locale } from "../../../../../domain/criteria.ts";
+import { useLocale } from "@shared/locale/LocaleHooks.ts";
 
-export function HeritageHero({ item, locale }: { item: WorldHeritageDetailVm; locale: Locale }) {
+export function HeritageHero({ item }: { item: WorldHeritageDetailVm }) {
+  const { locale } = useLocale();
   const primaryImage: WorldHeritageImageVm | undefined =
     item.images.find((img) => img.isPrimary) ?? item.images[0];
 

client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx

@@ -1,13 +1,9 @@
 import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts";
 import { textType } from "@shared/styles/typography.ts";
+import { useLocale } from "@shared/locale/LocaleHooks.ts";
 
-export function HeritageOverViewSection({
-  item,
-  locale,
-}: {
-  item: WorldHeritageDetailVm;
-  locale: string;
-}) {
+export function HeritageOverViewSection({ item }: { item: WorldHeritageDetailVm }) {
+  const { locale } = useLocale();
   return (
     <section
       id="overview"

client/src/app/features/top/containers/world-heritage-detail-container.tsx

@@ -1,30 +1,12 @@
-import { useEffect, useMemo, useContext } from "react";
-import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+import { useEffect, useContext } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import { useWorldHeritageDetail } from "../hooks/use-world-heritage-detail";
 import { HeritageDetailLayout } from "../components/heritage-detail/HeritageDetailLayout";
-import { LOCALES, type Locale } from "../../../../domain/criteria";
 import BreadcrumbContext from "@features/breadcrumbs/BreadCrumbProvider";
 
-function resolveLocale(raw: string | null): Locale {
-  if (!raw) return "en";
-  return (LOCALES as readonly string[]).includes(raw) ? (raw as Locale) : "en";
-}
-
 export function WorldHeritageDetailContainer() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const locale = useMemo(() => resolveLocale(searchParams.get("lang")), [searchParams]);
-
-  const toggleLanguageLocation = () => {
-    const theOther = locale === "ja" ? "en" : "ja";
-    setSearchParams((prev) => {
-      const nowLocal = new URLSearchParams(prev);
-      nowLocal.set("lang", theOther);
-
-      return nowLocal;
-    });
-  };
 
   useEffect(() => {
     if (!id) navigate("/heritages", { replace: true });
@@ -61,5 +43,5 @@ export function WorldHeritageDetailContainer() {
     );
   }
 
-  return <HeritageDetailLayout item={item} locale={locale} toggleLocale={toggleLanguageLocation} />;
+  return <HeritageDetailLayout item={item} />;
 }

client/src/shared/locale/LocaleProvider.tsx

@@ -1,15 +1,16 @@
 import React, { createContext, useCallback, useMemo } from "react";
 import type { ReactNode } from "react";
 import { useSearchParams } from "react-router-dom";
-import { LOCALES, type Locale } from "../../../domain/criteria.ts";
-
-type LocaleContextType = {
-  locale: Locale;
-  setLocale: (locale: Locale) => void;
-  toggleLocale: () => void;
-};
-
-const LocaleContext = createContext<LocaleContextType | undefined>(undefined);
+import { LOCALES, type Locale } from "../../domain/criteria.ts";
+
+const LocaleContext = createContext<
+  | {
+      locale: Locale;
+      setLocale: (locale: Locale) => void;
+      toggleLocale: () => void;
+    }
+  | undefined
+>(undefined);
 
 const isLocale = (value: string): value is Locale => LOCALES.some((l) => l === value);