add lang
key into data
provider
This commit is contained in:
parent
31886eaf0a
commit
754569b41d
@ -8,8 +8,12 @@ import Toolbar from '@mui/material/Toolbar'
|
|||||||
import Typography from '@mui/material/Typography'
|
import Typography from '@mui/material/Typography'
|
||||||
import {useGetIdentity, usePermissions} from '@refinedev/core'
|
import {useGetIdentity, usePermissions} from '@refinedev/core'
|
||||||
import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui'
|
import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui'
|
||||||
import React, {useContext} from 'react'
|
import React, {useContext, useEffect} from 'react'
|
||||||
import {ColorModeContext} from '../../contexts/color-mode'
|
import {ColorModeContext} from '../../contexts/color-mode'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
import {useTranslation} from 'react-i18next'
|
||||||
|
import {Button} from '@mui/material'
|
||||||
|
import {useNavigate} from 'react-router'
|
||||||
|
|
||||||
type IUser = {
|
type IUser = {
|
||||||
id: number
|
id: number
|
||||||
@ -19,17 +23,60 @@ type IUser = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true}) => {
|
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true}) => {
|
||||||
|
const navigate = useNavigate()
|
||||||
const {mode, setMode} = useContext(ColorModeContext)
|
const {mode, setMode} = useContext(ColorModeContext)
|
||||||
const {data: user} = useGetIdentity<IUser>()
|
const {data: user} = useGetIdentity<IUser>()
|
||||||
const {data: permissions} = usePermissions<string[]>()
|
const {data: permissions} = usePermissions<string[]>()
|
||||||
const isAdmin = permissions?.includes('admin')
|
const isAdmin = permissions?.includes('admin')
|
||||||
|
const {i18n} = useTranslation()
|
||||||
|
|
||||||
|
// Установка языка по умолчанию из куки или ru
|
||||||
|
useEffect(() => {
|
||||||
|
const savedLang = Cookies.get('lang') || 'ru'
|
||||||
|
i18n.changeLanguage(savedLang)
|
||||||
|
}, [i18n])
|
||||||
|
|
||||||
|
const handleLanguageChange = (lang: string) => {
|
||||||
|
Cookies.set('lang', lang)
|
||||||
|
i18n.changeLanguage(lang)
|
||||||
|
|
||||||
|
navigate(0)
|
||||||
|
// Альтернативный вариант - переход на тот же URL
|
||||||
|
// navigate(location.pathname + location.search, { replace: true })
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppBar position={sticky ? 'sticky' : 'relative'}>
|
<AppBar position={sticky ? 'sticky' : 'relative'}>
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center">
|
<Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center">
|
||||||
<HamburgerMenu />
|
<HamburgerMenu />
|
||||||
<Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center">
|
<Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center" spacing={2}>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
spacing={1}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
padding: '4px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{['ru', 'en', 'zh'].map((lang) => (
|
||||||
|
<Button
|
||||||
|
key={lang}
|
||||||
|
onClick={() => handleLanguageChange(lang)}
|
||||||
|
variant={i18n.language === lang ? 'contained' : 'outlined'}
|
||||||
|
size="small"
|
||||||
|
sx={{
|
||||||
|
minWidth: '30px',
|
||||||
|
padding: '2px 0px',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{lang}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
|
||||||
<IconButton
|
<IconButton
|
||||||
color="inherit"
|
color="inherit"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -65,7 +112,7 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true
|
|||||||
sm: 'inline-block',
|
sm: 'inline-block',
|
||||||
},
|
},
|
||||||
backgroundColor: 'primary.main',
|
backgroundColor: 'primary.main',
|
||||||
color: 'text.secondary',
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
padding: '1px 4px',
|
padding: '1px 4px',
|
||||||
borderRadius: 1,
|
borderRadius: 1,
|
||||||
fontSize: '0.6rem',
|
fontSize: '0.6rem',
|
||||||
|
@ -2,16 +2,23 @@ import dataProvider from '@refinedev/simple-rest'
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import {BACKEND_URL} from '../lib/constants'
|
import {BACKEND_URL} from '../lib/constants'
|
||||||
import {TOKEN_KEY} from '../authProvider'
|
import {TOKEN_KEY} from '../authProvider'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
const axiosInstance = axios.create()
|
const axiosInstance = axios.create()
|
||||||
|
|
||||||
axiosInstance.interceptors.request.use((config) => {
|
axiosInstance.interceptors.request.use((config) => {
|
||||||
|
// Добавляем токен авторизации
|
||||||
const token = localStorage.getItem(TOKEN_KEY)
|
const token = localStorage.getItem(TOKEN_KEY)
|
||||||
|
|
||||||
if (token) {
|
if (token) {
|
||||||
config.headers.Authorization = `Bearer ${token}`
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Добавляем язык в кастомный заголовок
|
||||||
|
const lang = Cookies.get('lang') || 'ru'
|
||||||
|
config.headers['X-Language'] = lang // или 'Accept-Language'
|
||||||
|
|
||||||
|
// console.log('Request headers:', config.headers)
|
||||||
|
|
||||||
return config
|
return config
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user