Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7263 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7260 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
7263 stevensc 3 
import styled from 'styled-components'
4 
import Avatar from '@mui/material/Avatar'
7260 stevensc 5 
import IconButton from '@mui/material/IconButton'
6 
import GroupRemoveIcon from '@mui/icons-material/GroupRemove'
7263 stevensc 7 
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
7260 stevensc 8 
 
9 
import Spinner from '../UI/Spinner'
10 
import LoaderContainer from '../UI/LoaderContainer'
7263 stevensc 11 
import WidgetLayout from '../widgets/WidgetLayout'
7260 stevensc 12 
 
7263 stevensc 13 
const ContactContainer = styled(WidgetLayout)`
14 
  padding: 1rem;
15 
  position: relative;
16 
  flex-grow: 1;
17 
  ul {
18 
    display: flex;
19 
    flex-direction: column;
20 
    gap: 0.5rem;
21 
    max-height: 300px;
22 
    overflow: auto;
7264 stevensc 23 
    margin-top: 1rem;
7263 stevensc 24 
  }
25 
`
26 
 
27 
const ContactTemplate = styled.div`
28 
  display: flex;
29 
  align-items: center;
7264 stevensc 30 
  justify-content: space-between;
7263 stevensc 31 
  gap: 0.5rem;
7264 stevensc 32 
  .info {
33 
    display: flex;
34 
    align-items: center;
35 
    gap: 0.5rem;
36 
  }
7263 stevensc 37 
  h3 {
38 
    font-size: 1rem;
39 
    color: var(--subtitle-color);
7264 stevensc 40 
    font-weight: 600;
7263 stevensc 41 
  }
42 
`
43 
 
44 
const GroupMembers = ({ group, changeTab }) => {
7260 stevensc 45 
  const { url_get_contact_group_list } = group
46 
  const [members, setMembers] = useState([])
47 
  const [loading, setLoading] = useState(true)
48 
 
49 
  const getMembers = async () => {
50 
    setLoading(true)
51 
    const response = await axios.get(url_get_contact_group_list)
7263 stevensc 52 
    const { success, data } = response.data
53 
    if (!success) {
54 
      return
7260 stevensc 55 
    }
7263 stevensc 56 
    setMembers(data)
7260 stevensc 57 
    setLoading(false)
58 
  }
59 
 
60 
  const handleRemoveMember = async (remove_url) => {
61 
    setLoading(true)
62 
    const response = await axios.post(remove_url)
7263 stevensc 63 
    const { success } = response.data
64 
    if (!success) {
65 
      return
7260 stevensc 66 
    }
67 
    await getMembers()
68 
    setLoading(false)
69 
  }
70 
 
71 
  useEffect(() => {
72 
    getMembers()
73 
  }, [])
74 
 
75 
  return (
7263 stevensc 76 
    <ContactContainer>
77 
      <IconButton onClick={() => changeTab('DEFAULT')}>
78 
        <ArrowBackIosIcon />
79 
      </IconButton>
7260 stevensc 80 
      <ul>
81 
        {members.map((member, i) => (
82 
          <li key={i}>
83 
            <GroupMembers.Item
84 
              {...member}
85 
              onClick={() => handleRemoveMember(member.url_remove_from_group)}
86 
            />
87 
          </li>
88 
        ))}
89 
      </ul>
90 
      {loading && (
91 
        <LoaderContainer>
92 
          <Spinner />
93 
        </LoaderContainer>
94 
      )}
7263 stevensc 95 
    </ContactContainer>
7260 stevensc 96 
  )
97 
}
98 
 
99 
const Item = ({ image, name, onClick }) => {
100 
  return (
7263 stevensc 101 
    <ContactTemplate>
7264 stevensc 102 
      <div className="info">
103 
        <Avatar src={image} alt="user_image" />
104 
        <span>{name}</span>
105 
      </div>
7260 stevensc 106 
      <IconButton onClick={onClick}>
107 
        <GroupRemoveIcon />
108 
      </IconButton>
7263 stevensc 109 
    </ContactTemplate>
7260 stevensc 110 
  )
111 
}
112 
 
113 
GroupMembers.Item = Item
114 
 
115 
export default GroupMembers