Proyectos de Subversion LeadersLinked - SPA

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 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 && <Spinner />}

    </ContactContainer>

  )

}

const Item = ({ member, onDelete }) => {

  const { image, name, url_remove_from_group } = member

  return (

    <ContactTemplate>

      <div className='info'>

        <Avatar src={image} alt='user_image' />

        <span>{name}</span>

      </div>

      {url_remove_from_group ? (

        <IconButton onClick={onDelete}>

          <GroupRemoveIcon />

        </IconButton>

      ) : null}

    </ContactTemplate>

  )

}

GroupMembers.Item = Item

export default GroupMembers