text: import React from 'react';
  import { connect } from 'react-redux';
  import { checkAuth } from '../../actions/actionCreators/auth';
  import LoadingSpinner from '../../components/LoadingSpinner';
  import Login from './Login';
  
  function withAuth(WrappedComponent) {
    class Wrapper extends React.Component {
      componentDidMount() {
        this.props.dispatchCheckAuth();
      }
  
      render() {
        if (!this.props.authChecked) {
          return <LoadingSpinner />;
        } else if (!this.props.loggedIn) {
          return (
            <>
              <p className='w-11/12 max-w-2x1 mx-auto my-4 text-red-500'>You need to login to view this page</p>
              <Login />
            </>
          );
        } else {
          return <WrappedComponent {...this.props} />;
        }
      }
    }
  
    const mapStateToProps = ({
      auth: { authChecked, loggedIn, currentUser }
    }) => {
      return { authChecked, loggedIn, currentUser };
    };
  
    const mapDispatchToProps = (dispatch) => {
      return {
        dispatchCheckAuth: () => dispatch(checkAuth())
      };
    };
  
    return connect(mapStateToProps, mapDispatchToProps)(Wrapper);
  }
  
  export default withAuth;