gistfile1.txt

import { ParsedUrlQuery } from 'querystring';
import { ServerResponse } from 'http';

import * as React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core';
import { Trans, useTranslation } from 'react-i18next';
import { Form } from 'react-final-form';
import { useRouter } from 'next/router';

import Layout from '../components/Layout';
import FanStepper from '../components/FanStepper';
import FanStep from '../components/FanStep';
import FanStepLabel from '../components/FanStepLabel';
import RegisterLoginForm from '../components/RegisterLoginForm';
import RegisterPersonalDataForm from '../components/RegisterPersonalDataForm';
import RegisterAdditionalDataForm from '../components/RegisterAdditionalDataForm';
import RegisterSuccessForm from '../components/RegisterSuccessForm';
import {PersonRecord} from '../types';

interface StepperStep {
  [index: string]: number;
  login: number;
  personal: number;
  additional: number;
  success: number;
}

interface FormContent {
  [index: string]: React.ReactNode;
}

type RegisterAttributes = PersonRecord['attributes'] & {
  isAgreed: boolean;
  password: string;
  repeatPassword: string;
  email: string;
  familyName?: string;
}

enum Step {
  LOGIN = 'login',
  PERSONAL = 'personal',
  ADDITIONAL = 'additional',
  SUCCESS = 'success',
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    stepTitle: {
      fontSize: 21,
      fontWeight: 700,
      marginTop: 20,
      color: theme.palette.primary.main,
      textAlign: 'center',

      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
    formContainer: {
      maxWidth: 450,
      margin: '0 auto',

      [theme.breakpoints.up('md')]: {
        marginTop: 50,
      },
    },
  }),
);

const Register = () => {
  const classes = useStyles();
  const { t } = useTranslation();
  const router = useRouter();

  const contents = {
    [Step.LOGIN]: <RegisterLoginForm />,
    [Step.PERSONAL]: <RegisterPersonalDataForm />,
    [Step.ADDITIONAL]: <RegisterAdditionalDataForm />,
    [Step.SUCCESS]: <RegisterSuccessForm />,
  };

  const steps: React.ReactNode[] = [
    <Trans key={1}>Логин</Trans>,
    <Trans key={2}>Персональные данные</Trans>,
    <Trans key={3}>Дополнительное</Trans>,
    <Trans key={4}>Готово</Trans>,
  ];

  const currentStep = {
    [Step.LOGIN]: 0,
    [Step.PERSONAL]: 1,
    [Step.ADDITIONAL]: 2,
    [Step.SUCCESS]: 4,
  };

  const currentForm: string = router.query.step
    ? router.query.step
    : Step.LOGIN;
    
  const activeStep: number = router.query.step
    ? currentStep[router.query.step]
    : 0;

  const currentTitle: React.ReactNode = steps[activeStep];

  const onSubmit = (values: RegisterAttributes) => {
    const { query } = router;

    if (!query.step || query.step === Step.LOGIN) {
      if (values.isAgreed) {
        router.push('/register?step=personal');
      }
    }
  };

  return (
    <Layout title={t('Регистрация')}>
      <FanStepper activeStep={activeStep}>
        {steps &&
          steps.map((label, i) => (
            <FanStep key={i}>
              <FanStepLabel>{label}</FanStepLabel>
            </FanStep>
          ))}
      </FanStepper>

      {currentTitle ? (
        <h2 className={classes.stepTitle}>{currentTitle}</h2>
      ) : null}

      <Form onSubmit={onSubmit}>
        {({ handleSubmit }) => (
          <form className={classes.formContainer} onSubmit={handleSubmit}>
            {contents[currentForm]}
          </form>
        )}
      </Form>
    </Layout>
  );
};

interface TypesgetInitialProps {
  query: ParsedUrlQuery;
  res: ServerResponse;
}

Register.getInitialProps = ({ query, res }: TypesgetInitialProps) => {
  if (query.step && query.step !== Step.LOGIN && res) {
    res.writeHead(302, { Location: '/register' });
    res.end();
  }

  return {};
};

export default Register;