Proyectos de Subversion LeadersLinked - SPA

Rev

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