From ffbbeadb40f7ec07da1206619bb0749a1c71a47d Mon Sep 17 00:00:00 2001 From: SD Date: Fri, 12 Apr 2024 20:34:18 +0400 Subject: [PATCH] feat: fix filter scroll, add translate for auth modals --- src/components/Experts/AdditionalFilter.tsx | 37 ++++++++++++++----- src/components/Experts/Filter.tsx | 30 +++++++-------- src/components/Modals/AuthModal.tsx | 4 +- .../Modals/authModalContent/EnterContent.tsx | 7 ++-- .../Modals/authModalContent/FinishContent.tsx | 5 ++- .../authModalContent/RegisterContent.tsx | 9 +++-- .../Modals/authModalContent/ResetContent.tsx | 7 +++- src/i18nKeys/de.ts | 1 + src/i18nKeys/en.ts | 1 + src/i18nKeys/es.ts | 1 + src/i18nKeys/fr.ts | 1 + src/i18nKeys/it.ts | 1 + src/i18nKeys/ru.ts | 1 + 13 files changed, 68 insertions(+), 37 deletions(-) diff --git a/src/components/Experts/AdditionalFilter.tsx b/src/components/Experts/AdditionalFilter.tsx index 08d6cf9..5b692ce 100644 --- a/src/components/Experts/AdditionalFilter.tsx +++ b/src/components/Experts/AdditionalFilter.tsx @@ -5,7 +5,7 @@ import { useSearchParams } from 'next/navigation'; import debounce from 'lodash/debounce'; import { useRouter } from '../../navigation'; import { AdditionalFilter } from '../../types/experts'; -import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter'; +import { getObjectByFilter, getObjectByAdditionalFilter, getSearchParamsString } from '../../utils/filter'; import { CustomInput } from '../view/CustomInput'; import { CustomSelect } from '../view/CustomSelect'; import { i18nText } from '../../i18nKeys'; @@ -22,6 +22,7 @@ export const ExpertsAdditionalFilter = ({ const searchParams = useSearchParams(); const router = useRouter(); const [filter, setFilter] = useState(getObjectByAdditionalFilter(searchParams)); + const [isMounted, setIsMounted] = useState(false); const onChangeInput = useCallback(debounce((e: any) => { const newFilter: AdditionalFilter = { ...filter }; @@ -48,17 +49,35 @@ export const ExpertsAdditionalFilter = ({ }, [filter]); const updateRoute = debounce(() => { - router.push({ - pathname: basePath as any, - query: { - ...getObjectByFilter(searchParams), - ...filter - } - }) + const newFilter = { + ...getObjectByFilter(searchParams), + ...filter + }; + const search = getSearchParamsString(newFilter); + + console.log('here1'); + + router.push(search ? `${basePath}?${search}#filter` : `${basePath}#filter`); + + // router.push({ + // pathname: basePath as any, + // query: { + // ...getObjectByFilter(searchParams), + // ...filter + // } + // }) }, 300); useEffect(() => { - updateRoute(); + if (!isMounted) { + setIsMounted(true); + } + }, []); + + useEffect(() => { + if (isMounted) { + updateRoute(); + } }, [filter]); return ( diff --git a/src/components/Experts/Filter.tsx b/src/components/Experts/Filter.tsx index 8a623b7..00adfa5 100644 --- a/src/components/Experts/Filter.tsx +++ b/src/components/Experts/Filter.tsx @@ -7,7 +7,7 @@ import { useSearchParams } from 'next/navigation'; import { useRouter } from '../../navigation'; import { Filter } from '../../types/experts'; import { Languages, SearchData, Tag } from '../../types/tags'; -import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter'; +import { getObjectByFilter, getObjectByAdditionalFilter, getSearchParamsString } from '../../utils/filter'; import { CustomSwitch } from '../view/CustomSwitch'; import { CustomSlider } from '../view/CustomSlider'; import { CustomInput } from '../view/CustomInput'; @@ -109,21 +109,21 @@ export const ExpertsFilter = ({ }, [filter, searchParams, searchData]); const goToFilterPage = useCallback(() => { - // const newFilter: GeneralFilter = { - // ...filter, - // ...getObjectByAdditionalFilter(searchParams) - // }; - // const search = getSearchParamsString(newFilter); - // - // router.push(search ? `${pathname}?${search}` : pathname, { scroll: false }); + const newFilter = { + ...filter, + ...getObjectByAdditionalFilter(searchParams) + }; + const search = getSearchParamsString(newFilter); - router.push({ - pathname: basePath as any, - query: { - ...filter, - ...getObjectByAdditionalFilter(searchParams) - } - }) + router.push(search ? `${basePath}?${search}#filter` : `${basePath}#filter`); + + // router.push({ + // pathname: basePath as any, + // query: { + // ...filter, + // ...getObjectByAdditionalFilter(searchParams) + // } + // }) }, [filter, searchParams, searchData]); const getSelectedLanguage = useCallback((): string => { diff --git a/src/components/Modals/AuthModal.tsx b/src/components/Modals/AuthModal.tsx index 517de93..b2fb836 100644 --- a/src/components/Modals/AuthModal.tsx +++ b/src/components/Modals/AuthModal.tsx @@ -95,10 +95,10 @@ export const AuthModal: FC = ({ /> )} {mode === 'reset' && ( - + )} {mode === 'finish' && ( - + )}
I have read and agree with the terms of the diff --git a/src/components/Modals/authModalContent/EnterContent.tsx b/src/components/Modals/authModalContent/EnterContent.tsx index f414bfa..2d132bd 100644 --- a/src/components/Modals/authModalContent/EnterContent.tsx +++ b/src/components/Modals/authModalContent/EnterContent.tsx @@ -12,6 +12,7 @@ import { CustomInputPassword } from '../../view/CustomInputPassword'; import { FilledButton } from '../../view/FilledButton'; import { OutlinedButton } from '../../view/OutlinedButton'; import { LinkButton } from '../../view/LinkButton'; +import { i18nText } from '../../../i18nKeys'; type EnterProps = { form: FormInstance; @@ -133,7 +134,7 @@ export const EnterContent: FC = ({ > @@ -144,9 +145,9 @@ export const EnterContent: FC = ({ onClick={onLogin} loading={isLoading} > - Enter + {i18nText('enter', locale)} - updateMode('register')}>Register + updateMode('register')}>{i18nText('registration', locale)} updateMode('reset')} diff --git a/src/components/Modals/authModalContent/FinishContent.tsx b/src/components/Modals/authModalContent/FinishContent.tsx index a1fd342..9ed06bb 100644 --- a/src/components/Modals/authModalContent/FinishContent.tsx +++ b/src/components/Modals/authModalContent/FinishContent.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { FilledButton } from '../../view/FilledButton'; +import { i18nText } from '../../../i18nKeys'; -export const FinishContent = () => ( +export const FinishContent = ({ locale }: { locale: string }) => ( <>
A link to reset your password has been sent @@ -11,7 +12,7 @@ export const FinishContent = () => ( - Enter Account + {i18nText('enter', locale)} ); diff --git a/src/components/Modals/authModalContent/RegisterContent.tsx b/src/components/Modals/authModalContent/RegisterContent.tsx index dbd8ed0..4fb58a2 100644 --- a/src/components/Modals/authModalContent/RegisterContent.tsx +++ b/src/components/Modals/authModalContent/RegisterContent.tsx @@ -11,6 +11,7 @@ import { CustomInput } from '../../view/CustomInput'; import { CustomInputPassword } from '../../view/CustomInputPassword'; import { FilledButton } from '../../view/FilledButton'; import { OutlinedButton } from '../../view/OutlinedButton'; +import { i18nText } from '../../../i18nKeys'; type RegisterProps = { form: FormInstance; @@ -138,7 +139,7 @@ export const RegisterContent: FC = ({ > = ({ > @@ -172,9 +173,9 @@ export const RegisterContent: FC = ({ onClick={onRegister} loading={isLoading} > - Register + {i18nText('registration', locale)} - updateMode('enter')}>Enter + updateMode('enter')}>{i18nText('enter', locale)} or } diff --git a/src/components/Modals/authModalContent/ResetContent.tsx b/src/components/Modals/authModalContent/ResetContent.tsx index 1f55ddc..6f34207 100644 --- a/src/components/Modals/authModalContent/ResetContent.tsx +++ b/src/components/Modals/authModalContent/ResetContent.tsx @@ -3,15 +3,18 @@ import { Form, FormInstance } from 'antd'; import { CustomInput } from '../../view/CustomInput'; import { FilledButton } from '../../view/FilledButton'; import { LinkButton } from '../../view/LinkButton'; +import { i18nText } from '../../../i18nKeys'; type ResetProps = { form: FormInstance; updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void; + locale: string; } export const ResetContent: FC = ({ form, - updateMode + updateMode, + locale }) => { const onResetPassword = () => { console.log('reset'); @@ -51,7 +54,7 @@ export const ResetContent: FC = ({ type="link" onClick={() => updateMode('enter')} > - Enter + {i18nText('enter', locale)} ); diff --git a/src/i18nKeys/de.ts b/src/i18nKeys/de.ts index dc112d6..6d38422 100644 --- a/src/i18nKeys/de.ts +++ b/src/i18nKeys/de.ts @@ -32,6 +32,7 @@ export default { topic: 'Thema', name: 'Name', surname: 'Nachname', + password: 'Passwort', birthday: 'Geburtsdatum', oldPass: 'Altes Passwort', newPass: 'Neues Passwort', diff --git a/src/i18nKeys/en.ts b/src/i18nKeys/en.ts index f988207..cb90828 100644 --- a/src/i18nKeys/en.ts +++ b/src/i18nKeys/en.ts @@ -32,6 +32,7 @@ export default { topic: 'Topic', name: 'Name', surname: 'Surname', + password: 'Password', birthday: 'Date of Birth', oldPass: 'Old Password', newPass: 'New Password', diff --git a/src/i18nKeys/es.ts b/src/i18nKeys/es.ts index 61ba423..dac42c9 100644 --- a/src/i18nKeys/es.ts +++ b/src/i18nKeys/es.ts @@ -32,6 +32,7 @@ export default { topic: 'Tema', name: 'Nombre', surname: 'Apellido', + password: 'Contraseña', birthday: 'Fecha de nacimiento', oldPass: 'Contraseña antigua', newPass: 'Nueva contraseña', diff --git a/src/i18nKeys/fr.ts b/src/i18nKeys/fr.ts index dc776cb..e1afbf6 100644 --- a/src/i18nKeys/fr.ts +++ b/src/i18nKeys/fr.ts @@ -32,6 +32,7 @@ export default { topic: 'Sujet', name: 'Prénom', surname: 'Nom de famille', + password: 'Passe', birthday: 'Date de naissance', oldPass: 'Ancien mot de passe', newPass: 'Nouveau mot de passe', diff --git a/src/i18nKeys/it.ts b/src/i18nKeys/it.ts index 78241a2..9b7e3f1 100644 --- a/src/i18nKeys/it.ts +++ b/src/i18nKeys/it.ts @@ -32,6 +32,7 @@ export default { topic: 'Argomento', name: 'Nome', surname: 'Cognome', + password: 'Password', birthday: 'Data di nascita', oldPass: 'Vecchia password', newPass: 'Nuova password', diff --git a/src/i18nKeys/ru.ts b/src/i18nKeys/ru.ts index f56d72c..480915f 100644 --- a/src/i18nKeys/ru.ts +++ b/src/i18nKeys/ru.ts @@ -32,6 +32,7 @@ export default { topic: 'Тема', name: 'Имя', surname: 'Фамилия', + password: 'Пароль', birthday: 'Дата рождения', oldPass: 'Старый пароль', newPass: 'Новый пароль',