WebSVN – LeadersLinked - SPA – Diff – /app/components/profile/ProfileItem.jsx

-import React, { useRef, useState } from "react";
+import React, { useRef, useState } from 'react'
-import { axios } from "../../utils";
+import { axios } from '../../utils'
-import { Avatar } from "@mui/material";
+import { Avatar } from '@mui/material'
-import { Link, useHistory } from "react-router-dom";
+import { Link, useHistory } from 'react-router-dom'
-import { addNotification } from "store/notification/notification.actions";
+import { addNotification } from 'store/notification/notification.actions'
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch, useSelector } from 'react-redux'
 import EditIcon from '@mui/icons-material/Edit'
-import styled from "styled-components";
+import styled from 'styled-components'
-import Spinner from "../UI/Spinner";
+import Spinner from '../UI/Spinner'
-import StyledContainer from "../widgets/WidgetLayout";
+import StyledContainer from '../widgets/WidgetLayout'
-import ConfirmModal from "../modals/ConfirmModal";
+import ConfirmModal from '../modals/ConfirmModal'
+import {
+  AccountCircleOutlined,
+  CancelOutlined,
+  ChatOutlined,
+  DeleteOutline,
+  Done,
+  Edit,
+  LockOpenOutlined,
+  LockOutlined,
+  LogoutOutlined,
+  OpenInNew,
+  PersonAddOutlined,
+  PersonRemoveOutlined,
+  Remove,
+  SupervisorAccountOutlined
+} from '@mui/icons-material'
 const StyledSpinnerContainer = styled.div`
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.4);
   place-items: center;
   z-index: 50;
 `;
 const StyledItemContainer = styled(StyledContainer)`
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
-  border-radius:5px;
+  border-radius: 5px;
 `;
 const StyledHeader = styled.div`
   align-items: center;
   display: flex;
   gap: 0.5rem;
-  justify-content: flex-start;
-  position: relative;
+  justify-content: flex-start;
-  padding: 15px 5px;
+  position: relative;
   padding: 15px 5px;
 `;
 const StyledContent = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
   ul {
     align-items: center;
     display: flex;
     justify-content: center;
   }
-`;
+`
 const StyledAvatar = styled(Avatar)`
   height: 60px !important;
   width: 60px !important;
   link_unfollow,
   link_approve,
   link_leave,
   link_admin,
   link_impersonate,
-  btnAcceptTitle = "Ver",
+  btnAcceptTitle = 'Ver',
-  btnCancelTitle = "Borrar",
+  btnCancelTitle = 'Borrar',
-  btnEditTitle = "Editar",
+  btnEditTitle = 'Editar',
-  btnLeaveTitle = "Dejar",
+  btnLeaveTitle = 'Dejar',
-  isTopData,
+  isTopData
 }) => {
-  const [isShowConfirmation, setIsShowConfirmation] = useState(false);
+  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
-  const confirmUrl = useRef("");
+  const confirmUrl = useRef('')
-  const labels = useSelector(({ intl }) => intl.labels);
+  const labels = useSelector(({ intl }) => intl.labels)
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
-  const history = useHistory();
+  const history = useHistory()
-  const showConfirm = (url = "") => {
+  const showConfirm = (url = '') => {
-    setIsShowConfirmation(true);
+    setIsShowConfirmation(true)
-    confirmUrl.current = url;
+    confirmUrl.current = url
-  };
+  }
   const closeConfirm = () => {
-    setIsShowConfirmation(false);
+    setIsShowConfirmation(false)
-    confirmUrl.current = "";
+    confirmUrl.current = ''
-  };
+  }
-  const getImpersonateUrl = async (url = "") => {
+  const getImpersonateUrl = async (url = '') => {
     try {
-      const { data } = await axios.get(url);
+      const { data } = await axios.get(url)
-      if (data.success) window.location.href = data.data;
+      if (data.success) window.location.href = data.data
     } catch (error) {
-      console.log(">>: error > ", error);
+      console.log('>>: error > ', error)
+    }
-  };
+  }
   const onConfirm = (url) => {
-    setLoading(true);
+    setLoading(true)
     axios
       .post(url)
       .then((response) => {
-        const { success, data } = response.data;
+        const { success, data } = response.data
         if (!success) {
           const errorMessage =
-            typeof data === "string"
+            typeof data === 'string'
               ? data
-              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
+              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
-          dispatch(addNotification({ style: "danger", msg: errorMessage }));
+          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
-          return;
+          return
+        }
-        if (fetchCallback) fetchCallback();
+        if (fetchCallback) fetchCallback()
-        dispatch(addNotification({ style: "success", msg: data }));
+        dispatch(addNotification({ style: 'success', msg: data }))
       })
       .catch(() => {
         dispatch(
           addNotification({
-            style: "error",
+            style: 'error',
-            msg: "Error interno. Por favor, inténtelo de nuevo más tarde.",
+            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
           })
-        );
+        )
       })
       .finally(() => {
-        confirmUrl.current = "";
+        confirmUrl.current = ''
-        setLoading(false);
+        setLoading(false)
-      });
+      })
-  };
+  }
   const handleUnfollow = (link_unfollow) => {
-    setLoading(true);
+    setLoading(true)
     axios
       .post(link_unfollow)
       .then((response) => {
-        const { data, success } = response.data;
+        const { data, success } = response.data
         if (!success) {
           const errorMessage =
-            typeof data === "string"
+            typeof data === 'string'
               ? data
-              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
+              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
-          dispatch(addNotification({ style: "danger", msg: errorMessage }));
+          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
-          return;
+          return
         }
-        if (fetchCallback) fetchCallback();
+        if (fetchCallback) fetchCallback()
-        dispatch(addNotification({ style: "success", msg: data }));
+        dispatch(addNotification({ style: 'success', msg: data }))
       })
-      .finally(() => setLoading(false));
+      .finally(() => setLoading(false))
   };
   const getManageUrl = async () => {
     try {
+      const { data } = await axios.get(link_admin)
+      if (data.success) window.open(data.data, '_backend')
+    } catch (error) {
+      console.log('>>: error > ', error)
+    }
+  }
+  const linksOptions = [
+    {
+      label: btnAcceptTitle || labels.accept,
+      url: link_view,
+      color: 'primary',
+      icon: OpenInNew
+    },
+    {
+      label: btnEditTitle || labels.edit,
-      const { data } = await axios.get(link_admin);
+      url: link_edit,
-      if (data.success) window.open(data.data, "_backend");
-    } catch (error) {
-      console.log(">>: error > ", error);
-    }
-  };
       color: 'secondary',
-  const linksOptions = [
+      icon: Edit
     },
-      label: btnAcceptTitle || labels.accept,
+    { label: labels.approve, url: link_approve, color: 'tertiary', icon: Done },
+    { label: btnLeaveTitle, url: link_remove, color: 'tertiary', icon: Remove },
-      url: link_view,
+    { label: labels.accept, url: link_accept, color: 'secondary', icon: Done },
       color: "primary",
-    },
+      label: labels.reject,
-    { label: btnEditTitle || labels.edit, url: link_edit, color: "secondary" },
+      url: link_reject,
-    { label: labels.approve, url: link_approve, color: "tertiary" },
+      color: 'tertiary',
+      icon: CancelOutlined
-    { label: btnLeaveTitle, url: link_remove, color: "tertiary" },
+    },
+    {
-    { label: labels.accept, url: link_accept, color: "secondary" },
+      label: btnCancelTitle || labels.cancel,
+      url: link_delete,
+      color: 'tertiary',
+      icon: DeleteOutline
+    },
+    {
-    { label: labels.reject, url: link_reject, color: "tertiary" },
+      label: labels.message || 'Mensaje',
+      url: link_inmail,
+      color: 'secondary',
+      icon: ChatOutlined
+    },
+    {
-    {
+      label: labels.administrate,
+      url: link_admin,
+      color: 'secondary',
+      icon: SupervisorAccountOutlined
+    },
+    {
-      label: btnCancelTitle || labels.cancel,
+      label: labels.unfollow,
+      url: link_unfollow,
+      color: 'tertiary',
+      icon: PersonRemoveOutlined
+    },
+    {
-      url: link_delete,
+      label: labels.block,
+      url: link_block,
+      color: 'tertiary',
+      icon: LockOutlined
+    },
+    {
-      color: "tertiary",
+      label: labels.unblock,
+      url: link_unblock,
+      color: 'tertiary',
+      icon: LockOpenOutlined
+    },
+    {
-    },
+      label: labels.connect,
+      url: link_request,
+      color: 'tertiary',
+      icon: PersonAddOutlined
+    },
+    {
+      label: labels.cancel,
-    {
+      url: link_cancel,
+      color: 'tertiary',
+      icon: CancelOutlined
+    },
-      label: labels.message || "Mensaje",
+    {
-      url: link_inmail,
+      label: btnLeaveTitle,
-      color: "secondary",
+      url: link_leave,
-    },
+      color: 'tertiary',
-    { label: labels.administrate, url: link_admin, color: "secondary" },
+      icon: LogoutOutlined
                 {link_view && (
                   <li>
                     <Link
                       to={link_view}
                       data-link={link_view}
-                      className="btn btn-primary"
+                      className='btn btn-primary'
+                    >
-                       <EditIcon />
+                      <EditIcon />
                       {btnAcceptTitle}
                     </Link>
                   </li>
                 )}
                 {link_inmail && (
                   <li>
                     <Link
                       to={link_inmail}
                       data-link={link_inmail}
-                      className="btn btn-tertiary"
+                      className='btn btn-tertiary'
+                    >
                       {labels.message}
                     </Link>
                   </li>
                 )}
               </ul>
             )}
           </StyledContent>
         </StyledHeader>
         <StyledItemContainer.Actions>
-          {linksOptions.map(({ label, url }) => {
+          {linksOptions.map(({ label, url, icon: Icon }) => {
-            const breakOptions = [link_view, link_edit, link_inmail];
+            const breakOptions = [link_view, link_edit, link_inmail]
             if (!url) {
-              return null;
+              return null
+            }
             if (url === link_view && isTopData) {
-              return null;
+              return null
             }
             if (url === link_inmail && isTopData) {
-              return null;
+              return null
+            }
             return (
               <button
                 key={url}
                 onClick={() => {
                   if (url === link_unfollow) {
-                    return handleUnfollow(url);
+                    return handleUnfollow(url)
+                  }
                   if (url === link_admin) {
-                    return getManageUrl();
+                    return getManageUrl()
                   }
                   if (url === link_impersonate) {
-                    return getImpersonateUrl(url);
+                    return getImpersonateUrl(url)
+                  }
+                  if (!breakOptions.includes(url)) {
-                  if (!breakOptions.includes(url)) {
+                    return showConfirm(url)
-                    return showConfirm(url);
+                  } else {
-                  } else {
+                    history.push(url)
                     history.push(url);
                 }}
                 }}
                 <Icon />
                 {label}
         show={isShowConfirmation}
         onClose={() => closeConfirm()}
         onAccept={() => onConfirm(confirmUrl.current)}
       />
     </>
-  );
+  )
-};
+}

Proyectos de Subversion LeadersLinked - SPA

(root)/app/components/profile/ProfileItem.jsx – Rev 685 → 720