import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

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

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

const UserProfile = () => {
  const dispatch = useDispatch();
  const modules = useSelector((state) => state.userStore.get("modules"));
  const modulesLoading = useSelector((state) =>
    state.userStore.get("modulesLoading")
  );

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

  return (
    <div>
      <UserEdit />
      <PolochonList />
      <Modules modules={modules} isLoading={modulesLoading} />
    </div>
  );
};

export default UserProfile;