text: import React, { Fragment, useEffect } from 'react';
  import PropTypes from 'prop-types';
  import { Link } from 'react-router-dom';
  import { connect } from 'react-redux';
  import Spinner from '../layout/Spinner';
  import ProfileTop from './ProfileTop';
  import ProfileAbout from './ProfileAbout';
  import { getProfileById } from '../../actions/profile';
  
  const Profile = ({ getProfileById, profile: { profile }, auth, match }) => {
    useEffect(() => {
      getProfileById(match.params.id);
    }, [getProfileById, match.params.id]);
  
    return (
      <Fragment>
        {profile === null ? (
          <Spinner />
        ) : (
          <Fragment>
            <Link to="/profiles" className="btn btn-light"  title="Back to Profiles">
              Back To Profiles
            </Link>
            {auth.isAuthenticated &&
              auth.loading === false &&
              auth.user._id === profile.user._id && (
                <Link to="/edit-profile" className="btn btn-dark1"  title="Edit Profile">
                  Edit Profile
                </Link>
              )}
            <div className="profile-grid my-1">
              <ProfileTop profile={profile} />
              <ProfileAbout profile={profile} />
            
            </div>
          </Fragment>
        )}
      </Fragment>
    );
  };
  
  Profile.propTypes = {
    getProfileById: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired
  };
  
  const mapStateToProps = (state) => ({
    profile: state.profile,
    auth: state.auth
  });
  
  export default connect(mapStateToProps, { getProfileById })(Profile);
  