Catalog | feat: add register page

'use client';

import { Preloader } from '@/vendor';

const Loading = () => {

  return <Preloader colorItem="" />;

};

export default Loading;

import { Suspense } from 'react';

import { RegisterPage } from '@/page';

import Loading from './loading';

const Register = () => {

  return (

    <Suspense fallback={<Loading />}>

      <RegisterPage />

    </Suspense>

  );

};

export default Register;

export * from './register';

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

  );

};

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