File size: 2,622 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
'use client'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { useAppContext } from '@/context/app-context'
import { SimpleSelect } from '@/app/components/base/select'
import type { Item } from '@/app/components/base/select'
import { updateUserProfile } from '@/service/common'
import { ToastContext } from '@/app/components/base/toast'
import I18n from '@/context/i18n'
import { timezones } from '@/utils/timezone'
import { languages } from '@/i18n/language'
const titleClassName = `
mb-2 text-sm font-medium text-gray-900
`
export default function LanguagePage() {
const { locale, setLocaleOnClient } = useContext(I18n)
const { userProfile, mutateUserProfile } = useAppContext()
const { notify } = useContext(ToastContext)
const [editing, setEditing] = useState(false)
const { t } = useTranslation()
const handleSelectLanguage = async (item: Item) => {
const url = '/account/interface-language'
const bodyKey = 'interface_language'
setEditing(true)
try {
await updateUserProfile({ url, body: { [bodyKey]: item.value } })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
setLocaleOnClient(item.value.toString())
}
catch (e) {
notify({ type: 'error', message: (e as Error).message })
}
finally {
setEditing(false)
}
}
const handleSelectTimezone = async (item: Item) => {
const url = '/account/timezone'
const bodyKey = 'timezone'
setEditing(true)
try {
await updateUserProfile({ url, body: { [bodyKey]: item.value } })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
mutateUserProfile()
}
catch (e) {
notify({ type: 'error', message: (e as Error).message })
}
finally {
setEditing(false)
}
}
return (
<>
<div className='mb-8'>
<div className={titleClassName}>{t('common.language.displayLanguage')}</div>
<SimpleSelect
defaultValue={locale || userProfile.interface_language}
items={languages.filter(item => item.supported)}
onSelect={item => handleSelectLanguage(item)}
disabled={editing}
/>
</div>
<div className='mb-8'>
<div className={titleClassName}>{t('common.language.timezone')}</div>
<SimpleSelect
defaultValue={userProfile.timezone}
items={timezones}
onSelect={item => handleSelectTimezone(item)}
disabled={editing}
/>
</div>
</>
)
}
|