WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/chat/chat/personal-chat/messageTemplate/MessageTemplate.js

-import React, { useState } from "react";
+import React, { useState } from 'react'
-import parse from "html-react-parser";
+import parse from 'html-react-parser'
-import styled from "styled-components";
+import styled from 'styled-components'
-import LikeButton from "../like-button/LikeButton";
+import LikeButton from '../like-button/LikeButton'
-import { addNotification } from "../../../../redux/notification/notification.actions";
+import { addNotification } from '../../../../redux/notification/notification.actions'
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux'
 const StyledChatImgMessage = styled.div`
   display: flex;
   justify-content: center;
     .fa {
       font-size: 1rem;
       color: gray;
+    }
+  }
-`;
+`
 const ResponseMessageContainer = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
   gap: 10px;
   align-items: ${props => props.isRight ? 'flex-end' : 'flex-start'};
 `
-function propsAreEqual(prevProp, nextProp) {
+function propsAreEqual (prevProp, nextProp) {
   return prevProp.time === nextProp.time
-}
+}
-const MessageTemplate = ({ message, setResponseMessage, responseMessage, time }) => {
 const MessageTemplate = ({ message, setResponseMessage, responseMessage, time }) => {
-  const [isShow, setIsShow] = useState(false);
+  const [isShow, setIsShow] = useState(false)
-  const [isLiked, setIsLiked] = useState(false);
+  const [isLiked, setIsLiked] = useState(false)
   const dispatch = useDispatch()
   const senderName = (message) => {
-    if (message.type === "group") {
+    if (message.type === 'group') {
-      return message.u === 1 ? "" : message.user_name;
+      return message.u === 1 ? '' : message.user_name
+    }
   };
+  }
   const handleCopy = async () => {
     await navigator.clipboard.writeText(`${message.m}`)
     dispatch(addNotification({
-      style: "success",
+      style: 'success',
-      msg: 'Mensaje copiado en el portapapeles',
+      msg: 'Mensaje copiado en el portapapeles'
     }))
     setIsShow(!isShow)
+  }
   switch (message.mtype) {
-    case "text":
+    case 'text':
       return (
         <li
           key={message.id}
-          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
+          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}
+        >
           <div className="conversation-text">
             <div className="conversation_container w-100">
-              {
                 responseMessage
-                &&
+                responseMessage &&
                 <ResponseMessageContainer isRight={message.u === 1}>
                   <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
                   <div className="ctext-wrap">
                   <p className="">
                     {parse(emojione.shortnameToImage(message.m))}
                     <br />
                     <div className="d-inline-flex align-items-center">
+                      {
-                        !message.not_received
+                        !message.not_received &&
-                        &&
-                        <i className={"fa fa-check text-right ellipsis "} style={message.seen ? { color: 'blue' } : { color: 'gray' }} />
+                        <i className={'fa fa-check text-right ellipsis '} style={message.seen ? { color: 'blue' } : { color: 'gray' }} />
+                      }
                       <label>{time}</label>
                     </div>
                   </p>
+                  {
-                    isLiked
+                    isLiked &&
-                    &&
                     <i
                       className="fas fa-heart"
                       style={{
                         color: '#0961bf',
                         position: 'absolute',
                   className="la la-ellipsis-v icon"
                   style={{ position: 'relative' }}
                   onClick={() => setIsShow(!isShow)}
                 />
+                {
-                  isShow
+                  isShow &&
-                  &&
                   <div className="display-reactions" >
                     <LikeButton onClick={handleLike} />
                     <button type="button" onClick={() => handleResponse(message)}>
                       <i className="fa fa-reply" />
                     </button>
+                }
               </div>
             </div>
           </div>
         </li>
-      );
+      )
-    case "image":
+    case 'image':
       return (
         <li
           key={message.id}
-          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
+          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}
+        >
           <div
             className="conversation-text"
             data-toggle="tooltip"
             data-placement="left"
               <StyledChatImgMessage>
                 <div className="chat_image_container">
                   <img src={message.m} alt="chat_image" />
                 </div>
+                {
-                  message.u !== 1
+                  message.u !== 1 &&
-                  &&
                   <a
                     href={message.m}
                     download
                     className="chat_image__download_button"
+                  >
+                }
               </StyledChatImgMessage>
               <br />
               <i className="text-right">{time}</i>
+              {
-                isLiked
+                isLiked &&
-                &&
                 <i
                   className="fas fa-heart"
                   style={{
                     color: '#0961bf',
                     position: 'absolute',
               className="la la-ellipsis-v icon"
               style={{ position: 'relative' }}
               onClick={() => setIsShow(!isShow)}
             />
+            {
-              isShow
+              isShow &&
-              &&
               <div className="display-reactions">
                 <LikeButton onClick={handleLike} />
                 <button type="button" onClick={() => handleResponse(message)}>
                   <i className="fa fa-reply" />
                 </button>
               </div>
+            }
           </div>
         </li>
-      );
+      )
-    case "video":
+    case 'video':
       return (
         <li
           key={message.id}
-          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
+          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}
+        >
           <div
             className="conversation-text"
             data-toggle="tooltip"
             data-placement="left"
+                >
                   <div className="chat_image_container">
                     <video src={message.m} preload="none" controls></video>
                   </div>
                 </a>
-                {message.u !== 1
+                {message.u !== 1 &&
-                  &&
                   <a
                     href={message.m}
                     download
                     className="chat_image__download_button"
+                  >
+                }
               </StyledChatImgMessage>
               <br />
               <i className="text-right">{time}</i>
+              {
-                isLiked
+                isLiked &&
-                &&
                 <i
                   className="fas fa-heart"
                   style={{
                     color: '#0961bf',
                     position: 'absolute',
               className="la la-ellipsis-v icon"
               style={{ position: 'relative' }}
               onClick={() => setIsShow(!isShow)}
             />
+            {
-              isShow
+              isShow &&
-              &&
               <div className="display-reactions">
                 <LikeButton onClick={handleLike} />
                 <button type="button" onClick={() => handleResponse(message)}>
                   <i className="fa fa-reply" />
                 </button>
               </div>
+            }
           </div>
         </li>
-      );
+      )
-    case "document":
+    case 'document':
       return (
         <li
           key={message.id}
-          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
+          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}
+        >
           <div
             className="conversation-text"
             data-toggle="tooltip"
             data-placement="left"
                     className="pdf"
                     src="/storage/type/default/filename/pdf.png"
                     alt="pdf"
                   />
                 </div>
-                {message.u !== 1
+                {message.u !== 1 &&
-                  &&
                   <a
                     href={message.m}
                     target="_blank"
                     className="chat_image__download_button" rel="noreferrer"
+                  >
+                }
               </StyledChatImgMessage>
               <br />
               <i className="text-right">{time}</i>
+              {
-                isLiked
+                isLiked &&
-                &&
                 <i
                   className="fas fa-heart"
                   style={{
                     color: '#0961bf',
                     position: 'absolute',
               className="la la-ellipsis-v icon"
               style={{ position: 'relative' }}
               onClick={() => setIsShow(!isShow)}
             />
+            {
-              isShow
+              isShow &&
-              &&
               <div className="display-reactions">
                 <LikeButton onClick={handleLike} />
                 <button type="button" onClick={() => handleResponse(message)}>
                   <i className="fa fa-reply" />
                 </button>
               </div>
+            }
           </div>
         </li>
-      );
+      )
     default:
       return (
         <li
           key={message.id}
-          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
+          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}
+        >
           <div
             className="conversation-text"
             data-toggle="tooltip"
             data-placement="left"
               className="la la-ellipsis-v icon"
               style={{ position: 'relative' }}
               onClick={() => setIsShow(!isShow)}
             />
+            {
-              isShow
+              isShow &&
-              &&
               <div className="display-reactions">
                 <LikeButton onClick={handleLike} />
                 <button type="button" onClick={() => setResponseMessage(message)}>
                   <i className="fa fa-reply" />
                 </button>
               </div>
+            }
           </div>
         </li>
-      );
+      )
+  }
-};
+}

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/chat/chat/personal-chat/messageTemplate/MessageTemplate.js – Rev 3089 → 5334