feat: add full expert's search, add account sessions

messages/en.json

@@ -96,7 +96,8 @@
             "find": "Find",
             "search": "Search for an Expert",
             "sort": "Sort",
-            "language": "Language"
+            "language": "Language",
+            "direction": "Direction"
         },
         "list": {
             "price": "0€",

package-lock.json

@@ -11,7 +11,9 @@
         "@ant-design/cssinjs": "^1.18.1",
         "@ant-design/icons": "^5.2.6",
         "antd": "^5.12.1",
+        "antd-img-crop": "^4.21.0",
         "axios": "^1.6.5",
+        "dayjs": "^1.11.10",
         "lodash": "^4.17.21",
         "next": "14.0.3",
         "next-intl": "^3.3.1",
@@ -961,6 +963,21 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd-img-crop": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/antd-img-crop/-/antd-img-crop-4.21.0.tgz",
+      "integrity": "sha512-YA5GUMfwoDoSJNWinGOmtYFDFLf+t7Rhfg7ZusbHgFpKCq8n9W0005LeCWgSP4C0iK3vxNHAT3DaRa3rTgKFlQ==",
+      "dependencies": {
+        "compare-versions": "6.1.0",
+        "react-easy-crop": "^5.0.4",
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "antd": ">=4.0.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -1450,6 +1467,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/compare-versions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz",
+      "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg=="
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
@@ -3454,6 +3476,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4391,6 +4418,24 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-easy-crop": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.5.tgz",
+      "integrity": "sha512-GH7Jw3898ytSaN4i4Oxi7j3BKzapZ2pVgnKIl+gFIUjA+NsDgdBSIpiBQUrPFIvHzSnPmz0kGCpX95X6NgsDzA==",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "2.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
+    "node_modules/react-easy-crop/node_modules/tslib": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5965,6 +6010,16 @@
         "throttle-debounce": "^5.0.0"
       }
     },
+    "antd-img-crop": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/antd-img-crop/-/antd-img-crop-4.21.0.tgz",
+      "integrity": "sha512-YA5GUMfwoDoSJNWinGOmtYFDFLf+t7Rhfg7ZusbHgFpKCq8n9W0005LeCWgSP4C0iK3vxNHAT3DaRa3rTgKFlQ==",
+      "requires": {
+        "compare-versions": "6.1.0",
+        "react-easy-crop": "^5.0.4",
+        "tslib": "^2.6.2"
+      }
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -6307,6 +6362,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "compare-versions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz",
+      "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg=="
+    },
     "compute-scroll-into-view": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
@@ -7794,6 +7854,11 @@
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -8432,6 +8497,22 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-easy-crop": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.5.tgz",
+      "integrity": "sha512-GH7Jw3898ytSaN4i4Oxi7j3BKzapZ2pVgnKIl+gFIUjA+NsDgdBSIpiBQUrPFIvHzSnPmz0kGCpX95X6NgsDzA==",
+      "requires": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -12,7 +12,9 @@
     "@ant-design/cssinjs": "^1.18.1",
     "@ant-design/icons": "^5.2.6",
     "antd": "^5.12.1",
+    "antd-img-crop": "^4.21.0",
     "axios": "^1.6.5",
+    "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
     "next": "14.0.3",
     "next-intl": "^3.3.1",

src/actions/experts.ts

@@ -1,9 +1,9 @@
 import { apiClient } from '../lib/apiClient';
-import { Filter, ExpertsData, ExpertDetails } from '../types/experts';
+import { GeneralFilter, ExpertsData, ExpertDetails } from '../types/experts';
 
-export const getExpertsList = async (filter: Filter, locale: string) => {
+export const getExpertsList = async (filter: GeneralFilter, locale: string) => {
     const response = await apiClient.post(
-        '/home/coachsearch',
+        '/home/coachsearch1',
     { ...filter },
         {
             headers: {
@@ -13,7 +13,7 @@ export const getExpertsList = async (filter: Filter, locale: string) => {
         }
     );
 
-    return response.data?.coaches as ExpertsData || null;
+    return response.data as ExpertsData || null;
 };
 
 export const getExpertById = async (id: string, locale: string) => {

src/actions/hooks/useProfileSettings.ts

@@ -0,0 +1,40 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react';
+import { Profile } from '../../types/profile';
+import { getPersonalData } from '../profile';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY } from '../../constants/common';
+
+export const useProfileSettings = (locale: string) => {
+    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
+    const [profileSettings, setProfileSettings] = useState<Profile | undefined>();
+    const [fetchLoading, setFetchLoading] = useState<boolean>(false);
+    const [saveLoading, setSaveLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (jwt) {
+            getPersonalData(locale, jwt)
+                .then(({ data }) => {
+                    setProfileSettings(data);
+                })
+                .catch((err) => {
+
+                })
+                .finally(() => {
+                    setFetchLoading(false);
+                });
+        }
+    }, []);
+
+    const save = useCallback(() => {
+
+    }, []);
+
+    return {
+        fetchLoading,
+        save,
+        saveLoading,
+        profileSettings
+    };
+};

src/actions/profile.ts

@@ -1,7 +1,9 @@
 import { AxiosResponse } from 'axios';
 import { apiClient } from '../lib/apiClient';
+import { Profile } from '../types/profile';
+import { Session, SessionsFilter } from '../types/sessions';
 
-export const setPersonData = (person: { login: string, password: string, role: string }, locale: string, jwt: string): Promise<AxiosResponse> => (
+export const setPersonData = (person: { login: string, password: string, role: string, languagesLinks: any[] }, locale: string, jwt: string): Promise<AxiosResponse<{ userData: Profile }>> => (
     apiClient.post(
         '/home/applyperson1',
         { ...person },
@@ -13,3 +15,61 @@ export const setPersonData = (person: { login: string, password: string, role: s
         }
     )
 );
+
+export const getPersonalData = (locale: string, jwt: string): Promise<AxiosResponse<Profile>> => (
+    apiClient.post(
+        '/home/userdata',
+        {},
+        {
+            headers: {
+                'X-User-Language': locale,
+                Authorization: `Bearer ${jwt}`
+            }
+        }
+    )
+);
+
+export const getUpcomingSessions = (locale: string, jwt: string, filter?: SessionsFilter): Promise<AxiosResponse<Session[]>> => (
+    apiClient.post(
+        '/home/upcomingsessionsall',
+        {
+            sessionType: 'session',
+            ...(filter || {})
+        },
+        {
+            headers: {
+                'X-User-Language': locale,
+                Authorization: `Bearer ${jwt}`
+            }
+        }
+    )
+);
+
+export const getRequestedSessions = (locale: string, jwt: string): Promise<AxiosResponse<{ requestedSessions: Session[] }>> => (
+    apiClient.post(
+        '/home/coachhomedata',
+        {},
+        {
+            headers: {
+                'X-User-Language': locale,
+                Authorization: `Bearer ${jwt}`
+            }
+        }
+    )
+);
+
+export const getRecentSessions = (locale: string, jwt: string, filter?: SessionsFilter): Promise<AxiosResponse<Session[]>> => (
+    apiClient.post(
+        '/home/historicalmeetings ',
+        {
+            sessionType: 'session',
+            ...(filter || {})
+        },
+        {
+            headers: {
+                'X-User-Language': locale,
+                Authorization: `Bearer ${jwt}`
+            }
+        }
+    )
+);

src/actions/tags.ts

@@ -1,5 +1,5 @@
 import { apiClient } from '../lib/apiClient';
-import { SearchData } from '../types/tags';
+import { SearchData, Languages } from '../types/tags';
 
 export const getTagList = async (locale: string) => {
     const response = await apiClient.post(
@@ -15,3 +15,17 @@ export const getTagList = async (locale: string) => {
 
     return response.data as SearchData || null;
 };
+
+export const getLanguages = async (locale: string) => {
+    const response = await apiClient.get(
+        '/home/languages',
+        {
+            headers: {
+                'X-User-Language': locale,
+                Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6IkpXVCJ9.eyJuYW1laWQiOiIxNzIiLCJuYmYiOjE3MDM2ODMyMDgsImV4cCI6MTczNTIxOTIwOCwiaWF0IjoxNzAzNjgzMjA4fQ.KgnYfKO7oVFLlDuKhfyNN6RAaXKdeSzJd7F4r6_15AA'
+            }
+        }
+    );
+
+    return response.data as Languages || null;
+};

src/app/[locale]/account/(account)/layout.tsx

@@ -1,30 +1,14 @@
+'use client'
+
 import React, { ReactNode } from 'react';
-import { Metadata } from 'next';
-import { useTranslations } from 'next-intl';
 import { AccountMenu } from '../../../../components/Account';
+import { i18nText } from '../../../../i18nKeys';
 
 type AccountInnerLayoutProps = {
     children: ReactNode;
-    params: Record<string, string>;
+    params: { locale: string };
 };
 
-export const metadata: Metadata = {
-    title: 'Bbuddy User Account'
-};
-
-export function generateStaticParams({
-    params: { locale },
-}: { params: { locale: string } }) {
-    const result: { locale: string, userId: string }[] = [];
-    const users = [{ userId: '1' }, { userId: '2' }];
-
-    users.forEach(({ userId }) => {
-        result.push({ locale, userId });
-    });
-
-    return result;
-}
-
 const ROUTES = ['sessions', 'notifications', 'support', 'information', 'settings', 'messages', 'work-with-us'];
 const COUNTS: Record<string, number> = {
     sessions: 12,
@@ -33,12 +17,10 @@ const COUNTS: Record<string, number> = {
 };
 
 
-export default function AccountInnerLayout({ children }: AccountInnerLayoutProps) {
+export default function AccountInnerLayout({ children, params: { locale } }: AccountInnerLayoutProps) {
-    const t = useTranslations('Account');
-
     const getMenuConfig = () => ROUTES.map((path) => ({
         path,
-        title: t(`menu.${path}`),
+        title: i18nText(`accountMenu.${path}`, locale),
         count: COUNTS[path] || undefined
     }));
 

src/app/[locale]/account/(account)/sessions/page.tsx

@@ -8,12 +8,13 @@ export const metadata: Metadata = {
     description: 'Bbuddy desc sessions'
 };
 
-export default function Sessions() {
+export default function Sessions({ params: { locale } }: { params: { locale: string } }) {
     const t = useTranslations('Account.Sessions');
 
     return (
         <Suspense fallback={<p>Loading...</p>}>
             <SessionsTabs
+                locale={locale}
                 intlConfig={{
                     upcoming: t('upcoming-sessions'),
                     requested: t('sessions-requested'),

src/app/[locale]/account/(account)/settings/page.tsx

@@ -1,15 +1,14 @@
 import React, { Suspense } from 'react';
 import type { Metadata } from 'next';
 import { useTranslations } from 'next-intl';
-import { Link } from '../../../../../navigation';
+import { ProfileSettings } from '../../../../../components/Account';
-import { CustomInput } from '../../../../../components/view';
 
 export const metadata: Metadata = {
     title: 'Bbuddy - Account - Profile Settings',
     description: 'Bbuddy desc Profile settings'
 };
 
-export default function Settings({ params }: { params: { userId: string } }) {
+export default function Settings({ params: { locale } }: { params: { locale: string } }) {
     const t = useTranslations('Account.Settings');
 
     return (
@@ -17,33 +16,18 @@ export default function Settings({ params }: { params: { userId: string } }) {
             <ol className="breadcrumb">
                 <li className="breadcrumb-item active" aria-current="page">{t('title')}</li>
             </ol>
-            <form className="form-settings" action="">
+            <Suspense>
-                <div className="user-avatar">
+                <ProfileSettings
-                    <div className="user-avatar__edit">
+                    locale={locale}
-                        <input className="" type="file" id="input-file" />
+                    photoDesc={t('photo-desc')}
-                        <label htmlFor="input-file" className="form-label" />
+                    placeholderName={t('name')}
-                    </div>
+                    placeholderSurname={t('surname')}
-                    <div className="user-avatar__text">{t('photo-desc')}</div>
+                    placeholderBirthday={t('birthday')}
-                </div>
+                    placeholderEmail={t('email')}
-                <div className="form-field">
+                    changePasswordLink={t('change-password')}
-                    <CustomInput placeholder={t('name')} />
+                    saveButton={t('save')}
-                </div>
+                />
-                <div className="form-field">
+            </Suspense>
-                    <CustomInput placeholder={t('surname')} />
-                </div>
-                <div className="form-field date">
-                    <CustomInput placeholder={t('birthday')} />
-                </div>
-                <div className="form-field">
-                    <CustomInput type="email" placeholder={t('email')} />
-                </div>
-                <div className="form-link">
-                    <Link href={'change-password' as any}>
-                        {t('change-password')}
-                    </Link>
-                </div>
-                <button className="btn-apply">{t('save')}</button>
-            </form>
         </>
     );
 };

src/app/[locale]/experts/[expertId]/page.tsx

@@ -30,7 +30,7 @@ export async function generateStaticParams({
         "durationTo": null
     }, locale);
 
-    experts?.forEach(({ id }) => {
+    experts?.coaches?.forEach(({ id }) => {
         result.push({ locale, expertId: id.toString() });
     });
 

src/app/fonts.ts

@@ -0,0 +1,15 @@
+import { Comfortaa, Inter } from 'next/font/google';
+
+export const comfortaa = Comfortaa({
+    weight: ['300', '400', '500', '600', '700'],
+    subsets: ['latin', 'cyrillic'],
+    variable: '--font-comfortaa',
+    display: 'swap',
+});
+
+export const inter = Inter({
+    weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    subsets: ['latin', 'cyrillic'],
+    variable: '--font-inter',
+    display: 'swap',
+});

src/app/global-error.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import React from 'react';
+import Link from 'next/link';
+import { Button, ConfigProvider } from 'antd';
+import { comfortaa, inter } from './fonts';
+import StyledRegistry from '../lib/StyleRegistry';
+import StyledComponentsRegistry from '../lib/AntdRegistry';
+import theme from '../constants/theme';
+
+export default function GlobalError({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    return (
+        <html className={`${comfortaa.variable} ${inter.variable}`}>
+            <body>
+                <StyledRegistry>
+                    <StyledComponentsRegistry>
+                        <ConfigProvider theme={theme}>
+                            <div className="b-wrapper">
+                                <div className="b-content">
+                                    <header className="b-header">
+                                        <div className="b-inner">
+                                            <Link href={'/' as any} className="b-header__logo">
+                                                <img
+                                                    src="/images/logo-header.svg"
+                                                    className="img-default"
+                                                    alt=""
+                                                />
+                                            </Link>
+                                        </div>
+                                    </header>
+                                    <div className="page-error">
+                                        <div className="b-inner">
+                                            <div className="error__image">
+                                                <img src="/images/server-error.png" alt="" />
+                                            </div>
+                                            <div className="error__description">
+                                                <div className="error__subtitle">Something wrong</div>
+                                                <Button className="btn-apply error__button" onClick={() => reset()}>
+                                                    Refresh page
+                                                </Button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <footer className="b-footer">
+                                    <div className="b-inner">
+                                        <div className="row">
+                                            <div className="col" />
+                                        </div>
+                                    </div>
+                                </footer>
+                            </div>
+                        </ConfigProvider>
+                    </StyledComponentsRegistry>
+                </StyledRegistry>
+            </body>
+        </html>
+    );
+}

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Comfortaa, Inter } from 'next/font/google';
+import { comfortaa, inter } from './fonts';
 import '../styles/style.scss';
 
 type RootLayoutProps = {
@@ -7,20 +7,6 @@ type RootLayoutProps = {
     params: { locale: string };
 };
 
-const comfortaa = Comfortaa({
-    weight: ['300', '400', '500', '600', '700'],
-    subsets: ['latin', 'cyrillic'],
-    variable: '--font-comfortaa',
-    display: 'swap',
-});
-
-const inter = Inter({
-    weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-    subsets: ['latin', 'cyrillic'],
-    variable: '--font-inter',
-    display: 'swap',
-});
-
 export default function RootLayout({ children, params: { locale } }: RootLayoutProps) {
     return (
         <html lang={locale} className={`${comfortaa.variable} ${inter.variable}`}>

src/app/not-found.tsx

@@ -1,9 +1,57 @@
 import React from 'react';
+import { ConfigProvider } from 'antd';
+import Link from 'next/link';
+import { comfortaa, inter } from './fonts';
+import StyledComponentsRegistry from '../lib/AntdRegistry';
+import StyledRegistry from '../lib/StyleRegistry';
+import theme from '../constants/theme';
+import { BackButton } from '../components/view';
 
 export default function NotFound() {
     return (
-        <div>
+        <html className={`${comfortaa.variable} ${inter.variable}`}>
-            not found
+            <body>
+                <StyledRegistry>
+                    <StyledComponentsRegistry>
+                        <ConfigProvider theme={theme}>
+                            <div className="b-wrapper">
+                                <div className="b-content">
+                                    <header className="b-header">
+                                        <div className="b-inner">
+                                            <Link href={'/' as any} className="b-header__logo">
+                                                <img
+                                                    src="/images/logo-header.svg"
+                                                    className="img-default"
+                                                    alt=""
+                                                />
+                                            </Link>
                                         </div>
+                                    </header>
+                                    <div className="page-error">
+                                        <div className="b-inner">
+                                            <div className="error__image">
+                                                <img src="/images/not-found.png" alt="" />
+                                            </div>
+                                            <div className="error__description">
+                                                <div className="error__code">404</div>
+                                                <div className="error__subtitle">We can't seem to find a page you're looking for</div>
+                                                <BackButton className="btn-apply error__button" text="Go back" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <footer className="b-footer">
+                                    <div className="b-inner">
+                                        <div className="row">
+                                            <div className="col" />
+                                        </div>
+                                    </div>
+                                </footer>
+                            </div>
+                        </ConfigProvider>
+                    </StyledComponentsRegistry>
+                </StyledRegistry>
+            </body>
+        </html>
     );
 }

src/components/Account/AccountMenu.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { Button } from 'antd';
 import { useSelectedLayoutSegment, usePathname } from 'next/navigation';
 import { Link } from '../../navigation';
-import { AUTH_TOKEN_KEY } from '../../constants/common';
+import { AUTH_TOKEN_KEY, AUTH_USER } from '../../constants/common';
 import { deleteStorageKey } from '../../hooks/useLocalStorage';
 
 const Logout = styled(Button)`
@@ -26,9 +26,14 @@ export const AccountMenu = ({ menu }: { menu: { path: string, title: string, cou
 
     const onLogout = () => {
         deleteStorageKey(AUTH_TOKEN_KEY);
+        deleteStorageKey(AUTH_USER);
         window?.location?.replace(`/${paths.split('/')[1]}/`);
     };
 
+    const onDeleteAccount = () => {
+        console.log('delete');
+    };
+
     return (
         <ul className="list-sidebar">
             {menu.map(({ path, title, count }) => (
@@ -49,6 +54,14 @@ export const AccountMenu = ({ menu }: { menu: { path: string, title: string, cou
                     Log Out
                 </Logout>
             </li>
+            <li className="list-sidebar__item">
+                <Logout
+                    type="link"
+                    onClick={onDeleteAccount}
+                >
+                    Delete account
+                </Logout>
+            </li>
         </ul>
-    )
+    );
 };

src/components/Account/ProfileSettings.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import React, { FC, useEffect, useState } from 'react';
+import { Form, Upload, Button } from 'antd';
+import type { UploadFile, UploadProps, GetProp } from 'antd';
+import ImgCrop from 'antd-img-crop';
+import { CameraOutlined } from '@ant-design/icons';
+import { Link } from '../../navigation';
+import { CustomInput } from '../view';
+import { Profile } from '../../types/profile';
+import { useProfileSettings } from '../../actions/hooks/useProfileSettings';
+
+type ProfileSettingsProps = {
+    locale: string;
+    photoDesc?: string;
+    placeholderName?: string;
+    placeholderSurname?: string;
+    placeholderBirthday?: string;
+    placeholderEmail?: string;
+    changePasswordLink?: string;
+    saveButton?: string;
+};
+
+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+export const ProfileSettings: FC<ProfileSettingsProps> = ({
+    locale,
+    photoDesc,
+    placeholderName,
+    placeholderSurname,
+    placeholderBirthday,
+    placeholderEmail,
+    changePasswordLink,
+    saveButton
+}) => {
+    const [form] = Form.useForm<Profile>();
+    const { profileSettings } = useProfileSettings(locale);
+
+    useEffect(() => {
+        if (profileSettings) {
+            form.setFieldsValue(profileSettings);
+        }
+    }, [profileSettings]);
+
+    const [fileList, setFileList] = useState<UploadFile[]>();
+
+    const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
+        setFileList(newFileList);
+    };
+
+    const onPreview = async (file: UploadFile) => {
+        let src = file.url as string;
+        if (!src) {
+            src = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file.originFileObj as FileType);
+                reader.onload = () => resolve(reader.result as string);
+            });
+        }
+        const image = new Image();
+        image.src = src;
+        const imgWindow = window.open(src);
+        imgWindow?.document.write(image.outerHTML);
+    };
+
+    return (
+        <Form form={form} className="form-settings">
+            <div className="user-avatar">
+                <div className="user-avatar__edit">
+                    <input className="" type="file" id="input-file" />
+                    <label htmlFor="input-file" className="form-label" />
+                </div>
+                <div className="user-avatar__text">{photoDesc}</div>
+            </div>
+            <ImgCrop rotationSlider>
+                <Upload
+                    action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
+                    fileList={fileList}
+                    onChange={onChange}
+                    onPreview={onPreview}
+                >
+                    <Button icon={<CameraOutlined />}>Click to Upload</Button>
+                </Upload>
+            </ImgCrop>
+            <div className="form-field">
+                <Form.Item name="username">
+                    <CustomInput placeholder={placeholderName} />
+                </Form.Item>
+            </div>
+            <div className="form-field">
+                <Form.Item name="surname">
+                    <CustomInput placeholder={placeholderSurname} />
+                </Form.Item>
+            </div>
+            {/* <div className="form-field">
+                <Form.Item name="birthday">
+                    <CustomInput placeholder={placeholderBirthday} />
+                </Form.Item>
+            </div> */}
+            <div className="form-field">
+                <Form.Item name="login">
+                    <CustomInput type="email" placeholder={placeholderEmail} />
+                </Form.Item>
+            </div>
+            <div className="form-link">
+                <Link href={'change-password' as any}>
+                    {changePasswordLink}
+                </Link>
+            </div>
+            <button className="btn-apply">{saveButton}</button>
+        </Form>
+    );
+};

src/components/Account/SessionsTabs.tsx

@@ -1,20 +1,66 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { CustomSelect } from '../view';
+import * as dayjs from 'dayjs';
+import * as isToday from 'dayjs/plugin/isToday';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
+import 'dayjs/locale/de';
+import 'dayjs/locale/it';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/es';
+import { CustomSelect, Loader } from '../view';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY, AUTH_USER } from '../../constants/common';
+import { getRecentSessions, getRequestedSessions, getUpcomingSessions } from '../../actions/profile';
+import { Session, Sessions, SessionType } from '../../types/sessions';
+
+dayjs.extend(isToday);
 
 const Tab = styled.div``;
 
-export const SessionsTabs = ({ intlConfig }: { intlConfig: Record<string, string> }) => {
+export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string, string>, locale: string }) => {
     const [activeTab, setActiveTab] = useState<number>(0);
     const [sort, setSort] = useState<string>();
+    const [sessions, setSessions] = useState<Sessions>();
+    const [loading, setLoading] = useState<boolean>(true);
+    const [errorData, setErrorData] = useState<any>();
+    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
+    const [userId] = useLocalStorage(AUTH_USER, '');
+
+    const fetchData = () => {
+        setErrorData(undefined);
+        setLoading(true);
+        Promise.all([
+            getUpcomingSessions(locale, jwt),
+            getRequestedSessions(locale, jwt),
+            getRecentSessions(locale, jwt)
+        ])
+            .then(([upcoming, requested, recent]) => {
+                setSessions({
+                    [SessionType.UPCOMING]: upcoming.data || [],
+                    [SessionType.REQUESTED]: requested.data?.requestedSessions || [],
+                    [SessionType.RECENT]: recent.data || []
+                });
+            })
+            .catch((err) => {
+                setErrorData(err);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
 
     const onChangeSort = useCallback((value: string) => {
         setSort(value);
     }, [sort]);
 
-    const getChildren = () => (
+    const getChildren = (list?: Session[]) => (
         <>
             <div className="filter-session">
                 <div className="filter-session__item">
@@ -32,92 +78,74 @@ export const SessionsTabs = ({ intlConfig }: { intlConfig: Record<string, string
                 </div>
             </div>
             <div className="list-session">
-                <div className="card-profile">
+                {list?.length > 0 ? list?.map(({ id, scheduledStartAtUtc, scheduledEndAtUtc, title, coach, clients }) => {
+                    const client = clients?.length ? clients[0] : null;
+                    const current = +userId !== client?.id ? client : coach;
+                    const startDate = dayjs(scheduledStartAtUtc).locale(locale);
+                    const endDate = dayjs(scheduledEndAtUtc).locale(locale);
+                    const today = startDate.isToday();
+
+                    return (
+                        <div key={id} className="card-profile session__item">
                             <div className="card-profile__header">
                                 <div className="card-profile__header__portrait">
-                            <img src="/images/person.png" className="" alt="" />
+                                    <img src={current?.faceImageUrl || '/images/person.png'} className="" alt="" />
                                 </div>
                                 <div className="card-profile__header__inner">
-                            <div className="card-profile__header__name">Matthew Weeks</div>
+                                    <div>
-                            <div className="card-profile__header__title">
+                                        <div className="card-profile__header__name">{`${current?.name} ${current?.surname || ''}`}</div>
-                                Personal Growth Course
+                                        <div className="card-profile__header__title">{title}</div>
-                            </div>
+                                        <div className={`card-profile__header__date${today ? ' chosen': ''}`}>
-                            <div className="card-profile__header__date chosen">
+                                            {today
-                                Today 10:00 AM - 10:30 AM
+                                                ? `Today ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`
+                                                : `${startDate.format('D MMMM')} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`}
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                <div className="card-profile">
-                    <div className="card-profile__header">
-                        <div className="card-profile__header__portrait">
-                            <img src="/images/person.png" className="" alt="" />
-                        </div>
-                        <div className="card-profile__header__inner">
-                            <div className="card-profile__header__name">Matthew Weeks</div>
-                            <div className="card-profile__header__title">
-                                Personal Growth Course
-                            </div>
-                            <div className="card-profile__header__date">
-                                8 december at 10:00 AM - 10:30 AM
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="card-profile">
-                    <div className="card-profile__header">
-                        <div className="card-profile__header__portrait">
-                            <img src="/images/person.png" className="" alt="" />
-                        </div>
-                        <div className="card-profile__header__inner">
-                            <div className="card-profile__header__name">Matthew Weeks</div>
-                            <div className="card-profile__header__title">
-                                Personal Growth Course
-                            </div>
-                            <div className="card-profile__header__date">
-                                8 december at 10:00 AM - 10:30 AM
-                            </div>
-                        </div>
-                    </div>
                         </div>
+                    )
+                }) : (
+                    <div>not found</div>
+                )}
             </div>
         </>
     );
 
     const tabs = [
         {
-            key: 'upcoming',
+            key: SessionType.UPCOMING,
             label: (
                 <>
                     {intlConfig?.upcoming || 'Tab 1'}
-                    <span className="count">3</span>
+                    {sessions?.upcoming?.length > 0 ? (<span className="count">{sessions?.upcoming.length}</span>) : null}
                 </>
             ),
-            children: getChildren()
+            children: getChildren(sessions?.upcoming)
         },
         {
-            key: 'requested',
+            key: SessionType.REQUESTED,
             label: (
                 <>
                     {intlConfig?.requested || 'Tab 2'}
-                    <span className="count">2</span>
+                    {sessions?.requested?.length > 0 ? (<span className="count">{sessions?.requested.length}</span>) : null}
                 </>
             ),
-            children: getChildren()
+            children: getChildren(sessions?.requested)
         },
         {
-            key: 'recent',
+            key: SessionType.RECENT,
-            label: (
+            label: intlConfig?.recent || 'Tab 3',
-                <>
+            children: getChildren(sessions?.recent)
-                    {intlConfig?.recent || 'Tab 3'}
-                </>
-            ),
-            children: getChildren()
         }
     ];
 
     return (
-        <>
+        <Loader
+            isLoading={loading}
+            errorData={errorData}
+            refresh={fetchData}
+        >
             <div className="tabs-session">
                 {tabs.map((tab, index) => (
                     <Tab
@@ -130,6 +158,6 @@ export const SessionsTabs = ({ intlConfig }: { intlConfig: Record<string, string
                 ))}
             </div>
             {tabs[activeTab].children}
-        </>
+        </Loader>
     );
 };

src/components/Account/index.ts

@@ -1,2 +1,3 @@
 export { AccountMenu } from './AccountMenu';
 export { SessionsTabs } from './SessionsTabs';
+export { ProfileSettings } from './ProfileSettings';

src/components/Experts/AdditionalFilter.tsx

@@ -1,74 +1,53 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
-import { Button } from 'antd';
 import { useSearchParams } from 'next/navigation';
+import debounce from 'lodash/debounce';
 import { useRouter } from '../../navigation';
 import { AdditionalFilter } from '../../types/experts';
-import { LOCALES } from '../../constants/locale';
 import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
-import { CustomInput, CustomSelect, CustomMultiSelect } from '../view';
+import { CustomInput, CustomSelect } from '../view';
 
 type ExpertAdditionalFilterProps = {
     searchPlaceholder: string;
     sortLabel: string;
-    langLabel: string;
-    buttonFind: string;
     basePath: string;
 };
 
 export const ExpertsAdditionalFilter = ({
     searchPlaceholder,
     sortLabel,
-    langLabel,
-    buttonFind,
     basePath,
 }: ExpertAdditionalFilterProps) => {
     const searchParams = useSearchParams();
     const router = useRouter();
     const [filter, setFilter] = useState<AdditionalFilter | undefined>(getObjectByAdditionalFilter(searchParams));
 
-    const onChangeInput = useCallback((e: any) => {
+    const onChangeInput = useCallback(debounce((e: any) => {
+        const newFilter: AdditionalFilter = { ...filter };
+
         if (e?.target?.value) {
-            setFilter({
+            newFilter.text = e.target.value;
-                ...filter,
-                text: e.target.value
-            });
         } else {
-            if (filter?.text) {
+            delete newFilter?.text;
-                const newFilter = { ...filter };
+        }
-                delete newFilter.text;
 
         setFilter(newFilter);
-            }
+    }, 300), [filter]);
-        }
-    }, [filter]);
 
     const onChangeSort = useCallback((value: string) => {
         const newFilter: AdditionalFilter = { ...filter };
 
         if (value) {
-            newFilter.sort = value;
+            newFilter.coachSort = value;
         } else {
-            delete newFilter?.sort;
+            delete newFilter?.coachSort;
         }
 
         setFilter(newFilter);
     }, [filter]);
 
-    const onChangeLang = useCallback((value: string[]) => {
+    useEffect(() => {
-        const newFilter: AdditionalFilter = { ...filter };
-
-        if (value.length > 0) {
-            newFilter.language = value;
-        } else {
-            delete newFilter?.language;
-        }
-
-        setFilter(newFilter);
-    }, [filter]);
-
-    const goToFilterPage = useCallback(() => {
         router.push({
             pathname: basePath as any,
             query: {
@@ -76,7 +55,7 @@ export const ExpertsAdditionalFilter = ({
                 ...filter
             }
         })
-    }, [filter, searchParams, router]);
+    }, [filter]);
 
     return (
         <div className="main-find__search">
@@ -85,35 +64,22 @@ export const ExpertsAdditionalFilter = ({
                     placeholder={searchPlaceholder}
                     defaultValue={filter?.text}
                     onChange={onChangeInput}
+                    allowClear
                 />
             </div>
             <div className="main-find__search__sort">
                 <CustomSelect
                     label={sortLabel}
-                    value={filter?.sort}
+                    value={filter?.coachSort}
                     onChange={onChangeSort}
                     options={[
-                        { value: 'byTop', label: 'By top views' },
+                        // { value: 'byTop', label: 'By top views' },
-                        { value: 'byPriceAsc', label: 'By price ascending' },
+                        { value: 'byPriceAscending', label: 'By price ascending' },
-                        { value: 'byPriceDesc', label: 'By price descending' },
+                        { value: 'byPriceDescending', label: 'By price descending' }
-                        { value: 'byRating', label: 'By rating' }
+                        // { value: 'byRating', label: 'By rating' }
                     ]}
                 />
             </div>
-            <div className="main-find__search__language">
-                <CustomMultiSelect
-                    label={langLabel}
-                    value={filter?.language}
-                    onChange={onChangeLang}
-                    options={Object.entries(LOCALES).map(([ value, label ]) => ({ value, label }))}
-                />
-            </div>
-            <Button
-                className="btn-apply"
-                onClick={goToFilterPage}
-            >
-                {buttonFind}
-            </Button>
         </div>
     );
 };

src/components/Experts/Experts.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { getTranslations } from 'next-intl/server';
-import { getTagList } from '../../actions/tags';
+import { DEFAULT_PAGE_SIZE } from '../../constants/common';
 import { getFilter } from '../../utils/filter';
+import { getTagList, getLanguages } from '../../actions/tags';
 import { getExpertsList } from '../../actions/experts';
 import { ExpertsFilter } from './Filter';
 import { ExpertsAdditionalFilter } from './AdditionalFilter';
@@ -10,12 +11,14 @@ import { ExpertsList } from './ExpertsList';
 type ExpertsProps = {
     basePath?: string;
     locale: string;
+    pageSize?: number;
 };
 
-export const Experts = async ({ basePath = '/', locale }: ExpertsProps) => {
+export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_SIZE }: ExpertsProps) => {
     const t = await getTranslations('Experts');
     const searchData = await getTagList(locale);
-    const filter = getFilter(searchData);
+    const languages = await getLanguages(locale);
+    const filter = getFilter({ searchData, pageSize });
     const experts = await getExpertsList(filter, locale);
 
     return (
@@ -23,6 +26,7 @@ export const Experts = async ({ basePath = '/', locale }: ExpertsProps) => {
             <div className="col-xl-3 col-lg-4 d-none d-lg-block">
                 <ExpertsFilter
                     searchData={searchData}
+                    languages={languages}
                     basePath={basePath}
                     priceTitle={t('filter.price', { from: searchData?.sessionCostMin || 0, to: searchData?.sessionCostMax || 0 })}
                     durationTitle={t('filter.duration', { from: searchData?.sessionDurationMin || 0, to: searchData?.sessionDurationMax || 0 })}
@@ -33,19 +37,19 @@ export const Experts = async ({ basePath = '/', locale }: ExpertsProps) => {
                 <ExpertsAdditionalFilter
                     searchPlaceholder={t('filter.search')}
                     sortLabel={t('filter.sort')}
-                    langLabel={t('filter.language')}
-                    buttonFind={t('filter.find')}
                     basePath={basePath}
                 />
                 <ExpertsList
                     locale={locale}
                     data={experts}
+                    basePath={basePath}
                     baseFilter={filter}
                     priceTitle={t('list.price')}
                     durationTitle={t('list.duration')}
                     detailButton={t('list.details')}
+                    pageSize={pageSize}
                 />
             </div>
         </div>
-    )
+    );
 };

src/components/Experts/ExpertsList.tsx

@@ -6,9 +6,9 @@ import { List, Tag } from 'antd';
 import { RightOutlined } from '@ant-design/icons';
 import isEqual from 'lodash/isEqual';
 import Image from 'next/image';
-import { Link } from '../../navigation';
+import { Link, useRouter } from '../../navigation';
-import { ExpertsData, Filter } from '../../types/experts';
+import { ExpertsData, Filter, GeneralFilter } from '../../types/experts';
-import { getObjectByFilter } from '../../utils/filter';
+import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
 import { getExpertsList } from '../../actions/experts';
 import { CustomPagination, CustomSpin } from '../view';
 
@@ -19,6 +19,8 @@ type ExpertListProps = {
     detailButton: string;
     locale: string;
     baseFilter: Filter;
+    pageSize: number;
+    basePath: string;
 };
 
 export const ExpertsList = ({
@@ -27,35 +29,66 @@ export const ExpertsList = ({
     durationTitle,
     detailButton,
     locale,
-    baseFilter
+    baseFilter,
+    pageSize,
+    basePath
 }: ExpertListProps) => {
     const searchParams = useSearchParams();
+    const router = useRouter();
     const getTitle = (str: string, value?: any): string => (value ? str.replace('0', value) : str);
     const [experts, setExperts] = useState<ExpertsData | undefined>();
+    const [loading, setLoading] = useState<boolean>(true);
 
     useEffect(() => {
         const filter = {
             ...baseFilter,
-            ...getObjectByFilter(searchParams)
+            ...getObjectByFilter(searchParams),
+            ...getObjectByAdditionalFilter(searchParams)
         };
 
         if (!isEqual(baseFilter, filter)) {
+            setLoading(true);
             getExpertsList(filter, locale)
                 .then((experts) => {
                     setExperts(experts);
-                });
+                })
+                .finally(() => {
+                    setLoading(false);
+                })
+            ;
         } else {
+            setLoading(false);
             setExperts(data);
         }
     }, [searchParams]);
 
-    return experts ? (
+    const onChangePage = (page: number) => {
+        const newFilter: GeneralFilter = {
+            ...getObjectByFilter(searchParams),
+            ...getObjectByAdditionalFilter(searchParams)
+        };
+
+        if (page !== 1) {
+            newFilter.page = page;
+        } else {
+            delete newFilter.page;
+        }
+
+        router.push({
+            pathname: basePath as any,
+            query: newFilter
+        });
+    };
+
+    const currentPage = searchParams.has('page') ? Number(searchParams.get('page')) : baseFilter.page;
+
+    return !loading ? experts?.coaches && (
         <>
             <List
                 itemLayout="vertical"
                 size="large"
                 className="search-result"
-                dataSource={experts}
+                dataSource={experts.coaches}
                 renderItem={(item) => (
                     <List.Item key={item?.id} className="card-profile">
                         <List.Item.Meta
@@ -67,6 +100,7 @@ export const ExpertsList = ({
                             )}
                             description={(
                                 <div className="card-profile__header__inner">
+                                    <div>
                                         <Link href={`/experts/${item?.id}` as any}>
                                             <div className="card-profile__header__name">{`${item.name} ${item?.surname || ''}`}</div>
                                         </Link>
@@ -74,6 +108,12 @@ export const ExpertsList = ({
                                             {getTitle(priceTitle, item?.sessionCost)} <span>/ {getTitle(durationTitle, item?.sessionDuration)}</span>
                                         </div>
                                     </div>
+                                    <div className="card-profile__header__lang">
+                                        {item?.coachLanguages?.map((lang) => (
+                                            <Tag key={lang} className="skills__list__item">{lang}</Tag>
+                                        ))}
+                                    </div>
+                                </div>
                             )}
                         />
                         <div className="card-profile__skills">
@@ -101,7 +141,13 @@ export const ExpertsList = ({
                     </List.Item>
                 )}
             />
-            <CustomPagination total={20} />
+            {experts.total > pageSize && (
+                <CustomPagination
+                    total={experts.total}
+                    pageSize={pageSize}
+                    onChange={onChangePage}
+                    current={currentPage}
+                />)}
         </>
     ) : <CustomSpin />;
 };

src/components/Experts/Filter.tsx

@@ -1,16 +1,18 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
-import { Button, List } from 'antd';
+import { Button, Collapse, List } from 'antd';
-import { useSearchParams, usePathname } from 'next/navigation';
+import type { CollapseProps } from 'antd';
+import { useSearchParams } from 'next/navigation';
 import { useRouter } from '../../navigation';
-import { Filter, GeneralFilter } from '../../types/experts';
+import { Filter } from '../../types/experts';
-import { SearchData, Tag } from '../../types/tags';
+import { Languages, SearchData, Tag } from '../../types/tags';
-import { getObjectByFilter, getObjectByAdditionalFilter, getSearchParamsString } from '../../utils/filter';
+import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
-import { CustomSwitch, CustomSlider } from '../view';
+import { CustomSwitch, CustomSlider, CustomInput } from '../view';
 
 type ExpertsFilterProps = {
     searchData?: SearchData;
+    languages?: Languages;
     basePath: string;
     priceTitle: string;
     durationTitle: string;
@@ -19,6 +21,7 @@ type ExpertsFilterProps = {
 
 export const ExpertsFilter = ({
     searchData,
+    languages,
     basePath,
     priceTitle,
     durationTitle,
@@ -26,23 +29,43 @@ export const ExpertsFilter = ({
 }: ExpertsFilterProps) => {
     const searchParams = useSearchParams();
     const router = useRouter();
-    const pathname = usePathname();
     const [filter, setFilter] = useState<Filter | undefined>(getObjectByFilter(searchParams));
+    const [openedTabs, setOpenedTabs] = useState<string[]>([]);
+    const [filteredTags, setFilteredTags] = useState<Tag[]>([]);
+    const [searchLang, setSearchLang] = useState<string>();
+    const [searchTags, setSearchTags] = useState<string>();
 
-    const onChangeTags = useCallback((id: number, checked: boolean) => {
+    useEffect(() => {
-        let themesTagIds = filter?.themesTagIds || [];
+        const tags = searchData?.themesGroups
-
+            ? searchData.themesGroups.reduce<Tag[]>((acc, item) => {
-        if (checked && !themesTagIds?.includes(id)) {
+                if (item?.tags) {
-            themesTagIds.push(id);
+                    return [
+                        ...acc,
+                        ...item.tags.map((tag) => ({ ...tag, group: item.name }))
+                    ]
                 }
 
-        if (!checked && themesTagIds?.includes(id)) {
+                return acc;
-            themesTagIds = themesTagIds.filter((tId) => tId != id);
+            }, [])
+            : [];
+
+        setFilteredTags(tags);
+    }, [searchData?.themesGroups]);
+
+    const onChangeFilterArr = useCallback((field: string, id: number | string, checked: boolean) => {
+        let arr = (filter && filter[field]) || [];
+
+        if (checked && !arr?.includes(id)) {
+            arr.push(id);
+        }
+
+        if (!checked && arr?.includes(id)) {
+            arr = arr.filter((tId) => tId != id);
         }
 
         setFilter({
-            ...filter,
+            ...(filter || {}),
-            themesTagIds
+            [field]: arr
         });
     }, [filter, searchParams, searchData]);
 
@@ -100,7 +123,19 @@ export const ExpertsFilter = ({
         })
     }, [filter, searchParams, searchData]);
 
-    const getList = useCallback((data: Tag[]) => (
+    const getSelectedLanguage = useCallback((): string => {
+        const cur = languages ? languages.filter(({ code }) => filter?.userLanguages ? filter.userLanguages.includes(code) : false) : [];
+
+        return cur ? cur.map(({ nativeSpelling }) => nativeSpelling).join(', ') : '';
+    }, [filter, languages]);
+
+    const getSelectedTags = useCallback((): string => {
+        const cur = filteredTags.filter(({ id }) => filter?.themesTagIds ? filter.themesTagIds.includes(id) : false);
+
+        return cur ? cur.map(({ name }) => name).join(', ') : '';
+    }, [filter, filteredTags]);
+
+    const getList = useCallback((fieldName: string, data: { id: number | string, name: string }[]) => (
         <div className="b-filter__inner">
             <List
                 itemLayout="vertical"
@@ -113,8 +148,8 @@ export const ExpertsFilter = ({
                         <div className="b-filter__item">
                             <div className="b-filter__title">{name}</div>
                             <CustomSwitch
-                                defaultChecked={filter?.themesTagIds?.includes(id) || false}
+                                defaultChecked={(filter && filter[fieldName]?.includes(id)) || false}
-                                onChange={(checked: boolean) => onChangeTags(id, checked)}
+                                onChange={(checked: boolean) => onChangeFilterArr(fieldName, id, checked)}
                             />
                         </div>
                     </List.Item>
@@ -123,15 +158,95 @@ export const ExpertsFilter = ({
         </div>
     ), [filter, searchParams, searchData]);
 
+    const getLangList = () => {
+        const reg = searchLang ? new RegExp(searchLang, 'ig') : '';
+        const langList = reg ? (languages || []).filter(({ code, nativeSpelling }) => reg.test(code) || reg.test(nativeSpelling)) : languages;
+        return langList?.length && getList('userLanguages', langList.map(({ code, nativeSpelling }) => ({ id: code, name: nativeSpelling })))
+    };
+
+    const getTagsList = () => {
+        const reg = searchTags ? new RegExp(searchTags, 'ig') : '';
+
+        if (reg) {
+            const tagsList = filteredTags.filter(({ name, group }) => reg.test(name) || reg.test(group));
+            return getList('themesTagIds', tagsList);
+        }
+
+        return searchData?.themesGroups?.length ? searchData.themesGroups.map(({ id, name, tags }) => (
+            <div key={id}>
+                <h3 className="title-h5">{name}</h3>
+                {getList('themesTagIds', tags)}
+            </div>
+        )) : null;
+    };
+
+    const getCollapsedPanels: CollapseProps['items'] = [
+        {
+            key: 'userLanguages',
+            label: (
+                <>
+                    <div className="b-filter__collapsed__title">Session Language</div>
+                    {!openedTabs.includes('userLanguages') && filter?.userLanguages?.length > 0 && (
+                        <div className="b-filter__collapsed__desc">{getSelectedLanguage()}</div>
+                    )}
+                </>
+            ),
+            children: (
+                <>
+                    <CustomInput
+                        placeholder="Search"
+                        value={searchLang}
+                        onChange={(e) => setSearchLang(e.target?.value)}
+                        allowClear
+                    />
+                    <div className="b-filter__content">
+                        {getLangList()}
+                    </div>
+                </>
+            ),
+        },
+        {
+            key: 'themesTagIds',
+            label: (
+                <>
+                    <div className="b-filter__collapsed__title">Direction</div>
+                    {!openedTabs.includes('themesTagIds') && filter?.themesTagIds?.length > 0 && (
+                        <div className="b-filter__collapsed__desc">{getSelectedTags()}</div>
+                    )}
+                </>
+            ),
+            children: (
+                <>
+                    <CustomInput
+                        placeholder="Search"
+                        value={searchTags}
+                        onChange={(e) => setSearchTags(e.target?.value)}
+                        allowClear
+                    />
+                    <div className="b-filter__content">{getTagsList()}</div>
+                </>
+            ),
+        }
+    ];
+
+    const onChangeTab = (keys: (string | string[])) => {
+        if (Array.isArray(keys)) {
+            setOpenedTabs(keys);
+            if (!keys.includes('userLanguages') && searchLang) setSearchLang('');
+            if (!keys.includes('themesTagIds') && searchTags) setSearchTags('');
+        }
+    };
+
     return (
         <div className="b-filter">
-            {searchData?.themesGroups?.length && searchData.themesGroups.map(({ id, name, tags }) => (
+            <Collapse
-                <div key={id}>
+                ghost
-                    <h3 className="title-h3">{name}</h3>
+                items={getCollapsedPanels}
-                    {getList(tags)}
+                expandIconPosition="end"
-                </div>
+                onChange={onChangeTab}
-            ))}
+            />
-            <h3 className="title-h3">{priceTitle}</h3>
+            <div className="b-filter__block">
+                <h3 className="title-h3">Price</h3>
                 <div className="b-filter__slider">
                     <CustomSlider
                         range
@@ -142,7 +257,10 @@ export const ExpertsFilter = ({
                         onChange={onChangePrice}
                     />
                 </div>
-            <h3 className="title-h3">{durationTitle}</h3>
+                <div className="b-filter__description">{priceTitle}</div>
+            </div>
+            <div className="b-filter__block">
+                <h3 className="title-h3">Duration</h3>
                 <div className="b-filter__slider">
                     <CustomSlider
                         range
@@ -153,6 +271,8 @@ export const ExpertsFilter = ({
                         onChange={onChangeDuration}
                     />
                 </div>
+                <div className="b-filter__description">{durationTitle}</div>
+            </div>
             <Button
                 className="btn-apply"
                 onClick={goToFilterPage}

src/components/Modals/authModalContent/EnterContent.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useState } from 'react';
 import { Form, FormInstance, notification } from 'antd';
 import Image from 'next/image';
+import { AUTH_USER } from '../../../constants/common';
 import { getAuth } from '../../../actions/auth';
+import { getPersonalData } from '../../../actions/profile';
 import { CustomInput, CustomInputPassword, FilledButton, OutlinedButton, LinkButton } from '../../view';
 
 type EnterProps = {
@@ -28,8 +30,12 @@ export const EnterContent: FC<EnterProps> = ({
             getAuth(locale, { login, password })
                 .then(({ data }) => {
                     if (data.jwtToken) {
+                        getPersonalData(locale, data.jwtToken)
+                            .then(({ data: profile }) => {
+                                localStorage.setItem(AUTH_USER, profile.id.toString());
                                 updateToken(data.jwtToken);
                                 handleCancel();
+                            })
                     }
                 })
                 .catch((error) => {
@@ -46,7 +52,7 @@ export const EnterContent: FC<EnterProps> = ({
 
     return (
         <>
-            <Form form={form} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
+            <Form form={form} style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
                 <Form.Item
                     name="login"
                     noStyle
@@ -78,6 +84,8 @@ export const EnterContent: FC<EnterProps> = ({
                     <CustomInputPassword
                         size="small"
                         placeholder="Password"
+                        autoComplete="off"
+                        onPressEnter={onLogin}
                     />
                 </Form.Item>
             </Form>

src/components/Modals/authModalContent/RegisterContent.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useState } from 'react';
 import { Form, FormInstance, notification } from 'antd';
+import { AUTH_USER } from '../../../constants/common';
 import { getRegister } from '../../../actions/auth';
 import { setPersonData } from '../../../actions/profile';
 import { CustomInput, CustomInputPassword, FilledButton, OutlinedButton } from '../../view';
@@ -28,15 +29,16 @@ export const RegisterContent: FC<RegisterProps> = ({
             getRegister(locale)
                 .then(({ data }) => {
                     if (data.jwtToken) {
-                        setPersonData( { login, password, role: 'client' }, locale, data.jwtToken)
+                        setPersonData( { login, password, role: 'client', languagesLinks: [] }, locale, data.jwtToken)
-                            .then(() => {
+                            .then(({ data: profile }) => {
                                 updateToken(data.jwtToken);
+                                localStorage.setItem(AUTH_USER, profile.userData.id.toString());
                                 handleCancel();
                             })
                             .catch((error) => {
                                 notification.error({
                                     message: 'Error',
-                                    description: error?.response?.data?.errMessage
+                                    description: error?.response?.data?.errors?.toString()
                                 });
                             });
                     }

src/components/Modals/authModalContent/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 export * from './FinishContent';
 export * from './ResetContent';
 export * from './EnterContent';

src/components/view/BackButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from 'antd';
+import { useRouter } from 'next/navigation';
+
+export const BackButton = ({ className, text }: { className?: string, text: string }) => {
+    const router = useRouter();
+
+    return (
+        <Button
+            className={className}
+            onClick={() => router.back()}
+        >
+            {text}
+        </Button>
+    );
+};

src/components/view/CustomInput.tsx

@@ -8,8 +8,13 @@ const Input = styled(AntdInput)`
     border: 1px solid #F8F8F7 !important;
     border-radius: 8px !important;
     color: #000 !important;
+    align-items: center;
     
-    &:focus, &:hover {
+    input {
+        background-color: transparent !important;
+    }
+    
+    &:focus, &:hover, &:focus-within {
         border-color: #66A5AD !important;
         box-shadow: none !important;
     }

src/components/view/CustomPagination.tsx

@@ -4,8 +4,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { Pagination as AntdPagination, PaginationProps } from 'antd';
 
-const DEFAULT_SIZE = 5;
-
 const Pagination = styled(AntdPagination)`
     display: flex;
     gap: 8px;
@@ -52,7 +50,6 @@ export const CustomPagination = (props: PaginationProps) => (
     <Pagination
         itemRender={itemRender}
         defaultCurrent={1}
-        defaultPageSize={DEFAULT_SIZE}
         {...props}
     />
 );

src/components/view/CustomSlider.tsx

@@ -38,7 +38,7 @@ const Slider = styled(AntdSlider)`
         
         &:focus, &:hover {
             &::after {
-                box-shadow: 0 0 0 10px rgba(102, 165, 173, .2) !important;
+                box-shadow: 0 0 0 12px rgba(102, 165, 173, .2) !important;
             }
         }
     }

src/components/view/Loader.tsx

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react';
+import { CustomSpin } from './CustomSpin';
+import { WithError } from './WithError';
+
+type LoaderProps = {
+    children?: ReactNode;
+    isLoading?: boolean;
+    errorData?: any;
+    refresh?: () => void;
+};
+
+export const Loader: FC<LoaderProps> = ({
+    children,
+    isLoading,
+    errorData,
+    refresh
+}) => {
+    if (isLoading) {
+        return <CustomSpin />
+    }
+
+    return (
+        <WithError
+            errorData={errorData}
+            refresh={refresh}
+        >
+            {children}
+        </WithError>
+    );
+};

src/components/view/WithError.tsx

@@ -0,0 +1,31 @@
+import React, { FC, ReactNode } from 'react';
+import { Button, Result } from 'antd';
+
+type WithErrorProps = {
+    children?: ReactNode;
+    errorData?: any;
+    refresh?: () => void;
+};
+
+export const WithError: FC<WithErrorProps> = ({
+    children,
+    errorData,
+    refresh
+}) => {
+    if (errorData) {
+        return (
+            <Result
+                status="error"
+                title="Submission Failed"
+                subTitle="Please check and modify the following information before resubmitting."
+                extra={refresh ? (
+                    <Button type="primary" onClick={refresh}>
+                        Refresh page
+                    </Button>
+                ) : undefined}
+            />
+        );
+    }
+
+    return children;
+};

src/components/view/index.ts

@@ -12,3 +12,6 @@ export * from './CustomSpin';
 export * from './FilledButton';
 export * from './OutlinedButton';
 export * from './LinkButton';
+export * from './BackButton';
+export * from './WithError';
+export * from './Loader';

src/constants/common.ts

@@ -1,2 +1,6 @@
 export const BASE_URL = process.env.NEXT_PUBLIC_SERVER_BASE_URL || 'https://api.bbuddy.expert/api';
 export const AUTH_TOKEN_KEY = 'bbuddy_token';
+export const AUTH_USER = 'bbuddy_auth_user';
+
+export const DEFAULT_PAGE_SIZE = 5;
+export const DEFAULT_PAGE = 1;

src/i18nKeys/en.ts

@@ -0,0 +1,11 @@
+export default {
+    accountMenu: {
+        sessions: 'Upcoming & Recent Sessions',
+        notifications: 'Notification',
+        support: 'Help & Support',
+        information: 'Legal Information',
+        settings: 'Profile Settings',
+        messages: 'Messages',
+        'work-with-us': 'Work With Us'
+    }
+}

src/i18nKeys/index.ts

@@ -0,0 +1,25 @@
+import { Locale } from '../types/locale';
+import en from './en';
+import ru from './ru';
+
+const MESSAGES = {
+    [Locale.en]: en,
+    [Locale.ru]: ru,
+    [Locale.de]: en,
+    [Locale.fr]: en,
+    [Locale.it]: en,
+    [Locale.es]: en
+};
+
+const getValue = (keys: string[], dictionary: any) => {
+    const keysClone = [...keys];
+    const firstElement = keysClone.shift();
+
+    if (firstElement && dictionary[firstElement]) {
+        return typeof dictionary[firstElement] === 'string' ? dictionary[firstElement] : getValue(keysClone, dictionary[firstElement]);
+    } else {
+        return '';
+    }
+};
+
+export const i18nText = (key: string, locale?: string): string => getValue(key.split('.'), MESSAGES[locale || Locale.en]);

src/i18nKeys/ru.ts

@@ -0,0 +1,11 @@
+export default {
+    accountMenu: {
+        sessions: 'Upcoming & Recent Sessions',
+        notifications: 'Notification',
+        support: 'Help & Support',
+        information: 'Legal Information',
+        settings: 'Profile Settings',
+        messages: 'Messages',
+        'work-with-us': 'Work With Us'
+    }
+}

src/styles/_default.scss

@@ -155,7 +155,7 @@ a {
   }
 
   &__link {
-    color: #FF8A00;
+    color: #FF8A00 !important;
     @include rem(15);
     font-style: normal;
     font-weight: 400;
@@ -295,12 +295,84 @@ a {
     width: 100%;
   }
 
+  .ant-collapse-content-box {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .title-h5 {
+    color: #003B46;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .title-h3 {
+    color: #003B46;
+    font-size: 18px;
+    line-height: 32px;
+    font-weight: bold;
+  }
+
+  .ant-collapse {
+    margin-bottom: 16px;
+  }
+
+  .ant-collapse-item {
+    border-bottom: 1px solid #C4DFE6;
+    border-radius: 0 !important;
+  }
+
+  .ant-collapse-content-box {
+    padding: 0 !important;
+  }
+
+  .ant-collapse-header {
+    padding: 16px 0 !important;
+    align-items: center !important;
+
+    .ant-collapse-expand-icon {
+      height: 32px !important;
+      width: 32px;
+      padding-inline-start: 0 !important;
+      justify-content: center;
+      color: #2C7873;
+    }
+  }
+
+  &__content {
+    height: 265px;
+    overflow-y: auto;
+    width: 100%;
+    margin-bottom: 16px;
+    padding-right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    // scrollbar-width: thin;
+    // scrollbar-color: #2C7873 #C4DFE6;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    &::-webkit-scrollbar-track {
+      background: #C4DFE6;
+      border-radius: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #2C7873;
+      border-radius: 8px;
+    }
+  }
+
   &__inner {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: 16px;
   }
 
   &__range {
@@ -320,7 +392,7 @@ a {
   &__slider {
     width: 100%;
     position: relative;
-    margin: 8px 0 16px -5px;
+    margin: 0 0 0 -5px;
   }
 
   &__title {
@@ -331,6 +403,19 @@ a {
     line-height: 160%;
     text-transform: capitalize;
   }
+
+  &__collapsed {
+    &__title {
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 32px;
+      color: #003B46;
+    }
+
+    &__desc {
+      color: #6FB98F;
+    }
+  }
 }
 
 .base-btn {
@@ -510,6 +595,12 @@ a {
   border-block-end: 1px solid #C4DFE6 !important;
   margin: 0 0 16px !important;
 
+  &.session {
+    &__item {
+      margin: 0 !important;
+    }
+  }
+
   &__header {
     display: flex;
     padding-bottom: 8px;
@@ -518,6 +609,10 @@ a {
     align-self: stretch;
     margin-block-end: 0 !important;
 
+    .ant-list-item-meta-avatar {
+      margin-inline-end: 0 !important;
+    }
+
     &__portrait {
       width: 86px;
       height: 86px;
@@ -538,10 +633,20 @@ a {
 
     &__inner {
       display: flex;
+      align-items: center;
+      gap: 20px;
+      flex: 1 0 0;
+      justify-content: space-between;
+
+      & > div {
+        display: flex;
+        gap: 4px;
+
+        &:first-child {
           flex-direction: column;
           align-items: flex-start;
-      gap: 4px;
+        }
-      flex: 1 0 0;
+      }
     }
 
     &__name {

src/styles/_error.scss

@@ -0,0 +1,62 @@
+.page-error {
+  position: relative;
+  padding: 88px 0;
+
+  .b-inner {
+    display: flex;
+    gap: 50px;
+    justify-content: center;
+
+    & > div {
+      flex-basis: 50%;
+    }
+  }
+
+  .error {
+    &__image {
+      img {
+        display: block;
+        margin: auto;
+        width: 400px;
+      }
+    }
+
+    &__description {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      justify-content: center;
+      text-align: center;
+    }
+
+    &__code {
+      font-size: 180px;
+      line-height: 180px;
+      font-weight: bold;
+      color: #c4c4c4;
+    }
+
+    &__subtitle {
+      color: #6FB98F;
+    }
+
+    &__button {
+      width: 300px;
+      margin: 0 auto;
+    }
+  }
+
+  @media (min-width: 768px) {
+    padding-bottom: 55px;
+  }
+
+  @media (min-width: 992px) {
+    .b-inner {
+
+    }
+  }
+
+  @media (min-width: 1200px) {
+
+  }
+}

src/styles/_main.scss

@@ -529,6 +529,24 @@
     padding-right: 8px;
     position: relative;
 
+    &__block {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 0 0 16px;
+      margin-bottom: 16px;
+      border-bottom: 1px solid #C4DFE6;
+    }
+
+    &__description {
+      color: #6FB98F;
+      font-size: 14px;
+      line-height: 14px;
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+    }
+
     @media (min-width: 992px) {
       &:before {
         content: "";

src/styles/style.scss

@@ -4,6 +4,7 @@
 @import "_header.scss";
 @import "_menu-mobile.scss";
 @import "_main.scss";
+@import "_error.scss";
 @import "_bb-experts.scss";
 @import "_bb-clients.scss";
 @import "_faq.scss";

src/types/experts.ts

@@ -1,6 +1,4 @@
-import { Tag } from './tags';
+import {Tag, ThemeGroups} from './tags';
-
-// export type Filter = Record<string, any>;
 
 export type GeneralFilter = Filter & AdditionalFilter;
 
@@ -10,12 +8,15 @@ export type Filter = {
     priceTo?: number | null;
     durationFrom?: number | null;
     durationTo?: number | null;
+    userLanguages?: string[];
+    pageSize?: number;
+    page?: number;
+    tagLanguage?: string;
 };
 
 export type AdditionalFilter = {
     text?: string;
-    sort?: string;
+    coachSort?: string;
-    language?: string[];
 };
 
 export type File = {
@@ -83,9 +84,18 @@ export interface ExpertItem {
     speciality?: string;
     specialityDesc?: string;
     description?: string;
+    coachLanguages?: string[]
 }
 
-export type ExpertsData = ExpertItem[];
+export type ExpertsData = {
+    coaches: ExpertItem[];
+    themesGroups?: ThemeGroups[],
+    sessionCostMin?: number;
+    sessionCostMax?: number;
+    sessionDurationMin?: number;
+    sessionDurationMax?: number;
+    total: number;
+};
 
 export type ExpertDetails = {
     publicCoachDetails: ExpertItem & {

src/types/profile.ts

@@ -0,0 +1,12 @@
+export type Profile = {
+    id: number;
+    username?: string;
+    surname?: string;
+    fillProgress?: string;
+    faceImageUrl?: string;
+    role?: string;
+    login?: string;
+    hasPassword?: boolean;
+    hasExternalLogin?: boolean;
+    isTestMode?: boolean;
+};

src/types/sessions.ts

@@ -0,0 +1,57 @@
+type User = {
+    id: number;
+    login?: string;
+    name?: string;
+    surname?: string;
+    faceImageUrl?: string;
+};
+
+type SessionTag = {
+    id: number;
+    groupId?: number;
+    name?: string;
+    isActive?: boolean;
+    isSelected?: boolean;
+    canDeleted?: boolean;
+};
+
+export type SessionsFilter = {
+    tags?: (number | string)[];
+    startDate?: string;
+    endDate?: string;
+};
+
+export type Session = {
+    id: number;
+    scheduledStartAtUtc?: string;
+    scheduledEndAtUtc?: string;
+    state?: string;
+    clientComment?: string;
+    secret?: string;
+    cost?: number;
+    themesTagName?: string;
+    totalDuration?: number;
+    type?: string;
+    maxClients: number;
+    title?: string;
+    description?: string;
+    isNeedSupervisor?: boolean;
+    supervisorComment?: string;
+    user?: User;
+    coach?: User;
+    supervisor?: User;
+    clients?: User[];
+    themesTags?: SessionTag[]
+};
+
+export enum SessionType {
+    UPCOMING = 'upcoming',
+    REQUESTED = 'requested',
+    RECENT = 'recent'
+}
+
+export type Sessions = {
+    [SessionType.UPCOMING]?: Session[];
+    [SessionType.REQUESTED]?: Session[];
+    [SessionType.RECENT]?: Session[];
+};

src/types/tags.ts

@@ -19,3 +19,11 @@ export type SearchData = {
     sessionDurationMin: number;
     sessionDurationMax: number;
 };
+
+export type Language = {
+    id: number;
+    code: string;
+    nativeSpelling: string;
+}
+
+export type Languages = Language[];

src/utils/filter.ts

@@ -1,7 +1,8 @@
 import { SearchData } from '../types/tags';
 import { AdditionalFilter, Filter, GeneralFilter } from '../types/experts';
+import { DEFAULT_PAGE } from '../constants/common';
 
-export const getDefaultFilter = (searchData: SearchData | null): Filter => {
+export const getDefaultFilter = (searchData: SearchData | null, pageSize?: number): Filter => {
     const themesTagIds = searchData?.themesGroups?.reduce<number[]>((result, { tags }) => {
         const t = tags?.map(({ id }) => id) || [];
 
@@ -16,15 +17,23 @@ export const getDefaultFilter = (searchData: SearchData | null): Filter => {
         priceFrom: null,
         priceTo: null,
         durationFrom: null,
-        durationTo: null
+        durationTo: null,
+        pageSize,
+        page: DEFAULT_PAGE
     } as Filter;
 };
 
-export const getFilter = (searchData: SearchData | null, searchParams?: { [key: string]: string | string[] | undefined }): Filter => {
+type FilterProps = {
-    const filter = getDefaultFilter(searchData);
+    searchData: SearchData | null,
+    pageSize?: number,
+    searchParams?: { [key: string]: string | string[] | undefined }
+}
+
+export const getFilter = ({ searchData, searchParams, pageSize }: FilterProps): Filter => {
+    const filter = getDefaultFilter(searchData, pageSize);
 
     if (searchParams) {
-        const { themesTagIds, priceFrom, priceTo, durationFrom, durationTo } = searchParams;
+        const { themesTagIds, priceFrom, priceTo, durationFrom, durationTo, page, pageSize } = searchParams;
 
         if (themesTagIds) {
             if (Array.isArray(themesTagIds) && themesTagIds?.length > 0) {
@@ -51,20 +60,33 @@ export const getFilter = (searchData: SearchData | null, searchParams?: { [key:
         if (durationTo) {
             filter.durationTo = +durationTo;
         }
+
+        if (page) {
+            filter.page = +page;
+        }
+
+        if (pageSize) {
+            filter.pageSize = +pageSize;
+        }
     }
 
     return filter;
 };
 
-export const getObjectByFilter = (searchParams?: any): Filter | undefined => {
+export const getObjectByFilter = (searchParams?: any): Filter => {
     const filter: Filter = {};
 
     let tags = searchParams?.getAll('themesTagIds');
+    let languages = searchParams?.getAll('userLanguages');
 
     if (tags && tags.length > 0) {
         filter.themesTagIds = tags.map((id: string) => Number(id));
     }
 
+    if (languages && languages.length > 0) {
+        filter.userLanguages = languages.map((code: string) => code);
+    }
+
     if (searchParams?.has('priceFrom')) {
         filter.priceFrom = Number(searchParams.get('priceFrom'));
     }
@@ -81,6 +103,10 @@ export const getObjectByFilter = (searchParams?: any): Filter | undefined => {
         filter.durationTo = Number(searchParams.get('durationTo'));
     }
 
+    if (searchParams?.has('page')) {
+        filter.page = Number(searchParams.get('page'));
+    }
+
     return filter;
 };
 
@@ -91,12 +117,8 @@ export const getObjectByAdditionalFilter = (searchParams?: any): AdditionalFilte
         additionalFilter.text = searchParams.get('text');
     }
 
-    if (searchParams?.has('sort')) {
+    if (searchParams?.has('coachSort')) {
-        additionalFilter.sort = searchParams.get('sort');
+        additionalFilter.coachSort = searchParams.get('coachSort');
-    }
-
-    if (searchParams?.has('language')) {
-        additionalFilter.language = searchParams.getAll('language');
     }
 
     return additionalFilter;