Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
645 stevensc 1 
import React, { useRef, useState } from "react";
2 
import { axios } from "../../utils";
3 
import { Avatar } from "@mui/material";
4 
import { Link, useHistory } from "react-router-dom";
5 
import { addNotification } from "store/notification/notification.actions";
6 
import { useDispatch, useSelector } from "react-redux";
663 andreina 7 
import EditIcon from '@mui/icons-material/Edit'
645 stevensc 8 
import styled from "styled-components";
9 
import Spinner from "../UI/Spinner";
10 
import StyledContainer from "../widgets/WidgetLayout";
11 
import ConfirmModal from "../modals/ConfirmModal";
5 stevensc 12 
 
13 
const StyledSpinnerContainer = styled.div`
14 
  position: absolute;
15 
  left: 0;
16 
  top: 0;
17 
  width: 100%;
18 
  height: 100%;
19 
  background: rgba(255, 255, 255, 0.4);
20 
  place-items: center;
496 stevensc 21 
  z-index: 50;
645 stevensc 22 
`;
607 stevensc 23 
 
613 stevensc 24 
const StyledItemContainer = styled(StyledContainer)`
25 
  display: flex;
26 
  flex-direction: column;
27 
  justify-content: center;
28 
  height: 100%;
664 andreina 29 
  border-radius:5px;
645 stevensc 30 
`;
613 stevensc 31 
 
607 stevensc 32 
const StyledHeader = styled.div`
33 
  align-items: center;
34 
  display: flex;
35 
  gap: 0.5rem;
663 andreina 36 
  justify-content: flex-start;
607 stevensc 37 
  position: relative;
663 andreina 38 
  padding: 15px 5px;
664 andreina 39 
 
645 stevensc 40 
`;
607 stevensc 41 
 
611 stevensc 42 
const StyledContent = styled.div`
43 
  display: flex;
44 
  flex-direction: column;
45 
  text-align: center;
645 stevensc 46 
  ul {
611 stevensc 47 
    align-items: center;
48 
    display: flex;
49 
    justify-content: center;
50 
  }
645 stevensc 51 
`;
611 stevensc 52 
 
607 stevensc 53 
const StyledAvatar = styled(Avatar)`
54 
  height: 60px;
55 
  width: 60px;
645 stevensc 56 
`;
607 stevensc 57 
 
5 stevensc 58 
const ProfileItem = ({
59 
  image,
60 
  name,
61 
  email,
62 
  network,
63 
  status,
64 
  fetchCallback,
65 
  link_remove,
66 
  link_view,
67 
  link_edit,
68 
  link_delete,
69 
  link_cancel,
70 
  link_block,
71 
  link_reject,
72 
  link_accept,
73 
  link_inmail,
74 
  link_request,
75 
  link_unblock,
76 
  link_unfollow,
77 
  link_approve,
78 
  link_leave,
79 
  link_admin,
80 
  link_impersonate,
645 stevensc 81 
  btnAcceptTitle = "Ver",
82 
  btnCancelTitle = "Borrar",
83 
  btnEditTitle = "Editar",
84 
  btnLeaveTitle = "Dejar",
85 
  isTopData,
5 stevensc 86 
}) => {
645 stevensc 87 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false);
88 
  const [loading, setLoading] = useState(false);
89 
  const confirmUrl = useRef("");
90 
  const labels = useSelector(({ intl }) => intl.labels);
91 
  const dispatch = useDispatch();
92 
  const history = useHistory();
5 stevensc 93 
 
645 stevensc 94 
  const showConfirm = (url = "") => {
95 
    setIsShowConfirmation(true);
96 
    confirmUrl.current = url;
97 
  };
5 stevensc 98 
 
496 stevensc 99 
  const closeConfirm = () => {
645 stevensc 100 
    setIsShowConfirmation(false);
101 
    confirmUrl.current = "";
102 
  };
5 stevensc 103 
 
645 stevensc 104 
  const getImpersonateUrl = async (url = "") => {
5 stevensc 105 
    try {
645 stevensc 106 
      const { data } = await axios.get(url);
107 
      if (data.success) window.location.href = data.data;
5 stevensc 108 
    } catch (error) {
645 stevensc 109 
      console.log(">>: error > ", error);
5 stevensc 110 
    }
645 stevensc 111 
  };
5 stevensc 112 
 
113 
  const onConfirm = (url) => {
645 stevensc 114 
    setLoading(true);
5 stevensc 115 
    axios
116 
      .post(url)
117 
      .then((response) => {
645 stevensc 118 
        const { success, data } = response.data;
5 stevensc 119 
 
120 
        if (!success) {
121 
          const errorMessage =
645 stevensc 122 
            typeof data === "string"
5 stevensc 123 
              ? data
645 stevensc 124 
              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
5 stevensc 125 
 
645 stevensc 126 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
127 
          return;
5 stevensc 128 
        }
129 
 
645 stevensc 130 
        if (fetchCallback) fetchCallback();
131 
        dispatch(addNotification({ style: "success", msg: data }));
5 stevensc 132 
      })
526 stevensc 133 
      .catch(() => {
5 stevensc 134 
        dispatch(
135 
          addNotification({
645 stevensc 136 
            style: "error",
137 
            msg: "Error interno. Por favor, inténtelo de nuevo más tarde.",
5 stevensc 138 
          })
645 stevensc 139 
        );
5 stevensc 140 
      })
141 
      .finally(() => {
645 stevensc 142 
        confirmUrl.current = "";
143 
        setLoading(false);
144 
      });
145 
  };
5 stevensc 146 
 
147 
  const handleUnfollow = (link_unfollow) => {
645 stevensc 148 
    setLoading(true);
5 stevensc 149 
    axios
150 
      .post(link_unfollow)
151 
      .then((response) => {
645 stevensc 152 
        const { data, success } = response.data;
5 stevensc 153 
 
154 
        if (!success) {
155 
          const errorMessage =
645 stevensc 156 
            typeof data === "string"
5 stevensc 157 
              ? data
645 stevensc 158 
              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
5 stevensc 159 
 
645 stevensc 160 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
161 
          return;
5 stevensc 162 
        }
163 
 
645 stevensc 164 
        if (fetchCallback) fetchCallback();
165 
        dispatch(addNotification({ style: "success", msg: data }));
5 stevensc 166 
      })
645 stevensc 167 
      .finally(() => setLoading(false));
168 
  };
5 stevensc 169 
 
170 
  const getManageUrl = async () => {
171 
    try {
645 stevensc 172 
      const { data } = await axios.get(link_admin);
173 
      if (data.success) window.open(data.data, "_backend");
5 stevensc 174 
    } catch (error) {
645 stevensc 175 
      console.log(">>: error > ", error);
5 stevensc 176 
    }
645 stevensc 177 
  };
5 stevensc 178 
 
179 
  const linksOptions = [
180 
    {
181 
      label: btnAcceptTitle || labels.accept,
182 
      url: link_view,
645 stevensc 183 
      color: "primary",
5 stevensc 184 
    },
645 stevensc 185 
    { label: btnEditTitle || labels.edit, url: link_edit, color: "secondary" },
186 
    { label: labels.approve, url: link_approve, color: "tertiary" },
187 
    { label: btnLeaveTitle, url: link_remove, color: "tertiary" },
188 
    { label: labels.accept, url: link_accept, color: "secondary" },
189 
    { label: labels.reject, url: link_reject, color: "tertiary" },
5 stevensc 190 
    {
191 
      label: btnCancelTitle || labels.cancel,
192 
      url: link_delete,
645 stevensc 193 
      color: "tertiary",
5 stevensc 194 
    },
195 
    {
645 stevensc 196 
      label: labels.message || "Mensaje",
5 stevensc 197 
      url: link_inmail,
645 stevensc 198 
      color: "secondary",
5 stevensc 199 
    },
645 stevensc 200 
    { label: labels.administrate, url: link_admin, color: "secondary" },
201 
    { label: labels.unfollow, url: link_unfollow, color: "tertiary" },
202 
    { label: labels.block, url: link_block, color: "tertiary" },
203 
    { label: labels.unblock, url: link_unblock, color: "tertiary" },
204 
    { label: labels.connect, url: link_request, color: "tertiary" },
205 
    { label: labels.cancel, url: link_cancel, color: "tertiary" },
206 
    { label: btnLeaveTitle, url: link_leave, color: "tertiary" },
207 
    { label: "Personificar", url: link_impersonate, color: "tertiary" },
208 
  ];
5 stevensc 209 
 
210 
  return (
597 stevensc 211 
    <>
613 stevensc 212 
      <StyledItemContainer>
607 stevensc 213 
        <StyledHeader>
214 
          {image && <StyledAvatar src={image} alt={`${name} image`} />}
611 stevensc 215 
          <StyledContent>
216 
            <h2>{name}</h2>
597 stevensc 217 
            {isTopData && email && <h4>{email}</h4>}
611 stevensc 218 
            {network && <span>{network}</span>}
219 
            {status && <span>{status}</span>}
597 stevensc 220 
            {isTopData && (
221 
              <ul>
222 
                {link_view && (
223 
                  <li>
224 
                    <Link
225 
                      to={link_view}
226 
                      data-link={link_view}
646 stevensc 227 
                      className="btn btn-primary"
597 stevensc 228 
                    >
229 
                      {btnAcceptTitle}
230 
                    </Link>
231 
                  </li>
232 
                )}
233 
                {link_inmail && (
234 
                  <li>
235 
                    <Link
236 
                      to={link_inmail}
237 
                      data-link={link_inmail}
646 stevensc 238 
                      className="btn btn-tertiary"
597 stevensc 239 
                    >
240 
                      {labels.message}
241 
                    </Link>
242 
                  </li>
243 
                )}
244 
              </ul>
245 
            )}
611 stevensc 246 
          </StyledContent>
607 stevensc 247 
        </StyledHeader>
613 stevensc 248 
        <StyledItemContainer.Actions>
611 stevensc 249 
          {linksOptions.map(({ label, url }) => {
645 stevensc 250 
            const breakOptions = [link_view, link_edit, link_inmail];
5 stevensc 251 
 
597 stevensc 252 
            if (!url) {
645 stevensc 253 
              return null;
597 stevensc 254 
            }
5 stevensc 255 
 
597 stevensc 256 
            if (url === link_view && isTopData) {
645 stevensc 257 
              return null;
597 stevensc 258 
            }
5 stevensc 259 
 
597 stevensc 260 
            if (url === link_inmail && isTopData) {
645 stevensc 261 
              return null;
597 stevensc 262 
            }
5 stevensc 263 
 
597 stevensc 264 
            return (
598 stevensc 265 
              <button
597 stevensc 266 
                key={url}
598 stevensc 267 
                onClick={() => {
597 stevensc 268 
                  if (url === link_unfollow) {
645 stevensc 269 
                    return handleUnfollow(url);
5 stevensc 270 
                  }
271 
 
597 stevensc 272 
                  if (url === link_admin) {
645 stevensc 273 
                    return getManageUrl();
5 stevensc 274 
                  }
275 
 
597 stevensc 276 
                  if (url === link_impersonate) {
645 stevensc 277 
                    return getImpersonateUrl(url);
5 stevensc 278 
                  }
279 
 
597 stevensc 280 
                  if (!breakOptions.includes(url)) {
645 stevensc 281 
                    return showConfirm(url);
598 stevensc 282 
                  } else {
645 stevensc 283 
                    history.push(url);
5 stevensc 284 
                  }
285 
                }}
286 
              >
598 stevensc 287 
                {label}
288 
              </button>
645 stevensc 289 
            );
597 stevensc 290 
          })}
613 stevensc 291 
        </StyledItemContainer.Actions>
597 stevensc 292 
        {loading && (
293 
          <StyledSpinnerContainer>
294 
            <Spinner />
295 
          </StyledSpinnerContainer>
296 
        )}
613 stevensc 297 
      </StyledItemContainer>
597 stevensc 298 
      <ConfirmModal
299 
        show={isShowConfirmation}
300 
        onClose={() => closeConfirm()}
301 
        onAccept={() => onConfirm(confirmUrl.current)}
302 
      />
303 
    </>
645 stevensc 304 
  );
305 
};
5 stevensc 306 
 
645 stevensc 307 
export default ProfileItem;