Find anti pattern

FC.tsx

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

import PaymentCardBinding from '../PaymentCardBinding';

import ErrorBoundary from '../../componets/ErrorBoundary';

import ModalWrapper from '../../componets/ModalWrapper';

import {
  paymentCheckBindedCardsRequest,
  paymentShowFormInc,
} from '../../../states/Payment/state/duck';
import {
  isFetchingBindedCards as isFetchingBindedCardsSelector,
  dataBindedCards as dataBindedCardsSelector,
  showFormCounter as showFormCounterSelector,
} from '../../../states/Payment/state/selectors';
import { pathname as pathnameSelector } from '../../../states/Router/state/selectors';

import { useWindowSize } from '../../hooks/useWindowSize';

import { DEVICE_MOBILE_WIDTH_480 } from '../../constants/Defaults/constants';

const initState = {
  isModalVisible: true,
};

/**
 * Враппер для Формы привязки карты
 *
 * @returns
 */
const PaymentCardWrapper: React.FC = () => {
  const dispatch = useDispatch();
  const isFetchingBindedCards = useSelector(isFetchingBindedCardsSelector);
  const dataBindedCards: Array<any> = useSelector(dataBindedCardsSelector);
  const showFormCounter = useSelector(showFormCounterSelector);
  const pathname = useSelector(pathnameSelector);

  const [state, setState] = React.useState(initState);
  const { isModalVisible } = state;

  function handleChangeState(name: string, value: number | boolean | string) {
    setState(prevState => ({ ...prevState, [name]: value }));
  }

  const handleModalStatusChange = React.useCallback((status: boolean) => {
    if (!status) {
      dispatch({
        type: paymentShowFormInc.toString(),
      });
    }

    handleChangeState('isModalVisible', status);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const windowSize = useWindowSize();
  const { width = 0 } = windowSize;

  let isLessThan480 = false;

  if (width < DEVICE_MOBILE_WIDTH_480) {
    isLessThan480 = true;
  }

  // cdM
  React.useEffect(() => {
    dispatch({
      type: paymentCheckBindedCardsRequest.toString(),
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // cdM
  React.useEffect(() => {
    if (showFormCounter > 0) {
      handleModalStatusChange(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // cdM
  React.useEffect(() => {
    if (showFormCounter === 0 && pathname === '/help/support') {
      handleModalStatusChange(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      {isFetchingBindedCards ? null : (
        <>
          {dataBindedCards.length === 0 && (
            <ModalWrapper
              isModalVisible={isModalVisible}
              handleModalStatusChange={() => handleModalStatusChange(false)}
              width={isLessThan480 ? 313 : 450}
            >
              <ErrorBoundary>
                <PaymentCardBinding
                  handleModalStatusChange={() => handleModalStatusChange(false)}
                />
              </ErrorBoundary>
            </ModalWrapper>
          )}
        </>
      )}
    </>
  );
};

export default PaymentCardWrapper;