Proyectos de Subversion LeadersLinked - SPA

Rev

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