WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/components/Profile.jsx

+/* eslint-disable camelcase */
 /* eslint-disable react/prop-types */
-import React, { useState } from "react";
+import React, { useState } from 'react'
-import { addNotification } from "../redux/notification/notification.actions";
+import { addNotification } from '../redux/notification/notification.actions'
-import ConfirmationBox from "../shared/confirmation-box/ConfirmationBox";
+import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
-import Spinner from "../shared/loading-spinner/Spinner";
+import Spinner from '../shared/loading-spinner/Spinner'
-import { axios } from "../utils";
+import { axios } from '../utils'
 import styled from 'styled-components'
 const StyledSpinnerContainer = styled.div`
   position: absolute;
   background: rgba(255, 255, 255, 0.4);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 300;
-`;
+`
-const Profile = (props) => {
+const Profile = ({
-  // props destructuring
-  const {
-    image,
+  image,
-    name,
+  name,
-    email,
+  email,
-    network,
+  network,
-    status,
+  status,
-    link_view,
+  link_view,
-    link_edit,
+  link_edit,
-    link_delete,
+  link_delete,
-    link_cancel,
+  link_cancel,
-    link_block,
+  link_block,
-    link_reject,
+  link_reject,
-    link_accept,
+  link_accept,
-    link_inmail,
+  link_inmail,
-    link_request,
+  link_request,
-    link_unblock,
+  link_unblock,
-    link_unfollow,
+  link_unfollow,
-    link_approve,
+  link_approve,
-    link_leave,
+  link_leave,
-    link_admin,
+  link_admin,
-    link_impersonate,
+  link_impersonate,
-    fetchCallback,
+  fetchCallback,
-    isTopData = false,
+  isTopData = false,
-    btnAcceptTitle = 'Ver perfil',
+  btnAcceptTitle = 'Ver perfil',
-    btnCancelTitle = 'Borrar perfil',
+  btnCancelTitle = 'Borrar perfil',
-    btnEditTitle = 'Editar perfil'
+  btnEditTitle = 'Editar perfil'
-  } = props;
-  const getImpersonateUrl = async (url = '') => {
-    try {
+}) => {
-      const { data } = await axios.get(url)
-      if (data.success) window.location.href = data.data;
-    } catch (error) {
-      console.log('>>: error > ', error)
-    }
-  }
-  // states
-  const [showConfirmationBox, setShowConfirmationBox] = useState(false);
+  const [showConfirmationBox, setShowConfirmationBox] = useState(false)
-  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false);
+  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false)
-  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false);
+  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false)
-  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false);
+  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false)
-  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false);
+  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false)
-  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false);
+  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false)
-  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false);
+  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false)
-  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false);
+  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false)
   const [loading, setLoading] = useState(false)
   const handleShowConfirmationBox = (show = !showConfirmationBox) => {
-    setShowConfirmationBox(show);
+    setShowConfirmationBox(show)
-  };
+  }
   const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
-    setShowCancelConfirmationBox(show);
+    setShowCancelConfirmationBox(show)
-  };
+  }
   const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
-    setShowBlockConfirmationBox(show);
+    setShowBlockConfirmationBox(show)
-  };
+  }
   const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
-    setShowRejectConfirmationBox(show);
+    setShowRejectConfirmationBox(show)
-  };
+  }
   const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
-    setShowApproveConfirmationBox(show);
+    setShowApproveConfirmationBox(show)
-  };
+  }
   const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
-    setShowRequestConfirmationBox(show);
+    setShowRequestConfirmationBox(show)
-  };
+  }
   const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
-    setShowUnblockConfirmationBox(show);
+    setShowUnblockConfirmationBox(show)
-  };
+  }
   const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
-    setShowLeaveConfirmationBox(show);
+    setShowLeaveConfirmationBox(show)
+  }
+  const getImpersonateUrl = async (url = '') => {
+    try {
+      const { data } = await axios.get(url)
+      if (data.success) window.location.href = data.data
+    } catch (error) {
+      console.log('>>: error > ', error)
+    }
-  };
+  }
   const handleCancelApply = (url = link_delete) => {
-    setLoading(true);
+    setLoading(true)
     axios.post(url)
       .then(({ data }) => {
         if (!data.success) {
           const errorMsg =
-            typeof data.data === "string"
+            typeof data.data === 'string'
               ? data.data
-              : "Ha ocurrido un error, Por favor intente más tarde";
+              : 'Ha ocurrido un error, Por favor intente más tarde'
           addNotification({
-            style: "danger",
+            style: 'danger',
-            msg: errorMsg,
+            msg: errorMsg
-          });
+          })
         }
-        const msg = data.data;
+        const msg = data.data
         addNotification({
-          style: "success",
+          style: 'success',
-          msg: msg,
+          msg
-        });
+        })
-        if (fetchCallback) fetchCallback();
+        if (fetchCallback) fetchCallback()
       })
       .catch((error) => console.log('>>: error > ', error))
       .finally(() => setLoading(false))
   };
   const handleUnfollow = async (link_unfollow) => {
-    setLoading(true);
+    setLoading(true)
     await axios.post(link_unfollow)
       .then(({ data }) => {
         if (data.success) fetchCallback()
         typeof data.data === 'string' &&
           addNotification({
-            style: "danger",
+            style: 'danger',
             msg: data.data
           })
       })
-    setLoading(false);
+    setLoading(false)
   };
+  }
   return (
     <div className='profile_info'>
       <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
-        {!!image &&
+        {image &&
           <div className='profile_info_header_imgContainer'>
             <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
           </div>
-        }
-        <div
+        }
-          className={`${image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'} ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}>
+        <div className={`${image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'} ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}>
-          <h3 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
+          <h3 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
             {name}
           </h3>
           {(isTopData && email) &&
-            <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
+            <h4 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
               {email}
             </h4>
+          }
           {network &&
-            <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
+            <h4 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
               {network}
             </h4>
-          }
-          {
+          }
-            isTopData
-            &&
+          {isTopData &&
             <ul>
               {link_view &&
                 <li>
                   <a
                   <a
                     href={link_inmail}
                     data-link={link_inmail}
                     className="btn btn-primary"
+                  >
-                    Mensaje
+                    {LABELS.MESSAGE}
                   </a>
                 </li>
+              }
             </ul>
+          }
               </a>
             </li>
+          )
+        }
+        {
-          link_approve
+          link_approve &&
-          &&
           <li>
             <a
               href="#"
               className="btn btn-tertiary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleApproveConfirmationBox();
+                handleApproveConfirmationBox()
               }}
+            >
-              Aprobar
+            {LABELS.APPROVE}
             </a>
           </li>
+        }
+        {
-          link_accept
+          link_accept &&
-          &&
           <li>
             <a
               href="#"
               className="btn btn-tertiary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleApproveConfirmationBox();
+                handleApproveConfirmationBox()
               }}
+            >
-              Aceptar
+              {LABEL.ACCEPT}
             </a>
           </li>
+        }
+        {
           link_reject &&
           <li>
             <a
               href="#"
               className="btn btn-primary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleRejectConfirmationBox();
+                handleRejectConfirmationBox()
               }}
+            >
-              Rechazar
+              {LABELS.REJECT}
             </a>
           </li>
+        }
+        {
           link_delete &&
           <li>
             <a
               href="#"
               className="btn btn-primary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleShowConfirmationBox();
+                handleShowConfirmationBox()
               }}
+            >
               {btnCancelTitle}
             </a>
           </li>
+        }
+        {
-          link_inmail && !isTopData
+          link_inmail && !isTopData &&
-          &&
           <li>
             <a
               href={link_inmail}
               data-link={link_inmail}
               title=""
               className="btn btn-primary"
+            >
-              Mensaje
+              {LABELS.MESSAGE}
             </a>
           </li>
+        }
+        {
           link_admin &&
               onClick={() => getManageUrl()}
               data-link={link_admin}
               title="Administrar empresa"
               className="btn btn-primary"
+            >
-              Administrar
+              {LABELS.ADMINISTRATE}
             </a>
           </li>
+        }
+        {
-          link_unfollow
+          link_unfollow &&
-          &&
           <li>
             <a
               onClick={() => handleUnfollow(link_unfollow)}
               data-link={link_unfollow}
               title="Administrar empresa"
               className="btn btn-primary"
+            >
-              Dejar de seguir
+              {LABELS.UNFOLLOW}
             </a>
           </li>
+        }
           <li>
             <a
               href="#"
               className="btn btn-primary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleBlockConfirmationBox();
+                handleBlockConfirmationBox()
               }}
+            >
-              Bloquear
+              {LABELS.BLOCK}
             </a>
           </li>
+        }
+        {
           link_unblock && (
             <li>
               <a
                 href="#"
                 className="btn btn-tertiary"
                 onClick={(e) => {
-                  e.preventDefault();
+                  e.preventDefault()
-                  handleUnblockConfirmationBox();
+                  handleUnblockConfirmationBox()
                 }}
+              >
-                Desbloquear
+                {LABELS.UNBLOCK}
               </a>
             </li>
+          )
+        }
+        {
-          link_request
+          link_request &&
-          &&
           <li>
             <a
               href="#"
               className="btn btn-tertiary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleRequestConfirmationBox();
+                handleRequestConfirmationBox()
               }}
+            >
-              Conectar
+              {LABELS.CONECT}
             </a>
           </li>
+        }
+        {
-          link_cancel
+          link_cancel &&
-          &&
           <li>
             <a
               href="#"
               className="btn btn-primary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleCancelConfirmationBox();
+                handleCancelConfirmationBox()
               }}
+            >
-              Cancelar
+              {LABELS.CANCEL}
             </a>
           </li>
+        }
-        {
-          link_leave &&
+        {link_leave &&
           <li>
             <a
               href="#"
               className="btn btn-tertiary"
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
-                handleLeaveConfirmationBox();
+                handleLeaveConfirmationBox()
               }}
+            >
-              Abandonar
+              {LABELS.LEAVE}
             </a>
           </li>
+        }
+        {link_impersonate &&
+        <li>
+          <a href="#" className="btn btn-tertiary" onClick={() => getImpersonateUrl(link_impersonate)} > Personificar </a>
+        </li>
+      }
       </ul>
+      {
         link_delete &&
-        <div style={{ position: "relative" }}>
+        <div style={{ position: 'relative' }}>
           <ConfirmationBox
             show={showConfirmationBox}
             onClose={() => handleShowConfirmationBox(false)}
             onAccept={() => handleCancelApply(link_delete)}
           />
         </div>
+      }
+      {
         link_cancel && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showCancelConfirmationBox}
               onClose={() => handleCancelConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_cancel)}
             />
           </div>
+        )
+      }
+      {
         link_block && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showBlockConfirmationBox}
               onClose={() => handleBlockConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_block)}
             />
           </div>
+        )
+      }
+      {
         link_accept && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showApproveConfirmationBox}
               onClose={() => handleApproveConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_accept)}
             />
           </div>
+        )
+      }
+      {
         link_approve && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showApproveConfirmationBox}
               onClose={() => handleApproveConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_approve)}
             />
           </div>
+        )
+      }
+      {
         link_reject && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showRejectConfirmationBox}
               onClose={() => handleRejectConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_reject)}
             />
           </div>
+        )
+      }
+      {
         link_request && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showRequestConfirmationBox}
               onClose={() => handleRequestConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_request)}
             />
           </div>
+        )
+      }
+      {
         link_unblock && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showUnblockConfirmationBox}
               onClose={() => handleUnblockConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_unblock)}
             />
           </div>
+        )
+      }
+      {
         link_leave && (
-          <div style={{ position: "relative" }}>
+          <div style={{ position: 'relative' }}>
             <ConfirmationBox
               show={showLeaveConfirmationBox}
               onClose={() => handleLeaveConfirmationBox(false)}
               onAccept={() => handleCancelApply(link_leave)}
             />
           </div>
+        )
+      }
-      {
-        link_impersonate
-        &&
-        <li>
-          <a
-            href="#" onClick={() => getImpersonateUrl(link_impersonate)} > Personificar </a>
-        </li>
-      }
-      {
-        loading &&
+      {loading &&
         <StyledSpinnerContainer>
           <Spinner />
         </StyledSpinnerContainer>
+      }
-    </div >
+    </div>
-  );
+  )
-};
+}

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/components/Profile.jsx – Rev 3816 → 5070