import PropTypes from "prop-types"; import React, { Component } from "react"; import { connect } from "react-redux"; import { Redirect, Route } from "react-router-dom"; import { Loader } from "semantic-ui-react"; import { sendGetSelfUserRequest } from "../../actions/user/saga.actions"; const propTypes = { userToken: PropTypes.string.isRequired, selfUser: PropTypes.object.isRequired, isSendingUserRequest: PropTypes.bool.isRequired, path: PropTypes.string.isRequired, component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]) .isRequired, dispatch: PropTypes.func.isRequired }; class PrivateRoute extends Component { componentWillMount() { const { dispatch, userToken, selfUser } = this.props; // If the user token exists and the self user object isn't loaded, dispatch if (userToken && Object.keys(selfUser).length === 0) { dispatch(sendGetSelfUserRequest()); } } render() { const { userToken, selfUser, isSendingUserRequest, component, ...rest } = this.props; // If the user token exists and // * self user object isn't loaded yet or // * we are still sending user request // show loading spinner if ( userToken && (Object.keys(selfUser).length === 0 || isSendingUserRequest) ) { return ; } // If the user exists but they aren't a client or provider yet, confirm-registration if ( userToken && Object.keys(selfUser).length && (!selfUser.client || !selfUser.provider) ) { return ; } return ( { if (!!userToken) return React.createElement(component, props); return ; }} /> ); } } PrivateRoute.propTypes = propTypes; const mapStateToProps = state => ({ userToken: state.auth.userToken, selfUser: state.user.selfUser, isSendingUserRequest: state.user.isSendingUserRequest }); export default connect(mapStateToProps)(PrivateRoute);