WebSVN – LeadersLinked - SPA – Diff – /app/components/chat/Chat.jsx

-import React, { memo, useEffect, useRef, useState } from "react";
+import React, { memo, useEffect, useRef, useState } from 'react'
-import { axios } from "../../utils";
+import { axios } from '../../utils'
-import { useForm } from "react-hook-form";
+import { useForm } from 'react-hook-form'
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux'
-import { addNotification } from "../../redux/notification/notification.actions";
+import { addNotification } from '../../redux/notification/notification.actions'
-import parse from "html-react-parser";
+import parse from 'html-react-parser'
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components'
-import SendIcon from "@mui/icons-material/Send";
+import SendIcon from '@mui/icons-material/Send'
-import IconButton from "@mui/material/IconButton";
+import IconButton from '@mui/material/IconButton'
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import AttachFileIcon from "@mui/icons-material/AttachFile";
+import AttachFileIcon from '@mui/icons-material/AttachFile'
-import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
+import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'
-import Options from "../UI/Option";
+import Options from '../UI/Option'
-import Emojione from "./emojione/Emojione";
+import Emojione from './emojione/Emojione'
-import FileModal from "../modals/FileModal";
+import FileModal from '../modals/FileModal'
-import LoaderContainer from "../UI/LoaderContainer";
+import LoaderContainer from '../UI/LoaderContainer'
-import Spinner from "../UI/Spinner";
+import Spinner from '../UI/Spinner'
+import { Link } from 'react-router-dom'
 const StyledChatContainer = styled.div`
   background-color: var(--bg-color);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-primary);
   height: 80vh;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   padding: 0px 0px !important;
 `;
 const StyledChatHeader = styled.div`
   align-items: center;
     display: inline-flex;
     @media (min-width: 768px) {
       display: none;
-    }
+    }
   }
 `;
 const StyledTitle = styled.h2`
-font-size: 16px;
+  font-size: 16px;
-font-weight: 600;
+  font-weight: 600;
-width: fit-content;
+  width: fit-content;
-max-width: 20ch;
+  max-width: 20ch;
-text-align: center;
-color: #1d315c;
+  text-align: center;
   color: #1d315c;
   @media (min-width: 768px) {
     max-width: 30ch;
+  }
 `;
 const StyledMessageList = styled.div`
   gap: 0.5rem;
   display: flex;
   flex-direction: column-reverse;
   height: -webkit-fill-available;
   padding: 0.5rem 0;
   overflow: auto;
 `;
         align-self: flex-end;
         background-color: #eee;
         border-radius: 10px 0px 10px 10px;
         margin-right: 0.5rem;
         color: #393939;
-      `;
+      `
+    }
     return css`
       align-self: flex-start;
       background-color: var(--chat-received);
       border-radius: 0 10px 10px 10px;
       margin-left: 0.5rem;
-    `;
+    `
   }}
-`;
+`
 const StyledForm = styled.form`
   border-top: 1px solid var(--border-primary);
   padding: 0.5rem;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
 `;
 const StyledInput = styled.input`
   border: none;
   background: var(--bg-color-secondary);
   &:focus {
     background: var(--bg-color-secondary);
   }
 `;
 const StyledLoader = styled(LoaderContainer)`
   max-height: 50px;
   max-width: 50px;
 `;
 function messageAreEqual(oldProps, newProps) {
   return oldProps.message.id
     ? oldProps.message.id === newProps.message.id
-    : oldProps.message.uuid === newProps.message.uuid;
+    : oldProps.message.uuid === newProps.message.uuid
 }
 const Chat = ({ children }) => {
-  return <StyledChatContainer>{children}</StyledChatContainer>;
+  return <StyledChatContainer>{children}</StyledChatContainer>
 };
 const Header = ({ children, options = [], onClose }) => {
   return (
     <StyledChatHeader>
       <IconButton onClick={onClose}>
         <ArrowBackIcon />
       </IconButton>
       {children}
       {!!options.length && <Options options={options} right="1rem" />}
     </StyledChatHeader>
   );
 };
 const Title = ({ children, url }) => {
   if (!url) {
-    return <StyledTitle>{children}</StyledTitle>;
+    return <StyledTitle>{children}</StyledTitle>
   }
   return (
-    <a href={url} style={{ width: "fit-content" }}>
+    <Link to={url} style={{ width: 'fit-content' }}>
       <StyledTitle>{children}</StyledTitle>
-    </a>
+    </Link>
-  );
+  )
 };
 const List = ({ messages = [], onPagination, scrollRef, loading }) => {
-  const loadMoreEl = useRef(null);
+  const loadMoreEl = useRef(null)
   useEffect(() => {
-    const observer = new IntersectionObserver(onPagination);
+    const observer = new IntersectionObserver(onPagination)
     if (loadMoreEl.current) {
         <StyledLoader>
           <Spinner />
         </StyledLoader>
       )}
     </StyledMessageList>
-  );
+  )
-};
+}
 // eslint-disable-next-line react/display-name
 const Message = memo(({ message }) => {
   const senderName = (message) => {
-    if (message.type === "group" && !message.u === 1) {
+    if (message.type === 'group' && !message.u === 1) {
-      return <span className="user_name">{message.user_name}</span>;
+      return <span className="user_name">{message.user_name}</span>
     }
   };
   const messagesContent = {
     text: (
     document: (
       <a href={message.m || message.filename} download>
         <img className="pdf" src="/images/extension/pdf.png" alt="pdf" />
       </a>
     ),
-  };
+  }
   return (
     <>
       {senderName(message)}
       <StyledMessage
-        send={message.u ? message.u === 1 : message.side === "left"}
+        send={message.u ? message.u === 1 : message.side === 'left'}
+      >
         {messagesContent[message.mtype || message.type]}
         <label className="time">
           {!message.not_received && (
             <i
               className="fa fa-check"
-              style={message.seen ? { color: "blue" } : { color: "gray" }}
+              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
             />
           )}
           {message.time || message.date}
         </label>
       </StyledMessage>
     </>
-  );
+  )
-}, messageAreEqual);
+}, messageAreEqual)
 const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {
-  const [showEmojione, setShowEmojione] = useState(false);
+  const [showEmojione, setShowEmojione] = useState(false)
-  const [isShowFileModal, setIsShowFileModal] = useState(false);
+  const [isShowFileModal, setIsShowFileModal] = useState(false)
-  const [isSending, setIsSending] = useState(false);
+  const [isSending, setIsSending] = useState(false)
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
-  const { handleSubmit, setValue, register, reset, getValues } = useForm();
+  const { handleSubmit, setValue, register, reset, getValues } = useForm()
   const onSubmit = handleSubmit(({ message }) => {
-    const formData = new FormData();
+    const formData = new FormData()
     // eslint-disable-next-line no-undef
-    formData.append("message", emojione.toShort(message));
+    formData.append('message', emojione.toShort(message))
     axios.post(sendUrl, formData).then((response) => {
-      const { success, data } = response.data;
+      const { success, data } = response.data
       if (!success) {
         const errorMessage =
-          typeof data === "string" ? data : "Ha ocurrido un error";
+          typeof data === 'string' ? data : 'Ha ocurrido un error'
-        setShowEmojione(false);
+        setShowEmojione(false)
-        dispatch(addNotification({ style: "danger", msg: errorMessage }));
+        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
-        return;
+        return
       }
-      setShowEmojione(false);
+      setShowEmojione(false)
-      onComplete();
+      onComplete()
-      reset();
+      reset()
-    });
+    })
-  });
+  })
   const sendFile = (file) => {
-    setIsSending(true);
+    setIsSending(true)
-    const formData = new FormData();
+    const formData = new FormData()
-    formData.append("file", file);
+    formData.append('file', file)
     axios
       .post(uploadUrl, formData)
       .then(({ data: response }) => {
-        const { success, data } = response;
+        const { success, data } = response
         if (!success) {
           const errorMessage =
-            typeof data === "string" ? data : "Ha ocurrido un error";
+            typeof data === 'string' ? data : 'Ha ocurrido un error'
-          dispatch(addNotification({ style: "success", msg: errorMessage }));
+          dispatch(addNotification({ style: 'success', msg: errorMessage }))
-          return;
+          return
         }
-        toggleFileModal();
+        toggleFileModal()
-        onComplete();
+        onComplete()
       })
-      .finally(() => setIsSending(false));
+      .finally(() => setIsSending(false))
-  };
+  }
   const toggleEmojione = () => {
-    setShowEmojione(!showEmojione);
+    setShowEmojione(!showEmojione)
   };
   const toggleFileModal = () => {
         onHide={toggleFileModal}
         onComplete={sendFile}
         loading={isSending}
       />
     </>
-  );
+  )
-};
+}
-Chat.Header = Header;
+Chat.Header = Header
-Chat.Title = Title;
+Chat.Title = Title
-Chat.List = List;
+Chat.List = List
-List.Message = Message;
+List.Message = Message
-Chat.SubmitForm = SubmitForm;
+Chat.SubmitForm = SubmitForm

Proyectos de Subversion LeadersLinked - SPA

(root)/app/components/chat/Chat.jsx – Rev 448 → 517