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;

  }

`

const ContactTemplate = styled.div`

  display: flex;

  align-items: center;

  gap: 0.5rem;

  h3 {

    font-size: 1rem;

    color: var(--subtitle-color);

  }

`

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>

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

      <span>{name}</span>

      <IconButton onClick={onClick}>

        <GroupRemoveIcon />

      </IconButton>

    </ContactTemplate>

  )

}

GroupMembers.Item = Item

export default GroupMembers