Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3736 stevensc 1 
import React from 'react';
3719 stevensc 2 
import { East } from '@mui/icons-material';
3 
 
3736 stevensc 4 
import { useAlert, useApi, useModal } from '@shared/hooks';
5 
import {
6 
  approveMember,
7 
  cancelInvitation,
8 
  getGroupMembers,
9 
  inviteMember,
10 
  rejectMember
11 
} from '@groups/services';
3719 stevensc 12 
 
3736 stevensc 13 
import {
14 
  Card,
15 
  CardHeader,
16 
  CardContent,
17 
  CardActions,
18 
  Button,
19 
  AvatarGroup,
20 
  Avatar,
21 
  SearchUserModal,
22 
  Spinner
23 
} from '@shared/components';
24 
import { MembersModal } from '@groups/components';
3719 stevensc 25 
 
3736 stevensc 26 
export function Members({ uuid = '' }) {
27 
  const { showSuccess, showError } = useAlert();
28 
  const { showModal, closeModal } = useModal();
29 
 
3719 stevensc 30 
  const {
3736 stevensc 31 
    data,
32 
    loading,
33 
    execute: getMembers
34 
  } = useApi(getGroupMembers, {
35 
    autoFetch: true,
36 
    autoFetchArgs: [uuid],
37 
    onError: (error) => showError(error.message)
38 
  });
3719 stevensc 39 
 
3736 stevensc 40 
  const { execute: invite } = useApi(inviteMember, {
41 
    onSuccess: (message) => {
42 
      showSuccess(message);
43 
      getMembers();
44 
    },
45 
    onError: (error) => {
46 
      showError(error.message);
47 
    }
48 
  });
3719 stevensc 49 
 
3736 stevensc 50 
  const { execute: approve } = useApi(approveMember, {
51 
    onSuccess: (message) => {
52 
      closeModal();
53 
      showSuccess(message);
54 
      getMembers();
55 
    },
56 
    onError: (error) => {
57 
      showError(error.message);
58 
    }
59 
  });
3719 stevensc 60 
 
3736 stevensc 61 
  const { execute: reject } = useApi(rejectMember, {
62 
    onSuccess: (message) => {
63 
      closeModal();
64 
      showSuccess(message);
65 
      getMembers();
66 
    },
67 
    onError: (error) => {
68 
      showError(error.message);
69 
    }
70 
  });
3719 stevensc 71 
 
3736 stevensc 72 
  const { execute: cancel } = useApi(cancelInvitation, {
73 
    onSuccess: (message) => {
74 
      closeModal();
75 
      showSuccess(message);
76 
      getMembers();
77 
    },
78 
    onError: (error) => {
79 
      showError(error.message);
80 
    }
81 
  });
3719 stevensc 82 
 
3736 stevensc 83 
  const handleInvite = () => {
84 
    showModal(
85 
      'Invitar miembros',
86 
      <SearchUserModal
87 
        renderAction={(user) => (
88 
          <Button color='primary' onClick={() => invite(data.link_invite, user.uuid)}>
89 
            Invitar
90 
          </Button>
91 
        )}
92 
      />
93 
    );
3719 stevensc 94 
  };
95 
 
3736 stevensc 96 
  const showMembers = () => {
97 
    showModal(
98 
      'Miembros',
99 
      <MembersModal members={data.items} onApprove={approve} onReject={reject} onCancel={cancel} />
100 
    );
101 
  };
3719 stevensc 102 
 
3736 stevensc 103 
  if (loading || !data) return <Spinner />;
3719 stevensc 104 
 
105 
  return (
3736 stevensc 106 
    <Card>
107 
      <CardHeader title={`${data.items.length} Miembros`} />
108 
      <CardContent>
109 
        <AvatarGroup max={5}>
110 
          {data.items.map(({ name, image, uuid }) => (
111 
            <Avatar key={uuid} src={image} alt={name} size={50} />
112 
          ))}
113 
        </AvatarGroup>
114 
        {data.link_invite && (
115 
          <Button color='primary' onClick={handleInvite} sx={{ marginTop: 1 }}>
116 
            Invitar miembros
3719 stevensc 117 
          </Button>
3736 stevensc 118 
        )}
119 
      </CardContent>
120 
      <CardActions sx={{ padding: 0 }}>
121 
        <Button onClick={showMembers} fullWidth sx={{ borderRadius: 0 }}>
122 
          Ver más
123 
          <East />
124 
        </Button>
125 
      </CardActions>
126 
    </Card>
3719 stevensc 127 
  );
3736 stevensc 128 
}