feat: fix filter scroll, add translate for auth modals

2024-04-12 20:34:18 +04:00 · 2024-04-12 20:34:18 +04:00 · ffbbeadb40
parent b6d11a5b30
commit ffbbeadb40
13 changed files with 68 additions and 37 deletions
--- 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<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({
-            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 (
--- 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 => {
--- a/src/components/Modals/AuthModal.tsx
+++ b/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
--- 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<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')}
--- 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 }) => (
    <>
        <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>
    </>
 );
--- 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<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="" />}
--- 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<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>
        </>
    );
--- 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',
--- 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',
--- 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',
--- 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',
--- 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',
--- a/src/i18nKeys/ru.ts
+++ b/src/i18nKeys/ru.ts
@ -32,6 +32,7 @@ export default {
    topic: 'Тема',
    name: 'Имя',
    surname: 'Фамилия',
+    password: 'Пароль',
    birthday: 'Дата рождения',
    oldPass: 'Старый пароль',
    newPass: 'Новый пароль',