Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3688 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3688 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from "react";
 1 
import React, { useState } from 'react';
2 
import { useDispatch } from "react-redux";
 2 
import { useDispatch } from 'react-redux';
3 
import { Avatar, AvatarGroup, Button } from "@mui/material";
 3 
import { Avatar, AvatarGroup, Button } from '@mui/material';
4 
import { East } from "@mui/icons-material";
 4 
import { East } from '@mui/icons-material';
5 
 
 5 
 
6 
import { axios } from "@utils";
 6 
import { axios } from '@utils';
7 
import { useFetch } from "@hooks";
 7 
import { useFetch } from '@hooks';
8 
import { addNotification } from "@store/notification/notification.actions";
 8 
import { addNotification } from '@store/notification/notification.actions';
9 
 
 9 
 
10 
import Widget from "@components/UI/Widget";
 10 
import Widget from '@components/UI/Widget';
11 
import MembersModal from "@components/modals/MembersModal";
 11 
import MembersModal from '@components/modals/MembersModal';
12 
import AddMemberModal from "@components/modals/AddMemberModal";
 12 
import AddMemberModal from '@components/modals/AddMemberModal';
13 
 
 13 
 
14 
const Members = ({ id = "" }) => {
 14 
const Members = ({ id = '' }) => {
15 
  const {
 15 
  const {
16 
    data: { items: members, link_invite: linkInvite },
 16 
    data: { items: members, link_invite: linkInvite },
17 
    refetch,
 17 
    refetch
18 
  } = useFetch(`/helpers/group-members/${id}`);
 18 
  } = useFetch(`/helpers/group-members/${id}`);
19 
 
 19 
 
20 
  const [addModalShow, setAddModalShow] = useState(false);
 20 
  const [addModalShow, setAddModalShow] = useState(false);
21 
  const [showMembersModal, setShowMembersModal] = useState(false);
 21 
  const [showMembersModal, setShowMembersModal] = useState(false);
22 
 
 22 
 
23 
  const dispatch = useDispatch();
 23 
  const dispatch = useDispatch();
24 
 
 24 
 
25 
  const handleAction = (url) => {
 25 
  const handleAction = (url) => {
26 
    const params = new FormData();
 26 
    const params = new FormData();
27 
    axios
 27 
    axios
28 
      .post(url, params)
 28 
      .post(url, params)
29 
      .then((response) => {
 29 
      .then((response) => {
30 
        const { data, success } = response.data;
 30 
        const { data, success } = response.data;
31 
 
 31 
 
32 
        if (!success) {
 32 
        if (!success) {
33 
          throw new Error(data);
 33 
          throw new Error(data);
34 
        }
 34 
        }
35 
 
 35 
 
36 
        dispatch(addNotification({ style: "success", msg: data }));
 36 
        dispatch(addNotification({ style: 'success', msg: data }));
37 
      })
 37 
      })
38 
      .then(() => refetch())
 38 
      .then(() => refetch())
39 
      .catch((err) => {
 39 
      .catch((err) => {
40 
        dispatch(addNotification({ style: "danger", msg: err.message }));
 40 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
41 
      });
 41 
      });
42 
  };
 42 
  };
43 
 
 43 
 
44 
  const toggleAddMemberModal = () => setAddModalShow(!addModalShow);
 44 
  const toggleAddMemberModal = () => setAddModalShow(!addModalShow);
45 
 
 45 
 
46 
  const toggleMembersModal = () => setShowMembersModal(!showMembersModal);
 46 
  const toggleMembersModal = () => setShowMembersModal(!showMembersModal);
47 
 
 47 
 
48 
  return (
 48 
  return (
49 
    <>
 49 
    <>
50 
      <Widget>
 50 
      <Widget>
51 
        <Widget.Header title={`${members?.length ?? 0} Miembros`} />
 51 
        <Widget.Header title={`${members?.length ?? 0} Miembros`} />
52 
 
 52 
 
53 
        <Widget.Body>
 53 
        <Widget.Body>
54 
          <AvatarGroup max={5}>
 54 
          <AvatarGroup max={5}>
55 
            {members?.map(({ name, image }) => (
 55 
            {members?.map(({ name, image }) => (
56 
              <Avatar key={name} src={image} alt={name} />
 56 
              <Avatar key={name} src={image} alt={name} />
57 
            ))}
 57 
            ))}
58 
          </AvatarGroup>
 58 
          </AvatarGroup>
59 
          {linkInvite && (
 59 
          {linkInvite && (
60 
            <Button
 - 
 
61 
              color="primary"
 - 
 
62 
              onClick={toggleAddMemberModal}
 60 
            <Button color='primary' onClick={toggleAddMemberModal} sx={{ marginTop: 1 }}>
63 
              sx={{ marginTop: 1 }}
 - 
 
64 
            >
 - 
 
65 
              Invitar miembros
 61 
              Invitar miembros
66 
            </Button>
 62 
            </Button>
67 
          )}
 63 
          )}
68 
        </Widget.Body>
 64 
        </Widget.Body>
69 
        <Widget.Actions styles={{ padding: 0 }}>
 65 
        <Widget.Actions styles={{ padding: 0 }}>
70 
          <Button
 - 
 
71 
            onClick={toggleMembersModal}
 66 
          <Button onClick={toggleMembersModal} fullWidth sx={{ borderRadius: 0 }}>
72 
            fullWidth
 - 
 
73 
            sx={{ borderRadius: 0 }}
 - 
 
74 
          >
 - 
 
75 
            Ver más
 67 
            Ver más
76 
            <East />
 68 
            <East />
77 
          </Button>
 69 
          </Button>
78 
        </Widget.Actions>
 70 
        </Widget.Actions>
79 
      </Widget>
 71 
      </Widget>
80 
      <AddMemberModal
 72 
      <AddMemberModal
81 
        isShow={addModalShow}
 73 
        isShow={addModalShow}
82 
        handleClose={toggleAddMemberModal}
 74 
        handleClose={toggleAddMemberModal}
83 
        linkInvite={linkInvite}
 75 
        linkInvite={linkInvite}
84 
      />
 76 
      />
85 
      <MembersModal
 77 
      <MembersModal
86 
        isShow={showMembersModal}
 78 
        isShow={showMembersModal}
87 
        handleClose={toggleMembersModal}
 79 
        handleClose={toggleMembersModal}
88 
        members={members}
 80 
        members={members}
89 
        handleAction={handleAction}
 81 
        handleAction={handleAction}
90 
      />
 82 
      />
91 
    </>
 83 
    </>
92 
  );
 84 
  );
93 
};
 85 
};
94 
 
 86 
 
95 
export default Members;
 87 
export default Members;