Empty route

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import loader from 'images/hire-loader.gif';
import { Redirect, matchPath } from 'react-router-dom';
import { ROLE_INTERVIEWER } from 'containers/App/constants';

function EmptyRouteComponent({
  loggedInUserInfo,
  history,
  location,
  dispatchLoggedInUserInfo,
}) {
  const userLoggedIn =
    loggedInUserInfo && Object.entries(loggedInUserInfo).length;
  const defaultRedirectRoute =
    userLoggedIn &&
    loggedInUserInfo &&
    loggedInUserInfo.roles &&
    loggedInUserInfo.roles[0].name !== ROLE_INTERVIEWER
      ? '/home'
      : '/calendar';

  useEffect(() => {
    if (userLoggedIn) {
      if (
        matchPath(location.pathname, {
          path: '/',
          exact: true,
          strict: false,
        })
      ) {
        history.push(defaultRedirectRoute);
      }
    } else {
      dispatchLoggedInUserInfo();
    }
  }, [loggedInUserInfo]);

  return !userLoggedIn ? (
    <div
      style={{
        height: '80vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <img
        style={{
          border: 'solid 2px whitesmoke',
          height: '150px',
        }}
        src={loader}
        alt=""
      />
    </div>
  ) : (
    <Redirect to={defaultRedirectRoute} />
  );
}

EmptyRouteComponent.propTypes = {
  loggedInUserInfo: PropTypes.object,
  location: PropTypes.object,
  history: PropTypes.object,
  dispatchLoggedInUserInfo: PropTypes.func,
};

export default EmptyRouteComponent;