text: import React, { useEffect } from 'react'
  import PropTypes from 'prop-types'
  import { connect } from 'react-redux';
  import { Link } from "react-router-dom"
  import { getCurrentProfile, deleteAccount } from "../../actions/profile"
  import Spinner from "../layout/Spinner";
  import DashboardActions from "./DashboardAction"
  import Education from "./Education"
  import Experience from "./Experience"
  
  const Dashboard = ({ getCurrentProfile, auth: { user }, profile: { profile, loading }, deleteAccount }) => {
  
    useEffect(() => {
      getCurrentProfile();
    }, [])
  
  
    return loading && profile === null ? <Spinner /> : <section className="container">
      <h1 className="large terxt-primary">Dashboard</h1>
      <p className="lead">
        <i className="fas fa-user"></i> Welcome {user && user.name}
      </p>
      {profile !== null ? <>
        <DashboardActions />
        <Experience experience={profile.experience} />
        <Education education={profile.education} />
        <div className="my-2">
          <button className="btn btn-danger" onClick={() => deleteAccount()}>
            <i className="fas fa-user-minus" /> Delete My Account
          </button>
        </div>
      </> : <>
        <p>You have not yet setup a profile, please add some info</p>
        <Link to="/create-profile" className="btn btn-primary my-1">Create Profile</Link >
      </>
      }
    </section>
  
  }
  
  Dashboard.propTypes = {
    getCurrentProfile: PropTypes.func.isRequired,
    deleteAccount: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    profile: PropTypes.object.isRequired
  }
  
  const mapStateToProps = (state) => ({
    auth: state.auth,
    profile: state.profile
  })
  
  export default connect(mapStateToProps, { getCurrentProfile, deleteAccount })(Dashboard)