Commit e36f1674 authored by AlexandrValgamov's avatar AlexandrValgamov
Browse files

Catalog | feat: add register page

parent 783d30fb
Loading
Loading
Loading
Loading
+9 −0
Original line number Diff line number Diff line
'use client';

import { Preloader } from '@/vendor';

const Loading = () => {
  return <Preloader colorItem="" />;
};

export default Loading;
+14 −0
Original line number Diff line number Diff line
import { Suspense } from 'react';

import { RegisterPage } from '@/page';

import Loading from './loading';

const Register = () => {
  return (
    <Suspense fallback={<Loading />}>
      <RegisterPage />
    </Suspense>
  );
};
export default Register;
+1 −0
Original line number Diff line number Diff line
export * from './register';
+159 −0
Original line number Diff line number Diff line
'use client';

import { useState } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { AnimatePresence } from 'framer-motion';
import { isAxiosError } from 'axios';
import { useRouter } from 'next/navigation';

import { ActionAuthButton, BackGroup, LayoutModal, Portal } from '@/shared';
import { AUTH_TITLES } from '@/utils';
import { useRegisterMutation } from '@/api-hooks';
import { IGetUserResponse } from '@/interfaces';

import * as Styled from './styled';
import { RegisterSchema, TRegisterSchema } from './schema';
import { Steps, AuthErrorModal } from './ui';

export type TStepName = 1 | 2 | 3 | 4;

export const Register = () => {
  const router = useRouter();
  const handleBackClick = () => {
    router.push('/');
  };
  const [step, setStep] = useState<TStepName>(1);
  const [isModalError, setIsModalError] = useState(false);
  const handleCloseModal = () => setIsModalError(false);

  const handleStepBack = () =>
    setStep((prev) => {
      const count = prev > 1 ? prev - 1 : prev;
      return count as TStepName;
    });

  const {
    control,
    watch,
    handleSubmit,
    formState: { isSubmitting },
    trigger,
  } = useForm<TRegisterSchema>({
    resolver: zodResolver(RegisterSchema),
    defaultValues: {
      step1: {
        firstName: '',
        lastName: '',
        surname: '',
        isIncognita: false,
      },
      step2: {
        birthday: '',
      },
      step3: {
        typeCard: '',
        numberCard: '',
        codeCard: '',
      },
      step4: {
        phone: '',
        email: '',
      },
    },
    mode: 'onTouched',
  });

  const isIncognitaValue = watch('step1.isIncognita');
  const birthdayValue = watch('step2.birthday');
  const CardTypeValue = watch('step3.typeCard');

  const handleSuccess = (data: IGetUserResponse) => {
    if (data.success) router.replace('/login');
  };

  const handleError = (error: Error) => {
    if (isAxiosError(error) && error.code === '404') router.replace('/404');
    if (isAxiosError(error) && error.code === '500')
      router.replace('/server-error');
    setIsModalError(true);
  };

  const { mutate } = useRegisterMutation(handleError, handleSuccess);

  const handleNext = async () => {
    const isValid = await trigger(`step${step}`);
    if (isValid) {
      setStep((prev) => {
        const count = prev < 4 ? prev + 1 : prev;
        return count as TStepName;
      });
    }
  };

  const onSubmit: SubmitHandler<TRegisterSchema> = (dataForm) => {
    mutate({
      ...dataForm.step1,
      ...dataForm.step2,
      ...dataForm.step3,
      ...dataForm.step4,
    });
  };

  return (
    <Styled.Register>
      <BackGroup handleBackClick={handleBackClick} title="Регистрация" />

      <Styled.FormWrapper>
        <Styled.RegisterForm onSubmit={handleSubmit(onSubmit)}>
          <Styled.Title>{AUTH_TITLES[step]}</Styled.Title>

          <Steps
            birthdayValue={birthdayValue}
            CardTypeValue={CardTypeValue}
            control={control}
            isIncognitaValue={isIncognitaValue}
            step={step}
          />

          {step !== 1 ? (
            <Styled.BackButtonWrapper>
              <ActionAuthButton
                disabled={isSubmitting}
                handleClick={handleStepBack}
                title="Назад"
                type="button"
              />
            </Styled.BackButtonWrapper>
          ) : null}

          <Styled.GoButtonWrapper>
            {step < 4 ? (
              <ActionAuthButton
                handleClick={handleNext}
                title="Go"
                type="button"
              />
            ) : (
              <ActionAuthButton
                disabled={isSubmitting}
                handleClick={handleNext}
                title={isSubmitting ? 'Загрузка..' : 'Go'}
                type="submit"
              />
            )}
          </Styled.GoButtonWrapper>
        </Styled.RegisterForm>
      </Styled.FormWrapper>
      <AnimatePresence>
        {isModalError && (
          <Portal selector="#modals">
            <LayoutModal>
              <AuthErrorModal handleClose={handleCloseModal} />
            </LayoutModal>
          </Portal>
        )}
      </AnimatePresence>
    </Styled.Register>
  );
};
+1 −0
Original line number Diff line number Diff line
export * from './schema-register-form';
Loading