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";
 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;
 `;
 const StyledChatHeader = styled.div`
   align-items: center;
     @media (min-width: 768px) {
       display: none;
+    }
   }
 `;
 const StyledTitle = styled.h2`
   font-size: 1.5rem;
   text-align: center;
   @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;
 `;
 const StyledMessage = styled.div`
   &:first-child {
     margin-top: 0.5rem;
+  }
   .time {
-    color: $subtitle-color;
+    color: var(--subtitle-color);
     font-size: 0.8rem;
+  }
       return css`
         align-self: flex-end;
         background-color: var(--chat-send);
         border-radius: 10px 0 10px 10px;
         margin-right: 0.5rem;
-      `
+      `;
+    }
     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;
   outline: none;
-  flex: 1;
+  width: 100%;
   padding: 0.5rem 1rem;
   border-radius: 30px;
-  background: $bg-color-secondary;
+  background: var(--bg-color-secondary);
   &:focus {
-    background: $bg-color-secondary;
+    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' }}>
+    <a href={url} style={{ width: "fit-content" }}>
       <StyledTitle>{children}</StyledTitle>
     </a>
   );
-}
+};
 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);
         <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 5 → 197