import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { connect } from "react-redux"
import { Map } from "immutable"

import { PolochonList } from "../polochons/list"
import { UserEdit } from "./edit"

import { getUserModules } from "../../actions/users"
import Modules from "../modules/modules"

const mapStateToProps = (state) => ({
  modules : state.userStore.get("modules"),
  modulesLoading : state.userStore.get("modulesLoading"),
});

const mapDispatchToProps = { getUserModules }

const UserProfile = ({
  modules,
  modulesLoading,
  getUserModules

}) => {
  useEffect(() => {
    getUserModules();
  }, [getUserModules])

  return (
    <div>
      <UserEdit />
      <PolochonList />
      <Modules
        modules={modules}
        isLoading={modulesLoading}
      />
    </div>
  )
}
UserProfile.propTypes = {
  getUserModules: PropTypes.func.isRequired,
  modules: PropTypes.instanceOf(Map),
  modulesLoading: PropTypes.bool.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);