Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3287 Rev 3432
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } 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 { 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'
 8 
import colors from "@styles/colors";
9 
 
 9 
 
10 
import Widget from '@components/UI/Widget'
 10 
import Widget from "@components/UI/Widget";
11 
import Cover from '@components/UI/cover/Cover'
 11 
import Cover from "@components/UI/cover/Cover";
12 
import ConfirmModal from '@components/modals/ConfirmModal'
 12 
import ConfirmModal from "@components/modals/ConfirmModal";
13 
import ProfileModal from './ProfileModal'
 13 
import ProfileModal from "./ProfileModal";
14 
import Avatar from '@components/common/avatar'
 14 
import Avatar from "@components/common/avatar";
15 
import Row from '@components/common/Row'
 15 
import Row from "@components/common/Row";
Línea 16... Línea 16...
16 
 
 16 
 
17 
const ProfileCard = ({
 17 
const ProfileCard = ({
18 
  cover,
 18 
  cover,
19 
  facebook,
 19 
  facebook,
Línea 32... Línea 32...
32 
  total_connections: totalConnections,
 32 
  total_connections: totalConnections,
33 
  twitter,
 33 
  twitter,
34 
  user_experiences: userExperiences = [],
 34 
  user_experiences: userExperiences = [],
35 
  view_following: viewFollowing,
 35 
  view_following: viewFollowing,
36 
  view_total_connections: viewTotalConnections,
 36 
  view_total_connections: viewTotalConnections,
37 
  edit
 37 
  edit,
38 
}) => {
 38 
}) => {
39 
  const [isAdded, setIsAdded] = useState(false)
 39 
  const [isAdded, setIsAdded] = useState(false);
40 
  const [connectionUrl, setConnectionUrl] = useState('')
 40 
  const [connectionUrl, setConnectionUrl] = useState("");
41 
  const [modalToShow, setModalToShow] = useState(null)
 41 
  const [modalToShow, setModalToShow] = useState(null);
42 
  const [settedOverview, setSettedOverview] = useState('')
 42 
  const [settedOverview, setSettedOverview] = useState("");
43 
  const [isModalShow, setIsModalShow] = useState(false)
 43 
  const [isModalShow, setIsModalShow] = useState(false);
44 
  const labels = useSelector(({ intl }) => intl.labels)
 44 
  const labels = useSelector(({ intl }) => intl.labels);
45 
  const { pathname } = useLocation()
 45 
  const { pathname } = useLocation();
46 
  const dispatch = useDispatch()
 46 
  const dispatch = useDispatch();
Línea 47... Línea 47...
47 
 
 47 
 
48 
  const displayModal = () => {
 48 
  const displayModal = () => {
49 
    setIsModalShow(!isModalShow)
 49 
    setIsModalShow(!isModalShow);
Línea 50... Línea 50...
50 
  }
 50 
  };
51 
 
 51 
 
52 
  const getProfileData = async () => {
 52 
  const getProfileData = async () => {
53 
    try {
 53 
    try {
Línea 54... Línea 54...
54 
      const { data: response } = await axios.get(pathname)
 54 
      const response = await axios.get(pathname);
55 
      const { link_request, link_cancel } = response
 55 
      const { link_request, link_cancel } = response.data;
56 
 
 56 
 
57 
      if (link_request) {
 57 
      if (link_request) {
Línea 58... Línea 58...
58 
        setConnectionUrl(link_request)
 58 
        setConnectionUrl(link_request);
59 
        return
 59 
        return;
60 
      }
 60 
      }
61 
 
 61 
 
62 
      setConnectionUrl(link_cancel)
 62 
      setConnectionUrl(link_cancel);
Línea 63... Línea 63...
63 
    } catch (err) {
 63 
    } catch (err) {
64 
      dispatch(addNotification({ style: 'danger', msg: err.message }))
 64 
      dispatch(addNotification({ style: "danger", msg: err.message }));
65 
    }
 65 
    }
66 
  }
 66 
  };
Línea 67... Línea 67...
67 
 
 67 
 
68 
  const connect = async () => {
 68 
  const connect = async () => {
69 
    try {
 69 
    try {
Línea 70... Línea 70...
70 
      const { data: response } = await axios.post(connectionUrl)
 70 
      const response = await axios.post(connectionUrl);
71 
      const { data, success } = response
 71 
      const { data, success } = response.data;
72 
 
 72 
 
Línea 73... Línea 73...
73 
      if (!success) {
 73 
      if (!success) {
74 
        return dispatch(addNotification({ style: 'danger', msg: data }))
 74 
        return dispatch(addNotification({ style: "danger", msg: data }));
75 
      }
 75 
      }
76 
 
 76 
 
77 
      if (success && isModalShow) {
 77 
      if (success && isModalShow) {
78 
        displayModal()
 78 
        displayModal();
79 
      }
 79 
      }
Línea 80... Línea 80...
80 
 
 80 
 
81 
      await getProfileData()
 81 
      await getProfileData();
82 
      dispatch(addNotification({ style: 'success', msg: data }))
 82 
      dispatch(addNotification({ style: "success", msg: data }));
Línea 83... Línea 83...
83 
      setIsAdded(!isAdded)
 83 
      setIsAdded(!isAdded);
84 
    } catch (error) {
 84 
    } catch (error) {
85 
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error}` }))
 85 
      dispatch(addNotification({ style: "danger", msg: `Error: ${error}` }));
86 
    }
 86 
    }
Línea 87... Línea 87...
87 
  }
 87 
  };
88 
 
 88 
 
89 
  const closeModal = () => {
 89 
  const closeModal = () => {
Línea 90... Línea 90...
90 
    setModalToShow(null)
 90 
    setModalToShow(null);
91 
  }
 91 
  };
92 
 
 92 
 
Línea 93... Línea 93...
93 
  useEffect(() => {
 93 
  useEffect(() => {
94 
    setIsAdded(!requestConnection)
 94 
    setIsAdded(!requestConnection);
95 
    setSettedOverview(overview)
 95 
    setSettedOverview(overview);
96 
  }, [requestConnection, overview])
 96 
  }, [requestConnection, overview]);
97 
 
 97 
 
98 
  useEffect(() => {
 98 
  useEffect(() => {
99 
    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel)
 99 
    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel);
100 
  }, [linkRequest, linkCancel])
 100 
  }, [linkRequest, linkCancel]);
101 
 
 101 
 
102 
  return (
 102 
  return (
103 
    <Widget>
 103 
    <Widget>
104 
      <Cover cover={cover} edit={edit} />
 104 
      <Cover cover={cover} edit={edit} />
105 
 
 105 
 
106 
      <Widget.Body>
 106 
      <Widget.Body>
Línea 107... Línea 107...
107 
        <Avatar
 107 
        <Avatar
108 
          src={image}
 108 
          src={image}
Línea 109... Línea 109...
109 
          alt={fullName}
 109 
          alt={fullName}
110 
          badgeStyles={{
 110 
          badgeStyles={{
111 
            mt: { xs: '-50px', lg: '-75px' }
 111 
            mt: { xs: "-50px", lg: "-75px" },
112 
          }}
 112 
          }}
113 
          styles={{
 113 
          styles={{
114 
            width: { xs: '100px', lg: '150px' },
 114 
            width: { xs: "100px", lg: "150px" },
115 
            height: { xs: '100px', lg: '150px' },
 115 
            height: { xs: "100px", lg: "150px" },
Línea 116... Línea 116...
116 
            border: `1px solid ${colors.border.primary}`
 116 
            border: `1px solid ${colors.border.primary}`,
117 
          }}
 117 
          }}
118 
          edit={edit}
 118 
          edit={edit}
119 
        />
 119 
        />
120 
 
 120 
 
121 
        <Typography variant='h2'>{fullName}</Typography>
 121 
        <Typography variant="h2">{fullName}</Typography>
122 
        <Typography>{parse(settedOverview)}</Typography>
 122 
        <Typography>{parse(settedOverview)}</Typography>
123 
 
 123 
 
124 
        <Row>
 124 
        <Row>
125 
          <Typography>{formattedAddress}</Typography>
 125 
          <Typography>{formattedAddress}</Typography>
126 
          <Typography variant='overline'> - </Typography>
 126 
          <Typography variant="overline"> - </Typography>
127 
          <Typography variant='overline' onClick={() => setModalToShow('info')}>
 127 
          <Typography variant="overline" onClick={() => setModalToShow("info")}>
128 
            {labels.personal_info}
 128 
            {labels.personal_info}
129 
          </Typography>
 129 
          </Typography>
130 
        </Row>
 130 
        </Row>
131 
 
 131 
 
Línea 132... Línea 132...
132 
        <Row>
 132 
        <Row>
133 
          {viewTotalConnections ? (
 133 
          {viewTotalConnections ? (
134 
            <Link to='/connection/my-connections'>
 134 
            <Link to="/connection/my-connections">
135 
              <Typography variant='overline'>
 135 
              <Typography variant="overline">
136 
                {`${totalConnections} conexiones`}
 136 
                {`${totalConnections} conexiones`}
137 
              </Typography>
 137 
              </Typography>
138 
            </Link>
 138 
            </Link>
139 
          ) : null}
 139 
          ) : null}
140 
          {viewFollowing ? (
 140 
          {viewFollowing ? (
141 
            <Link onClick={(e) => e.preventDefault()}>
 141 
            <Link onClick={(e) => e.preventDefault()}>
142 
              <Typography variant='overline'>
 142 
              <Typography variant="overline">
143 
                {`${following} siguiendo`}
 143 
                {`${following} siguiendo`}
144 
              </Typography>
 144 
              </Typography>
145 
            </Link>
 145 
            </Link>
146 
          ) : null}
 146 
          ) : null}
147 
        </Row>
 147 
        </Row>
148 
 
 148 
 
149 
        <Row>
 149 
        <Row>
Línea 175... Línea 175...
175 
          />
 175 
          />
176 
        </>
 176 
        </>
177 
      )} */}
 177 
      )} */}
Línea 178... Línea 178...
178 
 
 178 
 
179 
      <ProfileModal
 179 
      <ProfileModal
180 
        show={modalToShow === 'info'}
 180 
        show={modalToShow === "info"}
181 
        closeModal={() => closeModal()}
 181 
        closeModal={() => closeModal()}
182 
        fullName={fullName}
 182 
        fullName={fullName}
183 
        facebook={facebook}
 183 
        facebook={facebook}
184 
        twitter={twitter}
 184 
        twitter={twitter}
Línea 193... Línea 193...
193 
        show={isModalShow}
 193 
        show={isModalShow}
194 
        onClose={() => setIsModalShow(false)}
 194 
        onClose={() => setIsModalShow(false)}
195 
        onAccept={() => connect()}
 195 
        onAccept={() => connect()}
196 
      />
 196 
      />
197 
    </Widget>
 197 
    </Widget>
198 
  )
 198 
  );
199 
}
 199 
};
Línea 200... Línea 200...
200 
 
 200