feat: detect browser locale preference

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
     }
   })
 }

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)
 }
 

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))
   }
 }

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) => (
           <>

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
       }