Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Avatar, AvatarGroup, Button } from "@mui/material";
import { East } from "@mui/icons-material";
import { axios } from "@utils";
import { useFetch } from "@hooks";
import { addNotification } from "@store/notification/notification.actions";
import Widget from "@components/UI/Widget";
import MembersModal from "@components/modals/MembersModal";
import AddMemberModal from "@components/modals/AddMemberModal";
const Members = ({ id = "" }) => {
const {
data: { items: members, link_invite: linkInvite },
refetch,
} = useFetch(`/helpers/group-members/${id}`);
const [addModalShow, setAddModalShow] = useState(false);
const [showMembersModal, setShowMembersModal] = useState(false);
const dispatch = useDispatch();
const handleAction = (url) => {
const params = new FormData();
axios
.post(url, params)
.then((response) => {
const { data, success } = response.data;
if (!success) {
throw new Error(data);
}
dispatch(addNotification({ style: "success", msg: data }));
})
.then(() => refetch())
.catch((err) => {
dispatch(addNotification({ style: "danger", msg: err.message }));
});
};
const toggleAddMemberModal = () => setAddModalShow(!addModalShow);
const toggleMembersModal = () => setShowMembersModal(!showMembersModal);
return (
<>
<Widget>
<Widget.Header title={`${members?.length ?? 0} Miembros`} />
<Widget.Body>
<AvatarGroup max={5}>
{members?.map(({ name, image }) => (
<Avatar key={name} src={image} alt={name} />
))}
</AvatarGroup>
{linkInvite && (
<Button
color="primary"
onClick={toggleAddMemberModal}
sx={{ marginTop: 1 }}
>
Invitar miembros
</Button>
)}
</Widget.Body>
<Widget.Actions styles={{ padding: 0 }}>
<Button
onClick={toggleMembersModal}
fullWidth
sx={{ borderRadius: 0 }}
>
Ver más
<East />
</Button>
</Widget.Actions>
</Widget>
<AddMemberModal
isShow={addModalShow}
handleClose={toggleAddMemberModal}
linkInvite={linkInvite}
/>
<MembersModal
isShow={showMembersModal}
handleClose={toggleMembersModal}
members={members}
handleAction={handleAction}
/>
</>
);
};
export default Members;