From 33a7c64f8412733eced85d7384878bbc6c4fd0b5 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Thu, 3 Apr 2025 20:26:13 +0300
Subject: [PATCH] upgrade `lang` change with auto `save` data
---
src/App.tsx | 2 +-
src/components/header/index.tsx | 71 +++++++++++++++++++++++++++------
2 files changed, 60 insertions(+), 13 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index be99859..82088ca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -169,7 +169,7 @@ function App() {
]}
options={{
syncWithLocation: true,
- warnWhenUnsavedChanges: true,
+ warnWhenUnsavedChanges: true, // Включаем глобально
useNewQueryKeys: true,
projectId: 'Wv044J-t53S3s-PcbJGe',
}}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 8ae5cf5..f6420b0 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton'
import Stack from '@mui/material/Stack'
import Toolbar from '@mui/material/Toolbar'
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 React, {useContext, useEffect} from 'react'
import {ColorModeContext} from '../../contexts/color-mode'
@@ -23,28 +23,75 @@ type IUser = {
}
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true}) => {
- const navigate = useNavigate()
const {mode, setMode} = useContext(ColorModeContext)
const {data: user} = useGetIdentity<IUser>()
const {data: permissions} = usePermissions<string[]>()
const isAdmin = permissions?.includes('admin')
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(() => {
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 (
<AppBar position={sticky ? 'sticky' : 'relative'}>
<Toolbar>