Footer de envio

Footer.ts

import React, { RefObject, useMemo, useState } from 'react';

import { FormHandles } from '@unform/core';
import CancellationModal from '../CancellationModal';
import Button from '../Button';

import { useStepForm } from '../../hooks/StepForm';
import { Steps } from '../../hooks/types';

import { Container, GroupButton, ButtonLink } from './styles';

const Footer: React.FC<{
  form?: RefObject<FormHandles>;
}> = ({ form }) => {
  const { step } = useStepForm();

  const [isCancel, setIsCancel] = useState(false);

  const forwardLocation = useMemo(() => {
    const nextPage = Object.values(Steps)[step.key + 1];

    return nextPage?.url;
  }, [step]);

  const backwardLocation = useMemo(() => {
    const previousPage = Object.values(Steps)[step.key - 1];

    return previousPage?.url;
  }, [step.key]);

  return (
    <Container>
      <Button
        type="button"
        className="cancelButton"
        onClick={() => setIsCancel(true)}
      >
        Cancelar
      </Button>
      {isCancel ? (
        <CancellationModal onClose={() => setIsCancel(false)} />
      ) : null}
      <GroupButton>
        {backwardLocation && (
          <ButtonLink className="backwardButton">Voltar</ButtonLink>
        )}
        {forwardLocation && (
          <ButtonLink
            className="forwardButton"
            onClick={() => {
              form?.current?.submitForm();
            }}
          >
            Avançar
          </ButtonLink>
        )}
      </GroupButton>
    </Container>
  );
};

export default Footer;