Merge pull request #300 from zigzagdev/feat/locale-provider

feat: add LocaleProvider with URL synced locale state

Author: zigzagdev

client/src/app/routes/AppRoutes.tsx

@@ -3,16 +3,19 @@ import TopPageContainer from "@features/top/containers/top-page-container.tsx";
 import { WorldHeritageDetailContainer } from "@features/top/containers/world-heritage-detail-container.tsx";
 import { SearchHeritageResultsContainer } from "@features/search/containers/search-heritage-result-container.tsx";
 import { BreadcrumbProvider } from "@features/breadcrumbs/BreadCrumbProvider.tsx";
+import { LocaleProvider } from "@shared/locale/LocaleProvider.tsx";
 
 export function AppRoutes() {
   return (
-    <BreadcrumbProvider>
-      <Routes>
-        <Route path="/heritages" element={<TopPageContainer />} />
-        <Route path="/heritages/results" element={<SearchHeritageResultsContainer />} />
-        <Route path="/heritages/:id" element={<WorldHeritageDetailContainer />} />
-        <Route path="*" element={<Navigate to="/heritages" replace />} />
-      </Routes>
-    </BreadcrumbProvider>
+    <LocaleProvider>
+      <BreadcrumbProvider>
+        <Routes>
+          <Route path="/heritages" element={<TopPageContainer />} />
+          <Route path="/heritages/results" element={<SearchHeritageResultsContainer />} />
+          <Route path="/heritages/:id" element={<WorldHeritageDetailContainer />} />
+          <Route path="*" element={<Navigate to="/heritages" replace />} />
+        </Routes>
+      </BreadcrumbProvider>
+    </LocaleProvider>
   );
 }

client/src/shared/locale/LocaleHooks.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import LocaleContext from "./LocaleProvider.tsx";
+
+export const useLocale = () => {
+  const context = useContext(LocaleContext);
+  if (!context) throw new Error("useLocale must be used within LocaleProvider");
+  return context;
+};

client/src/shared/locale/LocaleProvider.tsx

@@ -0,0 +1,51 @@
+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);
+
+const isLocale = (value: string): value is Locale => LOCALES.some((l) => l === value);
+
+const resolveLocale = (raw: string | null): Locale => {
+  if (!raw) return "en";
+  return isLocale(raw) ? raw : "en";
+};
+
+export const LocaleProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const locale = useMemo(() => resolveLocale(searchParams.get("lang")), [searchParams]);
+
+  const setLocale = useCallback(
+    (next: Locale) => {
+      setSearchParams(
+        (prev) => {
+          const updated = new URLSearchParams(prev);
+          updated.set("lang", next);
+          return updated;
+        },
+        { replace: false },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const toggleLocale = useCallback(() => {
+    setLocale(locale === "ja" ? "en" : "ja");
+  }, [locale, setLocale]);
+
+  const value = useMemo(
+    () => ({ locale, setLocale, toggleLocale }),
+    [locale, setLocale, toggleLocale],
+  );
+
+  return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>;
+};
+
+export default LocaleContext;