ProfileForm.tsx

// eslint-disable-next-line object-curly-newline
import { Avatar, Box, Button, Container, Typography } from '@material-ui/core';
import { Field, Form, Formik } from 'formik';
import { isNil } from 'lodash';
import React, { useEffect, useState } from 'react';
import { useQueryClient } from 'react-query';
import { Redirect } from 'react-router-dom';
import useRegister from '../hooks/useRegister';
import StyledTextField from './StyledTextField';

type FormValues = {
  roomNumber: string | undefined;
  studentCardNumber: string;
};

const ProfileForm: React.FC = () => {
  const { mutate: register, data, isError } = useRegister();
  const [redirect, setRedirect] = useState(false);
  const client = useQueryClient();

  useEffect(() => {
    if (data && !isError) {
      client.invalidateQueries('me');
      setRedirect(true);
    }
  }, [data, isError, client]);
  return (
    <Container
      style={{
        padding: '15px',
        width: '500px',
        borderRadius: '8px',
      }}
    >
      <Formik
        initialValues={{ roomNumber: '', studentCardNumber: '' } as FormValues}
        onSubmit={async ({ roomNumber, studentCardNumber }): Promise<void> => {
          if (!isNil(roomNumber) && !isNil(studentCardNumber)) {
            await register({ roomNumber: Number(roomNumber), studentCardNumber });
          }
        }}
      >
        <Form>
          <Box
            fontWeight="fontWeightBold"
            display="flex"
            justifyContent="space-between"
            alignItems="center"
            pl={2}
          >
            <Typography variant="h5" component="h5" color="textPrimary">
              Profilom
            </Typography>
          </Box>
          <Box display="flex" justifyContent="center" my={3}>
            <Avatar
              alt="Profile image"
              variant="rounded"
              style={{ width: '200px', height: '200px' }}
            />
          </Box>
          <Box px={1} mt={2} mb={1}>
            <Box my={1}>
              <Field
                as={StyledTextField}
                id="studentCardNumber"
                name="studentCardNumber"
                label="Diákigazolvány szám"
                variant="outlined"
                color="primary"
                fullWidth
                size="small"
              />
            </Box>
            <Box my={1}>
              <Field
                as={StyledTextField}
                id="roomNumber"
                name="roomNumber"
                type="number"
                label="Szobaszám"
                variant="outlined"
                color="secondary"
                fullWidth
                size="small"
              />
            </Box>
            <Box display="flex" justifyContent="flex-end" mt={3}>
              <Button type="submit" variant="contained">
                Mentés
              </Button>
            </Box>
          </Box>
        </Form>
      </Formik>
      {redirect && <Redirect to="/" />}
    </Container>
  );
};

export default ProfileForm;