Rev 7263 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import styled from 'styled-components'
import Avatar from '@mui/material/Avatar'
import IconButton from '@mui/material/IconButton'
import GroupRemoveIcon from '@mui/icons-material/GroupRemove'
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
import Spinner from '../UI/Spinner'
import LoaderContainer from '../UI/LoaderContainer'
import WidgetLayout from '../widgets/WidgetLayout'
const ContactContainer = styled(WidgetLayout)`
padding: 1rem;
position: relative;
flex-grow: 1;
ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 300px;
overflow: auto;
margin-top: 1rem;
}
`
const ContactTemplate = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
.info {
display: flex;
align-items: center;
gap: 0.5rem;
}
h3 {
font-size: 1rem;
color: var(--subtitle-color);
font-weight: 600;
}
`
const GroupMembers = ({ group, changeTab }) => {
const { url_get_contact_group_list } = group
const [members, setMembers] = useState([])
const [loading, setLoading] = useState(true)
const getMembers = async () => {
setLoading(true)
const response = await axios.get(url_get_contact_group_list)
const { success, data } = response.data
if (!success) {
return
}
setMembers(data)
setLoading(false)
}
const handleRemoveMember = async (remove_url) => {
setLoading(true)
const response = await axios.post(remove_url)
const { success } = response.data
if (!success) {
return
}
await getMembers()
setLoading(false)
}
useEffect(() => {
getMembers()
}, [])
return (
<ContactContainer>
<IconButton onClick={() => changeTab('DEFAULT')}>
<ArrowBackIosIcon />
</IconButton>
<ul>
{members.map((member, i) => (
<li key={i}>
<GroupMembers.Item
{...member}
onClick={() => handleRemoveMember(member.url_remove_from_group)}
/>
</li>
))}
</ul>
{loading && (
<LoaderContainer>
<Spinner />
</LoaderContainer>
)}
</ContactContainer>
)
}
const Item = ({ image, name, onClick }) => {
return (
<ContactTemplate>
<div className="info">
<Avatar src={image} alt="user_image" />
<span>{name}</span>
</div>
<IconButton onClick={onClick}>
<GroupRemoveIcon />
</IconButton>
</ContactTemplate>
)
}
GroupMembers.Item = Item
export default GroupMembers