Proyectos de Subversion LeadersLinked - SPA

Rev

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