From dceeb4e927ba13a2752c47d3aece18f1253983d4 Mon Sep 17 00:00:00 2001 From: mistakia <1823355+mistakia@users.noreply.github.com> Date: Wed, 3 Apr 2024 22:45:23 -0400 Subject: [PATCH] feat: detect browser locale preference --- src/core/i18n/actions.js | 5 ++-- src/core/i18n/sagas.js | 24 ++++++++++++++++--- src/core/utils/local-storage.js | 10 +++++--- .../components/change-locale/change-locale.js | 4 +++- src/views/pages/doc/doc.js | 2 +- 5 files changed, 35 insertions(+), 10 deletions(-) diff --git a/src/core/i18n/actions.js b/src/core/i18n/actions.js index 4e968253..4c999799 100644 --- a/src/core/i18n/actions.js +++ b/src/core/i18n/actions.js @@ -1,10 +1,11 @@ export const i18nActions = { CHANGE_LOCALE: 'CHANGE_LOCALE', - change_locale: (locale) => ({ + change_locale: ({ locale, save }) => ({ type: i18nActions.CHANGE_LOCALE, payload: { - locale + locale, + save } }) } diff --git a/src/core/i18n/sagas.js b/src/core/i18n/sagas.js index 06135e04..cb6c0155 100644 --- a/src/core/i18n/sagas.js +++ b/src/core/i18n/sagas.js @@ -3,18 +3,36 @@ import i18n from 'i18next' import { localStorageAdapter } from '@core/utils' import { appActions } from '@core/app/actions' +import { SUPPORTED_LOCALES } from '@core/constants' import { i18nActions } from './actions' export function* init({ payload }) { if (payload.locale) { - yield put(i18nActions.change_locale(payload.locale)) + yield put( + i18nActions.change_locale({ locale: payload.locale, save: false }) + ) } - // TODO detect user locale + console.log('No locale saved') + + // detect user locale + const user_locale = navigator.language || navigator.languages[0] + + if (user_locale) { + const user_locale_key = user_locale.split('-')[0] + if (SUPPORTED_LOCALES.includes(user_locale_key)) { + console.log(`Setting locale to browser preference: ${user_locale_key}`) + yield put( + i18nActions.change_locale({ locale: user_locale_key, save: false }) + ) + } + } } export function ChangeLocale({ payload }) { - localStorageAdapter.setItem('locale', payload.locale) + if (payload.save) { + localStorageAdapter.setItem('locale', payload.locale) + } i18n.changeLanguage(payload.locale) } diff --git a/src/core/utils/local-storage.js b/src/core/utils/local-storage.js index b5120a79..a75b6a0c 100644 --- a/src/core/utils/local-storage.js +++ b/src/core/utils/local-storage.js @@ -1,11 +1,15 @@ /* global localStorage */ +const LOCAL_STORAGE_PREFIX = '/nano.community/' + export const localStorageAdapter = { getItem(key) { // return promise to match AsyncStorage usage on mobile return new Promise((resolve, reject) => { try { - const d = JSON.parse(localStorage.getItem(key)) + const d = JSON.parse( + localStorage.getItem(`${LOCAL_STORAGE_PREFIX}${key}`) + ) resolve(d) } catch (e) { reject(e) @@ -14,10 +18,10 @@ export const localStorageAdapter = { }, removeItem(key) { - localStorage.removeItem(key) + localStorage.removeItem(`${LOCAL_STORAGE_PREFIX}${key}`) }, setItem(key, value) { - localStorage.setItem(key, JSON.stringify(value)) + localStorage.setItem(`${LOCAL_STORAGE_PREFIX}${key}`, JSON.stringify(value)) } } diff --git a/src/views/components/change-locale/change-locale.js b/src/views/components/change-locale/change-locale.js index ee55b152..a0be7939 100644 --- a/src/views/components/change-locale/change-locale.js +++ b/src/views/components/change-locale/change-locale.js @@ -45,7 +45,9 @@ export default function ChangeLocale({ change_locale, locale }) { id='change-locale' value={locale} variant='outlined' - onChange={(event) => change_locale(event.target.value)} + onChange={(event) => + change_locale({ locale: event.target.value, save: true }) + } native={false} renderValue={(selected) => ( <> diff --git a/src/views/pages/doc/doc.js b/src/views/pages/doc/doc.js index 92ae5546..99ecdf70 100644 --- a/src/views/pages/doc/doc.js +++ b/src/views/pages/doc/doc.js @@ -91,7 +91,7 @@ export default function DocPage({ history.push(`/${locale}${path}`) } else { if (SUPPORTED_LOCALES.includes(locale)) { - change_locale(locale) + change_locale({ locale, save: false }) } else { locale = i18n.language }