Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | Rev 3445 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3444 stevensc 1
import React, { useState, useEffect, useCallback, memo } from 'react';
2
import { Link, useLocation } from 'react-router-dom';
3
import { useDispatch, useSelector } from 'react-redux';
4
import { Box, Button, Typography } from '@mui/material';
1847 stevensc 5
 
3444 stevensc 6
import { axios, parse } from '@utils';
7
import { addNotification } from '@store/notification/notification.actions';
1847 stevensc 8
 
3444 stevensc 9
import Row from '@components/common/Row';
10
import Cover from '@components/UI/cover/Cover';
11
import Widget from '@components/UI/Widget';
12
import Avatar from '@components/common/avatar';
13
import ProfileModal from './ProfileModal';
14
import ConfirmModal from '@components/modals/ConfirmModal';
1847 stevensc 15
 
16
const ProfileCard = ({
2905 stevensc 17
  cover,
3444 stevensc 18
  avatar,
19
  name,
20
  description,
21
  address,
22
  coverUrl,
23
  avatarUrl,
24
  coverSize,
25
  avatarSize,
26
  requestConnection,
27
  linkRequest,
28
  linkCancel,
29
  linkInmail,
30
  following,
31
  totalConnections,
2905 stevensc 32
  facebook,
1847 stevensc 33
  twitter,
3444 stevensc 34
  instagram
1847 stevensc 35
}) => {
3444 stevensc 36
  const [isConnecting, setIsConnecting] = useState(false);
37
  const [isAdded, setIsAdded] = useState(!requestConnection);
38
  const [connectionUrl, setConnectionUrl] = useState(linkRequest || linkCancel || '');
39
  const [isModalOpen, setIsModalOpen] = useState(false);
3432 stevensc 40
  const labels = useSelector(({ intl }) => intl.labels);
41
  const { pathname } = useLocation();
42
  const dispatch = useDispatch();
1847 stevensc 43
 
3444 stevensc 44
  const fetchConnectionUrls = useCallback(async () => {
1847 stevensc 45
    try {
3432 stevensc 46
      const response = await axios.get(pathname);
47
      const { link_request, link_cancel } = response.data;
3444 stevensc 48
      setConnectionUrl(link_request || link_cancel || '');
49
    } catch (error) {
50
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
51
    }
52
  }, [pathname, dispatch]);
1847 stevensc 53
 
3444 stevensc 54
  useEffect(() => {
55
    if (!linkRequest && !linkCancel) {
56
      fetchConnectionUrls();
1847 stevensc 57
    }
3444 stevensc 58
  }, [fetchConnectionUrls, linkRequest, linkCancel]);
1847 stevensc 59
 
3444 stevensc 60
  const handleConnect = useCallback(async () => {
61
    setIsConnecting(true);
1847 stevensc 62
    try {
3432 stevensc 63
      const response = await axios.post(connectionUrl);
64
      const { data, success } = response.data;
1847 stevensc 65
 
66
      if (!success) {
3444 stevensc 67
        dispatch(addNotification({ style: 'danger', msg: data }));
68
      } else {
69
        dispatch(addNotification({ style: 'success', msg: data }));
70
        setIsAdded(!isAdded);
71
        if (isModalOpen) {
72
          setIsModalOpen(false);
73
        }
74
        fetchConnectionUrls();
1847 stevensc 75
      }
76
    } catch (error) {
3444 stevensc 77
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
78
    } finally {
79
      setIsConnecting(false);
1847 stevensc 80
    }
3444 stevensc 81
  }, [connectionUrl, isAdded, dispatch, isModalOpen, fetchConnectionUrls]);
1847 stevensc 82
 
83
  return (
2902 stevensc 84
    <Widget>
3444 stevensc 85
      <Cover cover={cover} size={coverSize} url={coverUrl} />
3047 stevensc 86
 
3444 stevensc 87
      <Box sx={{ alignItems: 'center', mt: '-40px' }}>
88
        <Avatar src={avatar} size={avatarSize} url={avatarUrl} />
89
      </Box>
90
 
2906 stevensc 91
      <Widget.Body>
3444 stevensc 92
        <Typography variant='h2'>{name}</Typography>
93
        <Typography>{parse(description)}</Typography>
94
        <Typography>{address}</Typography>
95
        <Typography variant='overline'> - </Typography>
96
        <Typography variant='overline'>{labels.personal_info}</Typography>
2909 stevensc 97
        <Row>
3444 stevensc 98
          {totalConnections && (
99
            <Link to='/connection/my-connections'>
100
              <Typography variant='overline'>{`${totalConnections} conexiones`}</Typography>
2902 stevensc 101
            </Link>
3444 stevensc 102
          )}
103
          {following && (
2902 stevensc 104
            <Link onClick={(e) => e.preventDefault()}>
3444 stevensc 105
              <Typography variant='overline'>{`${following} siguiendo`}</Typography>
2902 stevensc 106
            </Link>
3444 stevensc 107
          )}
2909 stevensc 108
        </Row>
109
        <Row>
110
          {connectionUrl && isAdded && (
3444 stevensc 111
            <Button color='primary' onClick={() => setIsModalOpen(true)} disabled={isConnecting}>
2909 stevensc 112
              {labels.cancel}
113
            </Button>
114
          )}
115
          {connectionUrl && !isAdded && (
3444 stevensc 116
            <Button color='primary' onClick={handleConnect} disabled={isConnecting}>
2909 stevensc 117
              {labels.connect}
118
            </Button>
119
          )}
3444 stevensc 120
          {linkInmail && (
121
            <Button to={linkInmail} LinkComponent={Link} color='secondary'>
2909 stevensc 122
              {labels.message}
123
            </Button>
124
          )}
125
        </Row>
2902 stevensc 126
      </Widget.Body>
1847 stevensc 127
 
2902 stevensc 128
      <ProfileModal
3444 stevensc 129
        closeModal={() => setIsModalOpen(false)}
130
        fullName={name}
1847 stevensc 131
        facebook={facebook}
132
        twitter={twitter}
133
        instagram={instagram}
134
        following={following}
3444 stevensc 135
        formatted_address={address}
136
        overview={description}
1847 stevensc 137
        total_connections={totalConnections}
138
      />
139
      <ConfirmModal
3444 stevensc 140
        show={isModalOpen}
141
        onClose={() => setIsModalOpen(false)}
142
        onAccept={handleConnect}
143
        isLoading={isConnecting}
1847 stevensc 144
      />
2902 stevensc 145
    </Widget>
3432 stevensc 146
  );
147
};
1847 stevensc 148
 
3444 stevensc 149
export default memo(ProfileCard, (prevProps, nextProps) => {
150
  return (
151
    prevProps.cover === nextProps.cover &&
152
    prevProps.avatar === nextProps.avatar &&
153
    prevProps.name === nextProps.name &&
154
    prevProps.description === nextProps.description &&
155
    prevProps.address === nextProps.address &&
156
    prevProps.coverUrl === nextProps.coverUrl &&
157
    prevProps.avatarUrl === nextProps.avatarUrl &&
158
    prevProps.coverSize === nextProps.coverSize &&
159
    prevProps.avatarSize === nextProps.avatarSize &&
160
    prevProps.requestConnection === nextProps.requestConnection &&
161
    prevProps.linkRequest === nextProps.linkRequest &&
162
    prevProps.linkCancel === nextProps.linkCancel &&
163
    prevProps.linkInmail === nextProps.linkInmail &&
164
    prevProps.following === nextProps.following &&
165
    prevProps.totalConnections === nextProps.totalConnections &&
166
    prevProps.facebook === nextProps.facebook &&
167
    prevProps.twitter === nextProps.twitter &&
168
    prevProps.instagram === nextProps.instagram
169
  );
170
});