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 { RegisterRecord } from '../types';

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

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

interface AnyObject {
  [key: string]: string | boolean;
}

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();

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

  const contents: FormContent = {
    [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: StepperStep = {
    [Step.LOGIN]: 0,
    [Step.PERSONAL]: 1,
    [Step.ADDITIONAL]: 2,
    [Step.SUCCESS]: 4,
  };

  const currentForm: string = router.query.step
    ? `${router.query.step}`
    : 'login';
  const activeStep: number = router.query.step
    ? currentStep[`${router.query.step}`]
    : 0;
  const currentTitle: React.ReactNode = steps[activeStep];

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

    if (!query.step || query.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 !== 'login' && res) {
    res.writeHead(302, { Location: '/register' });
    res.end();
  }

  return {};
};

export default Register;