import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { useLocation } from "react-router-dom";
import './style.less';

export default (props) => {
  // const { location } = props;
  const location = useLocation();
  const currentURL = location.pathname + location.search;

  return (
    <TransitionGroup component={null}>
      <CSSTransition 
        key={currentURL}
        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
        classNames="page-fade"
      >
        <div style={{ height: '100%' }}>
          {props.children}
        </div>
      </CSSTransition>
    </TransitionGroup>
  );
}
