From 421f003805503cb43f3900581933961d82c3fd42 Mon Sep 17 00:00:00 2001
From: Dunsin <78784850+Dun-sin@users.noreply.github.com>
Date: Fri, 23 Dec 2022 19:03:29 +0100
Subject: [PATCH] feat(chat.jsx): add ability to copy to clipboard (#244)

closes #221
---
 client/src/components/Chat.jsx | 41 ++++++++++++++++++++++++++++------
 client/src/styles/chat.css     |  6 ++---
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Chat.jsx b/client/src/components/Chat.jsx
index fb8af6b0..ca293997 100644
--- a/client/src/components/Chat.jsx
+++ b/client/src/components/Chat.jsx
@@ -42,6 +42,7 @@ const Chat = () => {
 
     const { sendMessage, deleteMessage, editMessage } = useChatUtils(socket);
     const inputRef = useRef('');
+
     const listOfBadWordsNotAllowed = [
         'sex',
         'porn',
@@ -208,9 +209,9 @@ const Chat = () => {
         const message = getMessage(id);
 
         if (message.includes('Warning Message')) {
-            return
+            return;
         }
-        
+
         updateMessage(id, {
             ...message,
             status: 'pending',
@@ -321,7 +322,7 @@ const Chat = () => {
 
         const { message } = getMessage(id);
         if (message.includes('Warning Message')) {
-            cancelEdit()
+            cancelEdit();
             return;
         }
         inputRef.current.value = message;
@@ -340,6 +341,17 @@ const Chat = () => {
         }
     }, 500);
 
+    const handleCopyToClipBoard = async (id) => {
+        const { message } = getMessage(id);
+        if (message.includes('Warning Message')) {
+            return;
+        }
+        if ('clipboard' in navigator) {
+            return await navigator.clipboard.writeText(message);
+        } else {
+            return document.execCommand('copy', true, message);
+        }
+    };
     const getTime = (time) => {
         return new Date(time).toLocaleTimeString();
     };
@@ -361,7 +373,7 @@ const Chat = () => {
                 </p>
                 <ScrollToBottom
                     initialScrollBehavior="auto"
-                    className="displayMessgaes h-[100%] max-h-[62vh] md:max-h-full overflow-y-scroll w-[100%] "
+                    className="displayMessgaes h-[100%] max-h-[70vh] md:max-h-full overflow-y-scroll w-[100%] "
                 >
                     {sortedMessages.map(
                         ({ senderId: sender, id, message, time, status }) => {
@@ -383,8 +395,14 @@ const Chat = () => {
                                     }`}
                                 >
                                     <div className="message">
-                                        <div className="content">
-                                            <p className="text">{message}</p>
+                                        <div
+                                            className={`content text ${
+                                                sender.toString() ===
+                                                    senderId.toString() &&
+                                                'justify-between'
+                                            }`}
+                                        >
+                                            <p>{message}</p>
                                             {sender.toString() ===
                                                 senderId.toString() &&
                                                 status !== 'pending' && (
@@ -394,7 +412,7 @@ const Chat = () => {
                                                         renderToggle={
                                                             renderIconButton
                                                         }
-                                                        noCaret
+                                                        NoCaret
                                                     >
                                                         <Dropdown.Item
                                                             onClick={() =>
@@ -410,6 +428,15 @@ const Chat = () => {
                                                         >
                                                             Edit
                                                         </Dropdown.Item>
+                                                        <Dropdown.Item
+                                                            onClick={() =>
+                                                                handleCopyToClipBoard(
+                                                                    id
+                                                                )
+                                                            }
+                                                        >
+                                                            Copy
+                                                        </Dropdown.Item>
                                                     </Dropdown>
                                                 )}
                                         </div>
diff --git a/client/src/styles/chat.css b/client/src/styles/chat.css
index 1c9d62cf..40f530bc 100644
--- a/client/src/styles/chat.css
+++ b/client/src/styles/chat.css
@@ -29,15 +29,15 @@
     }
 
     .message-block .message {
-        @apply flex flex-col mb-[15px] min-w-[250px] mdl:max-w-[80%] max-w-[50%];
+        @apply flex flex-col mb-[2px] min-w-[10px] mdl:max-w-[80%] max-w-[50%];
     }
 
     .message-block.me .message .content {
-        @apply bg-secondary justify-end;
+        @apply bg-secondary;
     }
 
     .message-block .message .content {
-        @apply bg-red rounded-[20px] p-[15px] break-all w-full flex gap-2 items-start;
+        @apply bg-red rounded-[20px] p-[15px] break-all w-full flex gap-2 items-center;
     }
 
     .message-block .message .status {