import { makeAutoObservable } from 'mobx' ; import { Store } from '..' ; import lang from '../../lang' ; import { LangMapKey } from '../../utils/constants' ; import { getLS , setLS } from '../../utils/storage' ; interface PartialSettingsWithLang { lang ? : LangMapKey ; } interface TranslationData { [ key ] : string ; } const defaultData = lang . en . translation ; class Translation { rootStore : Store = null as never ; mobx data : TranslationData = defaultData ; constructor constructor ( rootStore ) { const settings = ( getLS ( 'settings' ) || { } ) as PartialSettingsWithLang ; if ( ! settings . lang ) { const detectedLang = navigator . language . substr ( 0 , 2 ) ; if ( Object . keys ( lang ) . includes ( detectedLang ) ) { settings . lang = detectedLang as LangMapKey ; setLS ( 'settings' , settings ) ; } else { settings . lang = 'en' ; } } this . setTranslation ( settings . lang ) ; document . documentElement . setAttribute ( 'lang' , settings . lang ) ; this . rootStore = rootStore ; makeAutoObservable ( this , { rootStore : false } , { autoBind : true } ) ; } mobx /**
     * set language
     */ setTranslation ( targetLang ) { this . data = Object . assign ( { } , defaultData , lang [ targetLang ] . translation ) ; document . documentElement . setAttribute ( 'lang' , targetLang ) ; } } export default Translation ;