Proyectos de Subversion LeadersLinked - Antes de 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 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