Transition Effect from 'react-transition-group'

Transition

import React, {FC, Fragment, useEffect, useState} from 'react';
import { injectIntl } from 'react-intl';

import {
  Container,
  Row,
  Col,
} from 'reactstrap';
import classNames from 'classnames';

import { Transition } from 'react-transition-group';
import SpinnerCoffeeComponent from '../Spinner';
import CustomMDReactComponent from '../CustomMDReactComponent';
import { ANSWER_TEST_ANIMATION_TIME } from '../consts';
import TestItem from '../TestItem';
import HeaderFooter from '../HeaderFooter';
import { IHandleShowQuiz, ISelectedQuestion } from '../interfaces';

const AnswersTestCoffeeComponent: FC<AnswersTestCoffeeComponentProps> = ({
  handleShowQuiz,
  isSpinner,
  selectedQuestion = { text: 'Loading...', answers: [] },
  isLastQuestionCoffeeFinished,
  isSendUserTestToUserFinished,
  progresBarPercentForTests,
  currentPathname,
}) => {
  const [transition, setTransition] = useState(true);
  const [prevProps, setPrevProps] = useState({
    selectedQuestion,
    currentPathname,
    isLastQuestionCoffeeFinished,
    isSendUserTestToUserFinished,
  });
  const handleSelectAnswer = ({ ...rest }) => {
    setTransition(false);
    handleShowQuiz(rest as IHandleShowQuiz);
  }

  useEffect(() => {
    if (selectedQuestion.text !== prevProps.selectedQuestion.text) {
      setPrevProps({
        selectedQuestion, currentPathname, isLastQuestionCoffeeFinished, isSendUserTestToUserFinished,
      });
    }
    if (!transition) {
      setTransition(true);
    }
  }, [selectedQuestion]);


  let resultsRender: JSX.Element[] = [];
  if (selectedQuestion.answers) {
    resultsRender = selectedQuestion.answers.map((answer) => {
      const id = Object.keys(answer)[0];
      const answerValue = Object.values(answer)[0];
      return (
        <TestItem
          id={id}
          onClick={handleSelectAnswer}
          callback={() => {
            setTransition(true);
          }}
          answerValue={answerValue}
          key={id}
        />
      );
    });
  }

  const testProgress = {
    width: `${progresBarPercentForTests}%`,
  };

  const text = !transition ? prevProps.selectedQuestion.text : selectedQuestion.text;
  const isLastQuestionCoffeeDone = !transition ? prevProps.isLastQuestionCoffeeFinished : isLastQuestionCoffeeFinished;
  const isSendUserTestToUserDone = !transition ? prevProps.isSendUserTestToUserFinished : isSendUserTestToUserFinished;

  return isSpinner ? (
    <SpinnerCoffeeComponent
      isLastQuestionCoffeeFinished={isLastQuestionCoffeeDone}
    />
  )
    : (
      <Container id="frame-root" fluid>

        <Row className="coffee-test l-answers-test-page text-center mx-0 flex-center margin-bottom-10px margin-top-75px">
          <Col className="px-0 mx-auto">
            { !isLastQuestionCoffeeFinished && isSendUserTestToUserDone && (
            <Fragment>
              {/* question text */}
              <Transition appear in={transition} timeout={ANSWER_TEST_ANIMATION_TIME}>
                {state => {
                  const className = classNames({
                    'fade-out disabled-clicks': state === 'exiting' || state === 'exited',
                    'fade-in': state === 'entering',
                  });

                  return (
                    <div className={`${className}`}>
                      <Row className="justify-content-center minh-69px align-items-center text-center mx-auto question-container margin-top-22px margin-bottom-23px position-relative">
                        <Col className="coffee-font-sh2 px-0 mx-0 px-0">
                          <CustomMDReactComponent text={text || 'Loading...'} />
                        </Col>
                      </Row>
                    </div>
                  );
                }}
              </Transition>
              {/* progress bar */}
              <div className="padding-x-7px">
                <div className="coffee-progress-bar-container margin-bottom-20px px-0 mx-auto">
                  <div className="coffee-progress-bar" style={testProgress} />
                </div>
              </div>
              {/* question answers */}
              <Transition appear in={transition} timeout={ANSWER_TEST_ANIMATION_TIME}>
                {state => {
                  const className = classNames({
                    'fade-out disabled-clicks': state === 'exiting' || state === 'exited',
                    'fade-in': state === 'entering',
                  });

                  return (
                    <div className={`${className}`}>
                      <Row className="justify-content-center answers-coffee no-gutters mx-auto">
                        {resultsRender}
                      </Row>
                    </div>
                  );
                }}
              </Transition>
            </Fragment>
            )}
          </Col>
        </Row>
      </Container>
    );
};

export { AnswersTestCoffeeComponent as AnswersTestCoffeeComponentWithoutMemo };
export default injectIntl(React.memo(HeaderFooter(AnswersTestCoffeeComponent)));