Catalog | feat: add profile page

'use client';

import { Preloader } from '@/vendor';

const Loading = () => {

  return <Preloader colorItem="" />;

};

export default Loading;

import { Suspense } from 'react';

import { ProfilePage } from '@/page';

import Loading from './loading';

const Profile = () => {

  return (

    <Suspense fallback={<Loading />}>

      <ProfilePage />

    </Suspense>

  );

};

export default Profile;

export * from './profile';

'use client';

import { useEffect, useState } from 'react';

import { useRouter } from 'next/navigation';

import { BackGroup } from '@/shared';

import { useAppDispatch, useAppSelector } from '@/hooks';

import { useLogout, useUser } from '@/api-hooks';

import { loggedInSelector, setUser, userSelector } from '@/store';

import * as Styled from './styled';

import { ProfileGroup, ProfileButton, ProfileForm } from './ui';

export const Profile = () => {

  const dispatch = useAppDispatch();

  const loggedIn = useAppSelector(loggedInSelector);

  const user = useAppSelector(userSelector);

  const router = useRouter();

  const [isEditing, setIsEditing] = useState(false);

  const { data, refetch: refetchUser } = useUser(user.id?.toString() || '');

  if (loggedIn) refetchUser();

  useEffect(() => {

    if (data?.success) {

      dispatch(setUser({ data: data.user }));

    }

  }, [data, dispatch]);

  const handleBackClick = () => {

    router.push('/');

  };

  const handleLogout = useLogout();

  const handleLoginClick = () => {

    router.push('/login');

  };

  const handleRegisterClick = () => {

    router.push('/signup');

  };

  const handleEdit = () => {

    setIsEditing(true);

  };

  const handleCloseEdit = () => {

    setIsEditing(false);

  };

  if (!loggedIn) {

    return (

      <Styled.Profile>

        <BackGroup handleBackClick={handleBackClick} title="Авторизация" />

        <Styled.ProfileAuthButtons>

          <ProfileButton title="Вход" onClick={handleLoginClick} />

          <ProfileButton title="Регистрация" onClick={handleRegisterClick} />

        </Styled.ProfileAuthButtons>

      </Styled.Profile>

    );

  }

  return (

    <Styled.Profile>

      <BackGroup

        handleBackClick={isEditing ? handleCloseEdit : handleBackClick}

        title="Личный кабинет"

      />

      {isEditing ? (

        <ProfileForm handleCloseEdit={handleCloseEdit} />

      ) : (

        <ProfileGroup

          avatar={user.avatar}

          handleEdit={handleEdit}

          handleLogout={handleLogout}

          phone={user.phone}

          name={

            user.isIncognita === 'false'

              ? `${user.firstName} ${user.lastName}`

              : 'Коти Старк'

          }

        />

      )}

    </Styled.Profile>

  );

};

export * from './schema-profile-form';