feat: fix filter scroll, add translate for auth modals

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<AdditionalFilter | undefined>(getObjectByAdditionalFilter(searchParams));
+    const [isMounted, setIsMounted] = useState<boolean>(false);
 
     const onChangeInput = useCallback(debounce((e: any) => {
         const newFilter: AdditionalFilter = { ...filter };
@@ -48,17 +49,35 @@ export const ExpertsAdditionalFilter = ({
     }, [filter]);
 
     const updateRoute = debounce(() => {
-        router.push({
+        const newFilter = {
-            pathname: basePath as any,
-            query: {
             ...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(() => {
+        if (!isMounted) {
+            setIsMounted(true);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (isMounted) {
             updateRoute();
+        }
     }, [filter]);
 
     return (

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 = {
+        const newFilter = {
-        //     ...filter,
-        //     ...getObjectByAdditionalFilter(searchParams)
-        // };
-        // const search = getSearchParamsString(newFilter);
-        //
-        // router.push(search ? `${pathname}?${search}` : pathname, { scroll: false });
-
-        router.push({
-            pathname: basePath as any,
-            query: {
             ...filter,
             ...getObjectByAdditionalFilter(searchParams)
-            }
+        };
-        })
+        const search = getSearchParamsString(newFilter);
+
+        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 => {

src/components/Modals/AuthModal.tsx

@@ -95,10 +95,10 @@ export const AuthModal: FC<AuthModalProps> = ({
                     />
                 )}
                 {mode === 'reset' && (
-                    <ResetContent form={form} updateMode={updateMode} />
+                    <ResetContent form={form} updateMode={updateMode} locale={paths[1]} />
                 )}
                 {mode === 'finish' && (
-                    <FinishContent />
+                    <FinishContent locale={paths[1]} />
                 )}
                 <div className="b-modal__auth__agreement">
                     I have read and agree with the terms of the

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<EnterProps> = ({
                 >
                     <CustomInputPassword
                         size="small"
-                        placeholder="Password"
+                        placeholder={i18nText('password', locale)}
                         autoComplete="off"
                         onPressEnter={onLogin}
                     />
@@ -144,9 +145,9 @@ export const EnterContent: FC<EnterProps> = ({
                 onClick={onLogin}
                 loading={isLoading}
             >
-                Enter
+                {i18nText('enter', locale)}
             </FilledButton>
-            <OutlinedButton onClick={() => updateMode('register')}>Register</OutlinedButton>
+            <OutlinedButton onClick={() => updateMode('register')}>{i18nText('registration', locale)}</OutlinedButton>
             <LinkButton
                 type="link"
                 onClick={() => updateMode('reset')}

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 }) => (
     <>
         <div className="b-modal__auth__agreement">
             A link to reset your password has been sent
@@ -11,7 +12,7 @@ export const FinishContent = () => (
         <FilledButton
             type="primary"
         >
-            Enter Account
+            {i18nText('enter', locale)}
         </FilledButton>
     </>
 );

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<RegisterProps> = ({
                 >
                     <CustomInputPassword
                         size="small"
-                        placeholder="Password"
+                        placeholder={i18nText('password', locale)}
                     />
                 </Form.Item>
                 <Form.Item
@@ -163,7 +164,7 @@ export const RegisterContent: FC<RegisterProps> = ({
                 >
                     <CustomInputPassword
                         size="small"
-                        placeholder="Confirm password"
+                        placeholder={i18nText('confirmPass', locale)}
                     />
                 </Form.Item>
             </Form>
@@ -172,9 +173,9 @@ export const RegisterContent: FC<RegisterProps> = ({
                 onClick={onRegister}
                 loading={isLoading}
             >
-                Register
+                {i18nText('registration', locale)}
             </FilledButton>
-            <OutlinedButton onClick={() => updateMode('enter')}>Enter</OutlinedButton>
+            <OutlinedButton onClick={() => updateMode('enter')}>{i18nText('enter', locale)}</OutlinedButton>
             <span>or</span>
             <OutlinedButton
                 icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}

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<ResetProps> = ({
     form,
-    updateMode
+    updateMode,
+    locale
 }) => {
     const onResetPassword = () => {
         console.log('reset');
@@ -51,7 +54,7 @@ export const ResetContent: FC<ResetProps> = ({
                 type="link"
                 onClick={() => updateMode('enter')}
             >
-                Enter
+                {i18nText('enter', locale)}
             </LinkButton>
         </>
     );

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',

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',

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',

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',

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',

src/i18nKeys/ru.ts

@@ -32,6 +32,7 @@ export default {
     topic: 'Тема',
     name: 'Имя',
     surname: 'Фамилия',
+    password: 'Пароль',
     birthday: 'Дата рождения',
     oldPass: 'Старый пароль',
     newPass: 'Новый пароль',