Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3444
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from "react";
 1 
import React, { useState, useEffect, useCallback, memo } from 'react';
2 
import { Link, useLocation } from "react-router-dom";
 2 
import { Link, useLocation } from 'react-router-dom';
3 
import { useDispatch, useSelector } from "react-redux";
 3 
import { useDispatch, useSelector } from 'react-redux';
4 
import { Button, Typography } from "@mui/material";
 4 
import { Box, Button, Typography } from '@mui/material';
5 
 
 5 
 
6 
import { axios, parse } from "@utils";
 6 
import { axios, parse } from '@utils';
7 
import { addNotification } from "@store/notification/notification.actions";
 7 
import { addNotification } from '@store/notification/notification.actions';
8 
import colors from "@styles/colors";
 - 
 
9 
 
 8 
 
10 
import Widget from "@components/UI/Widget";
 9 
import Row from '@components/common/Row';
11 
import Cover from "@components/UI/cover/Cover";
 10 
import Cover from '@components/UI/cover/Cover';
12 
import ConfirmModal from "@components/modals/ConfirmModal";
 11 
import Widget from '@components/UI/Widget';
13 
import ProfileModal from "./ProfileModal";
 12 
import Avatar from '@components/common/avatar';
14 
import Avatar from "@components/common/avatar";
 13 
import ProfileModal from './ProfileModal';
15 
import Row from "@components/common/Row";
 14 
import ConfirmModal from '@components/modals/ConfirmModal';
Línea 16... Línea 15...
16 
 
 15 
 
17 
const ProfileCard = ({
 16 
const ProfileCard = ({
- 
 
 17 
  cover,
- 
 
 18 
  avatar,
- 
 
 19 
  name,
- 
 
 20 
  description,
18 
  cover,
 21 
  address,
- 
 
 22 
  coverUrl,
- 
 
 23 
  avatarUrl,
- 
 
 24 
  coverSize,
- 
 
 25 
  avatarSize,
- 
 
 26 
  requestConnection,
- 
 
 27 
  linkRequest,
- 
 
 28 
  linkCancel,
19 
  facebook,
 29 
  linkInmail,
20 
  following,
 - 
 
21 
  formatted_address: formattedAddress,
 - 
 
22 
  full_name: fullName,
 - 
 
23 
  image,
 - 
 
24 
  instagram,
 - 
 
25 
  link_cancel: linkCancel,
 - 
 
26 
  link_inmail: linkInmail,
 - 
 
27 
  link_request: linkRequest,
 - 
 
28 
  overview,
 - 
 
29 
  request_connection: requestConnection,
 30 
  following,
30 
  show_contact: showContact,
 31 
  totalConnections,
31 
  sizes,
 - 
 
32 
  total_connections: totalConnections,
 32 
  facebook,
33 
  twitter,
 - 
 
34 
  user_experiences: userExperiences = [],
 - 
 
35 
  view_following: viewFollowing,
 - 
 
36 
  view_total_connections: viewTotalConnections,
 33 
  twitter,
37 
  edit,
 34 
  instagram
38 
}) => {
 - 
 
39 
  const [isAdded, setIsAdded] = useState(false);
 35 
}) => {
40 
  const [connectionUrl, setConnectionUrl] = useState("");
 36 
  const [isConnecting, setIsConnecting] = useState(false);
41 
  const [modalToShow, setModalToShow] = useState(null);
 37 
  const [isAdded, setIsAdded] = useState(!requestConnection);
42 
  const [settedOverview, setSettedOverview] = useState("");
 38 
  const [connectionUrl, setConnectionUrl] = useState(linkRequest || linkCancel || '');
43 
  const [isModalShow, setIsModalShow] = useState(false);
 39 
  const [isModalOpen, setIsModalOpen] = useState(false);
44 
  const labels = useSelector(({ intl }) => intl.labels);
 40 
  const labels = useSelector(({ intl }) => intl.labels);
45 
  const { pathname } = useLocation();
 41 
  const { pathname } = useLocation();
Línea 46... Línea -...
46 
  const dispatch = useDispatch();
 - 
 
47 
 
 - 
 
48 
  const displayModal = () => {
 - 
 
49 
    setIsModalShow(!isModalShow);
 - 
 
50 
  };
 42 
  const dispatch = useDispatch();
51 
 
 43 
 
52 
  const getProfileData = async () => {
 44 
  const fetchConnectionUrls = useCallback(async () => {
53 
    try {
 45 
    try {
- 
 
 46 
      const response = await axios.get(pathname);
- 
 
 47 
      const { link_request, link_cancel } = response.data;
- 
 
 48 
      setConnectionUrl(link_request || link_cancel || '');
- 
 
 49 
    } catch (error) {
- 
 
 50 
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
Línea 54... Línea 51...
54 
      const response = await axios.get(pathname);
 51 
    }
55 
      const { link_request, link_cancel } = response.data;
 52 
  }, [pathname, dispatch]);
56 
 
 - 
 
57 
      if (link_request) {
 - 
 
58 
        setConnectionUrl(link_request);
 - 
 
59 
        return;
 53 
 
60 
      }
 - 
 
61 
 
 - 
 
62 
      setConnectionUrl(link_cancel);
 54 
  useEffect(() => {
63 
    } catch (err) {
 - 
 
- 
 
 55 
    if (!linkRequest && !linkCancel) {
Línea 64... Línea 56...
64 
      dispatch(addNotification({ style: "danger", msg: err.message }));
 56 
      fetchConnectionUrls();
- 
 
 57 
    }
65 
    }
 58 
  }, [fetchConnectionUrls, linkRequest, linkCancel]);
66 
  };
 59 
 
67 
 
 60 
  const handleConnect = useCallback(async () => {
Línea 68... Línea 61...
68 
  const connect = async () => {
 61 
    setIsConnecting(true);
69 
    try {
 62 
    try {
70 
      const response = await axios.post(connectionUrl);
 63 
      const response = await axios.post(connectionUrl);
71 
      const { data, success } = response.data;
 - 
 
- 
 
 64 
      const { data, success } = response.data;
- 
 
 65 
 
72 
 
 66 
      if (!success) {
73 
      if (!success) {
 67 
        dispatch(addNotification({ style: 'danger', msg: data }));
- 
 
 68 
      } else {
- 
 
 69 
        dispatch(addNotification({ style: 'success', msg: data }));
74 
        return dispatch(addNotification({ style: "danger", msg: data }));
 70 
        setIsAdded(!isAdded);
75 
      }
 - 
 
76 
 
 - 
 
77 
      if (success && isModalShow) {
 - 
 
78 
        displayModal();
 - 
 
79 
      }
 71 
        if (isModalOpen) {
80 
 
 72 
          setIsModalOpen(false);
- 
 
 73 
        }
- 
 
 74 
        fetchConnectionUrls();
81 
      await getProfileData();
 75 
      }
82 
      dispatch(addNotification({ style: "success", msg: data }));
 - 
 
83 
      setIsAdded(!isAdded);
 - 
 
84 
    } catch (error) {
 - 
 
85 
      dispatch(addNotification({ style: "danger", msg: `Error: ${error}` }));
 - 
 
86 
    }
 - 
 
87 
  };
 - 
 
88 
 
 - 
 
89 
  const closeModal = () => {
 - 
 
90 
    setModalToShow(null);
 - 
 
91 
  };
 - 
 
92 
 
 - 
 
93 
  useEffect(() => {
 - 
 
94 
    setIsAdded(!requestConnection);
 76 
    } catch (error) {
95 
    setSettedOverview(overview);
 - 
 
Línea 96... Línea 77...
96 
  }, [requestConnection, overview]);
 77 
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
97 
 
 78 
    } finally {
98 
  useEffect(() => {
 79 
      setIsConnecting(false);
99 
    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel);
 - 
 
100 
  }, [linkRequest, linkCancel]);
 - 
 
101 
 
 - 
 
102 
  return (
 - 
 
103 
    <Widget>
 - 
 
104 
      <Cover cover={cover} edit={edit} />
 - 
 
105 
 
 - 
 
106 
      <Widget.Body>
 - 
 
107 
        <Avatar
 - 
 
108 
          src={image}
 - 
 
109 
          alt={fullName}
 - 
 
110 
          badgeStyles={{
 - 
 
111 
            mt: { xs: "-50px", lg: "-75px" },
 - 
 
112 
          }}
 - 
 
113 
          styles={{
 - 
 
Línea 114... Línea 80...
114 
            width: { xs: "100px", lg: "150px" },
 80 
    }
115 
            height: { xs: "100px", lg: "150px" },
 81 
  }, [connectionUrl, isAdded, dispatch, isModalOpen, fetchConnectionUrls]);
116 
            border: `1px solid ${colors.border.primary}`,
 - 
 
117 
          }}
 - 
 
118 
          edit={edit}
 - 
 
119 
        />
 - 
 
120 
 
 - 
 
121 
        <Typography variant="h2">{fullName}</Typography>
 - 
 
122 
        <Typography>{parse(settedOverview)}</Typography>
 - 
 
123 
 
 82 
 
Línea -... Línea 83...
- 
 
 83 
  return (
- 
 
 84 
    <Widget>
- 
 
 85 
      <Cover cover={cover} size={coverSize} url={coverUrl} />
- 
 
 86 
 
- 
 
 87 
      <Box sx={{ alignItems: 'center', mt: '-40px' }}>
- 
 
 88 
        <Avatar src={avatar} size={avatarSize} url={avatarUrl} />
124 
        <Row>
 89 
      </Box>
125 
          <Typography>{formattedAddress}</Typography>
 90 
 
126 
          <Typography variant="overline"> - </Typography>
 91 
      <Widget.Body>
127 
          <Typography variant="overline" onClick={() => setModalToShow("info")}>
 - 
 
128 
            {labels.personal_info}
 92 
        <Typography variant='h2'>{name}</Typography>
129 
          </Typography>
 - 
 
130 
        </Row>
 93 
        <Typography>{parse(description)}</Typography>
131 
 
 94 
        <Typography>{address}</Typography>
132 
        <Row>
 95 
        <Typography variant='overline'> - </Typography>
133 
          {viewTotalConnections ? (
 96 
        <Typography variant='overline'>{labels.personal_info}</Typography>
134 
            <Link to="/connection/my-connections">
 97 
        <Row>
135 
              <Typography variant="overline">
 - 
 
136 
                {`${totalConnections} conexiones`}
 - 
 
137 
              </Typography>
 98 
          {totalConnections && (
138 
            </Link>
 99 
            <Link to='/connection/my-connections'>
139 
          ) : null}
 100 
              <Typography variant='overline'>{`${totalConnections} conexiones`}</Typography>
140 
          {viewFollowing ? (
 - 
 
141 
            <Link onClick={(e) => e.preventDefault()}>
 101 
            </Link>
142 
              <Typography variant="overline">
 102 
          )}
143 
                {`${following} siguiendo`}
 103 
          {following && (
144 
              </Typography>
 104 
            <Link onClick={(e) => e.preventDefault()}>
145 
            </Link>
 105 
              <Typography variant='overline'>{`${following} siguiendo`}</Typography>
146 
          ) : null}
 106 
            </Link>
147 
        </Row>
 107 
          )}
148 
 
 108 
        </Row>
149 
        <Row>
 109 
        <Row>
150 
          {connectionUrl && isAdded && (
 110 
          {connectionUrl && isAdded && (
151 
            <Button color="primary" onClick={() => displayModal()}>
 111 
            <Button color='primary' onClick={() => setIsModalOpen(true)} disabled={isConnecting}>
152 
              {labels.cancel}
 112 
              {labels.cancel}
153 
            </Button>
 113 
            </Button>
154 
          )}
 114 
          )}
155 
          {connectionUrl && !isAdded && (
 115 
          {connectionUrl && !isAdded && (
156 
            <Button color="primary" onClick={connect}>
 116 
            <Button color='primary' onClick={handleConnect} disabled={isConnecting}>
157 
              {labels.connect}
 117 
              {labels.connect}
158 
            </Button>
 118 
            </Button>
159 
          )}
 - 
 
160 
          {showContact && (
 - 
 
161 
            <Button to={linkInmail} LinkComponent={Link} color="secondary">
 - 
 
162 
              {labels.message}
 - 
 
163 
            </Button>
 - 
 
164 
          )}
 - 
 
165 
        </Row>
 - 
 
166 
      </Widget.Body>
 - 
 
167 
      {/*  {isEdit && (
 - 
 
168 
        <>
 - 
 
169 
          <OverviewModal
 - 
 
Línea 170... Línea 119...
170 
            isOpen={modalToShow === 'overview'}
 119 
          )}
171 
            overview={settedOverview}
 - 
 
172 
            id={profileId}
 120 
          {linkInmail && (
173 
            closeModal={() => closeModal()}
 121 
            <Button to={linkInmail} LinkComponent={Link} color='secondary'>
174 
            onComplete={(newOverview) => setSettedOverview(newOverview)}
 122 
              {labels.message}
175 
          />
 123 
            </Button>
176 
        </>
 124 
          )}
177 
      )} */}
 125 
        </Row>
178 
 
 126 
      </Widget.Body>
179 
      <ProfileModal
 127 
 
180 
        show={modalToShow === "info"}
 128 
      <ProfileModal
181 
        closeModal={() => closeModal()}
 - 
 
182 
        fullName={fullName}
 129 
        closeModal={() => setIsModalOpen(false)}
183 
        facebook={facebook}
 130 
        fullName={name}
184 
        twitter={twitter}
 131 
        facebook={facebook}
185 
        instagram={instagram}
 132 
        twitter={twitter}
186 
        following={following}
 133 
        instagram={instagram}
- 
 
 134 
        following={following}
187 
        formatted_address={formattedAddress}
 135 
        formatted_address={address}
188 
        overview={overview}
 136 
        overview={description}
189 
        total_connections={totalConnections}
 137 
        total_connections={totalConnections}
190 
        // follower={follower}
 138 
      />
Línea 191... Línea 139...
191 
      />
 139 
      <ConfirmModal
- 
 
 140 
        show={isModalOpen}
- 
 
 141 
        onClose={() => setIsModalOpen(false)}
- 
 
 142 
        onAccept={handleConnect}
- 
 
 143 
        isLoading={isConnecting}
- 
 
 144 
      />
- 
 
 145 
    </Widget>
- 
 
 146 
  );
- 
 
 147 
};
- 
 
 148 
 
- 
 
 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 &&