38374341ed
Run Tests on Branches / Detect Changes (push) Successful in 11s
Run Tests on Branches / Backend Tests (push) Has been skipped
Run Tests on Branches / Frontend Tests (push) Successful in 1m44s
Run Tests on Branches / Frontend Mobile Tests (push) Has been skipped
Run Tests on Branches / Parapharmacy API Tests (push) Has been skipped
Add lightweight i18n system using React Context + useTranslation hook.
No external dependencies. Language persisted in localStorage('ff-lang').
New files:
- src/i18n/locales/ca.js (~410 translation keys)
- src/i18n/locales/es.js (~410 translation keys)
- src/i18n/LanguageContext.jsx (Provider + t() function)
- src/i18n/useTranslation.js (hook)
- src/i18n/index.js (barrel export)
Modified 22 files:
- main.jsx: wrap App with LanguageProvider
- App.test.jsx: add LanguageProvider wrapper for tests
- 13 user components: BottomNav, HomeView, LoginModal, SearchView,
ProfileView, AlertsView, ScannerView, PharmacyList, MedicineResults,
ProductResults, SavedNotifications, ErrorBoundary, SearchBar
- 6 admin components: AdminView, LoginForm, PharmacyManagement,
MedicineManagement, PharmacyMedicineLink, PharmacyProductLink
ProfileView includes language selector (globe icon + modal CA/ES)
placed next to the Theme selector.
No routes changed. No API calls affected. No navigation changes.
41 lines
1.1 KiB
React
41 lines
1.1 KiB
React
import React, { createContext, useState, useCallback, useMemo } from 'react';
|
|
import es from './locales/es';
|
|
import ca from './locales/ca';
|
|
|
|
const locales = { es, ca };
|
|
|
|
function getInitialLang() {
|
|
try {
|
|
const saved = localStorage.getItem('ff-lang');
|
|
if (saved === 'ca' || saved === 'es') return saved;
|
|
} catch {}
|
|
const browserLang = navigator.language || navigator.userLanguage || '';
|
|
return browserLang.startsWith('ca') ? 'ca' : 'es';
|
|
}
|
|
|
|
export const LanguageContext = createContext(null);
|
|
|
|
export function LanguageProvider({ children }) {
|
|
const [lang, setLangState] = useState(getInitialLang);
|
|
|
|
const setLang = useCallback((newLang) => {
|
|
if (newLang !== 'ca' && newLang !== 'es') return;
|
|
setLangState(newLang);
|
|
try {
|
|
localStorage.setItem('ff-lang', newLang);
|
|
} catch {}
|
|
}, []);
|
|
|
|
const t = useCallback((key) => {
|
|
return locales[lang]?.[key] || locales.es[key] || key;
|
|
}, [lang]);
|
|
|
|
const value = useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);
|
|
|
|
return (
|
|
<LanguageContext.Provider value={value}>
|
|
{children}
|
|
</LanguageContext.Provider>
|
|
);
|
|
}
|