feat:Create LanguageContext to eliminate prop drilling for locale switching#304
Merged
feat:Create LanguageContext to eliminate prop drilling for locale switching#304
Conversation
Introduce a feature-level LocaleProvider that derives the active locale from the ?lang= query string and exposes setLocale/toggleLocale through useLocale, mirroring the existing BreadcrumbProvider layout. Mount the provider in AppRoutes so downstream containers can consume locale context instead of resolving it inline. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
feat: add LocaleProvider with URL synced locale state
feat: add LocaleProvider with URL synced locale state
Drop the named LocaleContextType alias and pass the shape directly to createContext, keeping the .tsx file free of named type declarations. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the URL-derived locale plumbing in WorldHeritageDetailContainer and the locale/toggleLocale props on HeritageDetailLayout, HeritageHero, and HeritageOverViewSection. Each component now reads locale from useLocale(), so the container only forwards item and the detail tree no longer prop-drills locale state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The earlier consumer migration removed the locale prop from HeritageOverViewSection but left the call site still passing it, breaking the CI typecheck. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…-detail Refactor/use locale context in detail
Introduce per-locale UI string dictionaries under src/locals/{en,ja}/ui.json
and a useText hook in src/shared/locale that picks the dictionary off the
active locale from useLocale. Components can now read UI labels from a
single typed source instead of hard-coding English strings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pull static labels (DANGER, No image, Heritage Category, Criteria, View details, No overview available) through useText so the card follows the active locale, and fix the title fallback so it returns item.name in EN mode instead of always favouring heritageNameJp. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pull static labels (Region, Category, Year Inscribed, Criteria, Description, Maps, Gallery, Overview, View on UNESCO) through useText in HeritageDetailLayout, HeritageHero, HeritageOverViewSection, and HeritageSidebar so the detail screen follows the active locale. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…apping Chore/top component context wrapping
Make toWorldHeritageVm / toWorldHeritageDetailVm / toHeritageSearchResultVm take a locale argument and resolve title, subtitle, country, and the new displaySubName / displayDescription fields per locale. Hooks and the search results container now read locale via useLocale and feed it to the mappers, so English locale no longer falls back to Japanese strings. Also rename to-world-heritage-detail-vm-test.ts to .test.ts so Jest actually picks it up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
HeritageCard, HeritageHero, and HeritageOverviewSection now read title / displaySubName / displayDescription off the VM instead of switching on locale and re-deriving the label themselves. The locale toggle and the LocaleProvider's own locale check are unaffected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds heritageData, country, stateParty, endangered, propertyArea, bufferZone, latitude, longitude, yes, and no to both en and ja ui dictionaries so the sidebar's metadata rows can be localized. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Swap hardcoded English labels (Country, Category, Region, Yes/No, etc.) and the "Heritage Data" heading for keys read from useText, so the sidebar follows the active locale instead of staying English-only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Rename two ja labels to match the wording used by mainstream Japanese heritage sites (Mynavi etc.): - country: 国 → 保有国 - category: カテゴリ → 分類 en labels are unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the inline REGION_LABELS / CATEGORY_LABELS constants and pull every visible string (chip headings, placeholders, aria-labels, the search button) from useText. The empty option falls back to text.all; the other options reuse the existing categoryLabels / regionLabels dicts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…onents
Pull TopPage's title row, items grid, and pagination block out into
TopPageTitleBar, HeritageList, and TopPagePagination. TopPage becomes a
thin slot-based shell taking { titleBar, header, content, pagination }
as ReactNodes; the container builds each subcomponent and wires them in.
The 13-field TopPage Props collapses to four ReactNode slots inlined
on the signature, so the named type is gone. Test mocks for TopPage and
its callers are retargeted at the new subcomponents.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pull the locale switch button (the flag toggle) out into a shared LocaleToggle component under shared/locale and use it in both HeritageDetailLayout and TopPageTitleBar instead of duplicating the inline button. The detail layout no longer needs useLocale directly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add appTitle and appTagline keys to en/ja ui dictionaries and read them in TopPageTitleBar via useText, replacing the hardcoded "World Heritage" heading and "Learn by searching..." subheading. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Refactor: `locale-aware VM`s, `dictionary-driven view`s, and `TopPage` decomposition
zigzagdev
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Content
Implement language (ja/en) switching via useContext, replacing prop drilling
across components with a centralized LanguageContext.
Changes
LanguageContextandLanguageProvideruseLang()custom hook for consuming locale stateuseLang()calls across componentsMotivation
Language state was being passed down through multiple component layers.
Centralizing it in a context makes each component's interface cleaner
and removes unnecessary props from intermediate components.