Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6830 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6830 Rev 6862
Línea 1... Línea -...
1 
/* eslint-disable react/prop-types */
 - 
 
2 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
3 
import { axios } from "../../../../../utils";
 2 
import { axios } from '../../utils'
4 
import { addNotification } from "../../../../../redux/notification/notification.actions";
 3 
import { addNotification } from '../../redux/notification/notification.actions'
5 
import EastIcon from '@mui/icons-material/East';
 4 
import EastIcon from '@mui/icons-material/East'
- 
 
 5 
 
6 
import AddMemberModal from '../../../../../shared/helpers/group-members-helper/AddMemberModal'
 6 
import Avatar from '../UI/AvatarImage'
7 
import MembersModal from '../../../../../shared/helpers/group-members-helper/MembersModal'
 7 
import MembersModal from '../modals/MembersModal'
8 
import Avatar from "../../../../../shared/Avatar/Avatar";
 8 
import AddMemberModal from '../modals/AddMemberModal'
Línea 9... Línea 9...
9 
 
 9 
 
10 
const Members = ({ groupId }) => {
 10 
const Members = ({ groupId }) => {
11 
    const [members, setMembers] = useState([])
 11 
  const [members, setMembers] = useState([])
12 
    const [addModalShow, setAddModalShow] = useState(false);
 12 
  const [addModalShow, setAddModalShow] = useState(false)
13 
    const [showMembersModal, setShowMembersModal] = useState(false);
 13 
  const [showMembersModal, setShowMembersModal] = useState(false)
14 
    const [linkInvite, setLinkInvite] = useState('')
 14 
  const [linkInvite, setLinkInvite] = useState('')
15 
 
 15 
 
16 
    const load = () => {
 16 
  const load = () => {
17 
        axios.get(`/helpers/group-members/${groupId}`)
 - 
 
18 
            .then(({ data }) => {
 17 
    axios.get(`/helpers/group-members/${groupId}`).then(({ data }) => {
19 
                if (data.success) {
 18 
      if (data.success) {
20 
                    setMembers(data.data.items);
 19 
        setMembers(data.data.items)
21 
                    setLinkInvite(data.data.link_invite)
 20 
        setLinkInvite(data.data.link_invite)
22 
                }
 21 
      }
23 
            });
 22 
    })
24 
    }
 23 
  }
25 
 
 24 
 
26 
    useEffect(() => load(), []);
 25 
  useEffect(() => load(), [])
27 
 
 26 
 
28 
    const handleAction = (url) => {
 27 
  const handleAction = (url) => {
- 
 
 28 
    const params = new FormData()
29 
        const params = new FormData()
 29 
    axios
30 
        axios.post(url, params)
 30 
      .post(url, params)
31 
            .then(({ data }) => {
 31 
      .then(({ data }) => {
32 
                if (!data.success) {
 32 
        if (!data.success) {
33 
                    return addNotification({ style: 'danger', msg: data.data })
 33 
          return addNotification({ style: 'danger', msg: data.data })
34 
                }
 - 
 
35 
                addNotification({ style: 'success', msg: 'Accion realizada exitosamente' })
 34 
        }
36 
                load()
 35 
        addNotification({
37 
            })
 36 
          style: 'success',
38 
            .catch(err => console.log('>>: err > ', err))
 37 
          msg: 'Accion realizada exitosamente',
39 
    }
 - 
 
40 
 
 - 
 
41 
    const closeAddModal = () => {
 - 
 
42 
        setAddModalShow(false)
 38 
        })
- 
 
 39 
        load()
- 
 
 40 
      })
43 
        load()
 41 
      .catch((err) => console.log('>>: err > ', err))
- 
 
 42 
  }
- 
 
 43 
 
- 
 
 44 
  const closeAddModal = () => {
- 
 
 45 
    setAddModalShow(false)
- 
 
 46 
    load()
44 
    }
 47 
  }
45 
 
 48 
 
46 
    const openModal = (e) => {
 49 
  const openModal = (e) => {
47 
        e.preventDefault();
 50 
    e.preventDefault()
48 
        setShowMembersModal(true)
 51 
    setShowMembersModal(true)
49 
    }
 52 
  }
50 
 
 53 
 
51 
    return (
 54 
  return (
52 
        <>
 55 
    <>
53 
            <AddMemberModal
 56 
      <AddMemberModal
54 
                isShow={addModalShow}
 57 
        isShow={addModalShow}
55 
                handleClose={closeAddModal}
 58 
        handleClose={closeAddModal}
56 
                linkInvite={linkInvite}
 59 
        linkInvite={linkInvite}
57 
            />
 60 
      />
58 
            <MembersModal
 61 
      <MembersModal
59 
                isShow={showMembersModal}
 62 
        isShow={showMembersModal}
60 
                handleClose={() => setShowMembersModal(!showMembersModal)}
 63 
        handleClose={() => setShowMembersModal(!showMembersModal)}
61 
                members={members}
 64 
        members={members}
62 
                handleAction={handleAction}
 65 
        handleAction={handleAction}
63 
            />
 66 
      />
64 
            <div className='suggest__widget'>
 67 
      <div className="suggest__widget">
65 
                <div className="linked__widget-header">
 68 
        <div className="linked__widget-header">
66 
                    <h3>{members.length} Miembros</h3>
 69 
          <h3>{members.length} Miembros</h3>
67 
                </div>
 70 
        </div>
68 
                <div className="members-image__list">
 71 
        <div className="members-image__list">
- 
 
 72 
          {members.slice(0, 4).map((member) => {
69 
                    {members.slice(0, 4).map((member) => {
 73 
            return (
70 
                        return <Avatar
 74 
              <Avatar
71 
                            key={member.name}
 75 
                key={member.name}
72 
                            imageUrl={member.image}
 76 
                imageUrl={member.image}
73 
                            size='lg'
 77 
                size="lg"
74 
                            name={member.name}
 78 
                name={member.name}
- 
 
 79 
              />
75 
                        />
 80 
            )
76 
                    })}
 81 
          })}
77 
                </div>
 82 
        </div>
78 
                {linkInvite &&
 83 
        {linkInvite && (
79 
                    <button
 84 
          <button
80 
                        onClick={() => setAddModalShow(!addModalShow)}
 85 
            onClick={() => setAddModalShow(!addModalShow)}
81 
                        className="button btn btn-primary ml-3"
 86 
            className="button btn btn-primary ml-3"
82 
                    >
 87 
          >
83 
                        Invitar miembros
 88 
            Invitar miembros
84 
                    </button>
 89 
          </button>
85 
                }
 90 
        )}
86 
                <a className="load__suggest" onClick={(e) => openModal(e)}>
 91 
        <a className="load__suggest" onClick={(e) => openModal(e)}>
87 
                    <span>Ver más</span>
 92 
          <span>Ver más</span>
88 
                    <EastIcon />
 93 
          <EastIcon />
89 
                </a>
 94 
        </a>
90 
            </div>
 95 
      </div>
91 
        </>
 96 
    </>
92 
    );
 97 
  )
Línea 93... Línea 98...
93 
};
 98 
}