import React, {useState} from "react";
import useGroups from "../Hooks/group";
import Group from "./Group";
import Loading from "./Loading";
import GroupAddModal from "./Modals/GroupAddModal";
import {Button, FormGroup} from "reactstrap";

function Groups() {
  const groups = useGroups();
  const [addModal, setAddModal] = useState(false);

  if (groups === null) {
    return <Loading/>;
  }

  return (
    <div>
      {groups.map(group => <Group key={group.id} {...group} />)}
      <FormGroup className="free-buttons">
        <Button color="success" onClick={() => setAddModal(true)} >Ny gruppe</Button>
      </FormGroup>
      {addModal && <GroupAddModal onClose={() => setAddModal(false)}/>}
    </div>
  );
}

export default Groups;