upgrade lang change with auto save data
				
					
				
			This commit is contained in:
		| @@ -169,7 +169,7 @@ function App() { | |||||||
|                 ]} |                 ]} | ||||||
|                 options={{ |                 options={{ | ||||||
|                   syncWithLocation: true, |                   syncWithLocation: true, | ||||||
|                   warnWhenUnsavedChanges: true, |                   warnWhenUnsavedChanges: true, // Включаем глобально | ||||||
|                   useNewQueryKeys: true, |                   useNewQueryKeys: true, | ||||||
|                   projectId: 'Wv044J-t53S3s-PcbJGe', |                   projectId: 'Wv044J-t53S3s-PcbJGe', | ||||||
|                 }} |                 }} | ||||||
|   | |||||||
| @@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton' | |||||||
| import Stack from '@mui/material/Stack' | import Stack from '@mui/material/Stack' | ||||||
| import Toolbar from '@mui/material/Toolbar' | 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, useWarnAboutChange} from '@refinedev/core' | ||||||
| import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui' | import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui' | ||||||
| import React, {useContext, useEffect} from 'react' | import React, {useContext, useEffect} from 'react' | ||||||
| import {ColorModeContext} from '../../contexts/color-mode' | import {ColorModeContext} from '../../contexts/color-mode' | ||||||
| @@ -23,28 +23,75 @@ 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() |   const {i18n} = useTranslation() | ||||||
|  |   const {setWarnWhen, warnWhen} = useWarnAboutChange() | ||||||
|  |  | ||||||
|  |   const navigate = useNavigate() | ||||||
|  |  | ||||||
|  |   const handleLanguageChange = async (lang: string) => { | ||||||
|  |     // console.log('Language change requested:', lang) | ||||||
|  |     // console.log('Current warnWhen state:', warnWhen) | ||||||
|  |  | ||||||
|  |     const form = document.querySelector('form') | ||||||
|  |     const inputs = form?.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select') | ||||||
|  |     const saveButton = document.querySelector('.refine-save-button') as HTMLButtonElement | ||||||
|  |  | ||||||
|  |     // Сохраняем текущий URL перед любыми действиями | ||||||
|  |     const currentLocation = window.location.pathname + window.location.search | ||||||
|  |  | ||||||
|  |     if (form && saveButton) { | ||||||
|  |       const hasChanges = Array.from(inputs || []).some((input) => { | ||||||
|  |         if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) { | ||||||
|  |           return input.value !== input.defaultValue | ||||||
|  |         } | ||||||
|  |         if (input instanceof HTMLSelectElement) { | ||||||
|  |           return input.value !== input.options[input.selectedIndex].defaultSelected.toString() | ||||||
|  |         } | ||||||
|  |         return false | ||||||
|  |       }) | ||||||
|  |  | ||||||
|  |       if (hasChanges || warnWhen) { | ||||||
|  |         try { | ||||||
|  |           // console.log('Attempting to save changes...') | ||||||
|  |           setWarnWhen(false) | ||||||
|  |           saveButton.click() | ||||||
|  |           // console.log('Save button clicked') | ||||||
|  |  | ||||||
|  |           await new Promise((resolve) => setTimeout(resolve, 1000)) | ||||||
|  |  | ||||||
|  |           // После сохранения меняем язык и возвращаемся на ту же страницу | ||||||
|  |           Cookies.set('lang', lang) | ||||||
|  |           i18n.changeLanguage(lang) | ||||||
|  |           navigate(currentLocation) | ||||||
|  |           return | ||||||
|  |         } catch (error) { | ||||||
|  |           console.error('Failed to save form:', error) | ||||||
|  |           setWarnWhen(true) | ||||||
|  |           return | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |  | ||||||
|  |     // Если нет формы или изменений, просто меняем язык | ||||||
|  |     // console.log('Setting language cookie:', lang) | ||||||
|  |     Cookies.set('lang', lang) | ||||||
|  |  | ||||||
|  |     // console.log('Changing i18n language') | ||||||
|  |     i18n.changeLanguage(lang) | ||||||
|  |  | ||||||
|  |     // Используем текущий URL для навигации | ||||||
|  |     navigate(0) | ||||||
|  |   } | ||||||
|  |  | ||||||
|   // Установка языка по умолчанию из куки или ru |  | ||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     const savedLang = Cookies.get('lang') || 'ru' |     const savedLang = Cookies.get('lang') || 'ru' | ||||||
|     i18n.changeLanguage(savedLang) |     i18n.changeLanguage(savedLang) | ||||||
|   }, [i18n]) |   }, [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> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user