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);