Lizardkinglk

components/cards/message/index.tsx

@@ -5,6 +5,7 @@ import { IMessageCardProps } from "@/types";
 import MessageMedia from "@/components/media/message";
 import VerticalEllipsis from "@/components/svgs/ellipsis/vertical";
 import MessageMenu from "@/components/menus/message";
+import Close from "@/components/svgs/close";
 
 export default function MessageCard(props: IMessageCardProps) {
   const [options, setOptions] = useState(false);
@@ -18,6 +19,7 @@ export default function MessageCard(props: IMessageCardProps) {
       messageImagePath,
       content,
       onDeleteHandler,
+      onCopyHandler,
       loading,
     } = props;
 
@@ -37,8 +39,8 @@ export default function MessageCard(props: IMessageCardProps) {
             messageTime={messageTime}
             referenceId={referenceId}
             options={options}
-            setOptions={setOptions}
             onDeleteHandler={onDeleteHandler}
+            onCopyHandler={onCopyHandler}
             loading={loading}
           />
         ) : (
@@ -54,7 +56,13 @@ export default function MessageCard(props: IMessageCardProps) {
           </div>
         )}
         {type === messageTypes.SENT && (
-          <button
+          options ? <button
+            className="flex h-min mt-4 text-stone-100 hover:text-stone-100"
+            title="Close Message Options"
+            onClick={() => setOptions((prev) => !prev)}
+          >
+            <Close size={6} />
+          </button> : <button
             className="flex h-min mt-4 text-stone-900 hover:text-stone-100"
             title="Message Options"
             onClick={() => setOptions((prev) => !prev)}

components/lists/message/MessageList.tsx

@@ -4,7 +4,7 @@ import { Fragment } from "react";
 
 const MessageList = (props: IMessageListProps) => {
   if (props) {
-    const { messages, group, active, lastMessageRef, onDeleteHandler, loading } = props;
+    const { messages, group, active, lastMessageRef, onDeleteHandler, onCopyHandler, loading } = props;
     return (
       <Fragment>
         {group &&
@@ -18,6 +18,7 @@ const MessageList = (props: IMessageListProps) => {
                 messageTime={message.createdOn}
                 messageImagePath={group.displayImage}
                 onDeleteHandler={onDeleteHandler}
+                onCopyHandler={onCopyHandler}
                 loading={loading}
               />
             </Fragment>

components/media/message/index.tsx

@@ -1,19 +1,17 @@
 import React from "react";
 import Picture from "../../picture";
-import { isLocalStorage, isImage, isMedia } from "@/utils/helpers";
+import { isLocalStorage, isImage } from "@/utils/helpers";
 
 const MessageMedia = (props: { content: string }) => {
   const { content } = props;
   if (props) {
-    if (isMedia(content)) {
-      if (isImage(content)) {
-        const path = content.substring(
-          content.indexOf("(") + 1,
-          content.indexOf(")")
-        );
-        const src = isLocalStorage() ? `/uploads/${path}` : path;
-        return <Picture alt="preview" height={120} width={120} src={src} />;
-      }
+    if (isImage(content)) {
+      const path = content.substring(
+        content.indexOf("(") + 1,
+        content.indexOf(")")
+      );
+      const src = isLocalStorage() ? `/uploads/${path}` : path;
+      return <Picture alt="preview" height={120} width={120} src={src} />;
     }
     return (
       <h1

components/menus/message/index.tsx

@@ -1,13 +1,15 @@
+import React from "react";
+
 import Bin from "@/components/svgs/Bin";
-import Close from "@/components/svgs/close";
+import Copy from "@/components/svgs/copy";
 import Pencil from "@/components/svgs/pencil";
 import Spinner from "@/components/svgs/spinner";
+
 import { IMessageMenuProps } from "@/types";
-import React from "react";
 
 const MessageMenu = (props: IMessageMenuProps) => {
   if (props) {
-    const { referenceId, options, onDeleteHandler, loading, messageTime, setOptions } =
+    const { referenceId, options, onDeleteHandler, onCopyHandler, loading, messageTime } =
       props;
 
     if (options) {
@@ -23,29 +25,27 @@ const MessageMenu = (props: IMessageMenuProps) => {
                 title="Edit Message"
                 className="text-green-500 font-black rounded-full text-sm text-center w-full p-2"
               >
-                <Pencil />
+                <Pencil size={6} />
               </button>
             </li>
             <li className="pr-2">
               <button
-                id={`${referenceId}`}
                 type="button"
-                title="Delete Message"
-                className="text-red-500 font-black rounded-full text-sm text-center w-full p-2"
-                onClick={() => onDeleteHandler(referenceId)}
+                title="Copy Message"
+                className="text-green-500 font-black rounded-full text-sm text-center w-full p-2"
+                onClick={() => onCopyHandler(referenceId)}
               >
-                {loading ? <Spinner size={8} /> : <Bin size={8} />}
+                <Copy size={6} />
               </button>
             </li>
-            <li>
+            <li className="pr-2">
               <button
-                id={`${referenceId}`}
                 type="button"
-                title="Close"
-                className="text-white font-black rounded-full text-sm text-center w-full p-2"
-                onClick={() => setOptions(false)}
+                title="Remove Message"
+                className="text-red-500 font-black rounded-full text-sm text-center w-full p-2"
+                onClick={() => onDeleteHandler(referenceId)}
               >
-                <Close size={8} />
+                {loading ? <Spinner size={6} /> : <Bin size={6} />}
               </button>
             </li>
           </ul>

components/sections/group/index.tsx

@@ -18,6 +18,7 @@ const Group = (props: IGroupSectionProps) => {
       onKeyDownHandler,
       onSubmitHandler,
       onDeleteHandler,
+      onCopyHandler,
       onMediaHandler,
       textInputRef,
       loading,
@@ -56,6 +57,7 @@ const Group = (props: IGroupSectionProps) => {
             notifs={notifs}
             lastMessageRef={lastMessageRef}
             onDeleteHandler={onDeleteHandler}
+            onCopyHandler={onCopyHandler}
             loading={loading}
           />
         </div>

components/sections/index.tsx

@@ -30,6 +30,7 @@ const SectionSwitch = (props: ISecitonSwitchProps) => {
       onKeyDownHandler,
       onSubmitHandler,
       onDeleteHandler,
+      onCopyHandler,
       onMediaHandler,
       onAddFriendHandler,
       textInputRef,
@@ -82,6 +83,7 @@ const SectionSwitch = (props: ISecitonSwitchProps) => {
           onSubmitHandler={onSubmitHandler}
           onMediaHandler={onMediaHandler}
           onDeleteHandler={onDeleteHandler}
+          onCopyHandler={onCopyHandler}
           textInputRef={textInputRef}
           loading={loading}
           navbar={navbar}

components/svgs/copy/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Copy = ({ size }: { size: number | undefined }) => {
+    const className = size ? `w-${size} h-${size}` : "w-8 h-8";
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+        </svg>
+    )
+}
+
+export default Copy

components/svgs/pencil/index.tsx

@@ -1,22 +1,23 @@
-import React from "react";
+import React from 'react'
 
-const Pencil = () => {
+const Pencil = ({ size }: { size: number | undefined }) => {
+  const className = size ? `w-${size} h-${size}` : "w-8 h-8";
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-7 h-7"
+      className={className}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
         d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
       />
     </svg>
-  );
-};
+  )
+}
 
 export default Pencil;

pages/index.tsx

@@ -29,6 +29,7 @@ import {
   getRandomNumber,
   getTimeConverted,
   isLocalStorage,
+  writeContentToClipboard,
 } from "@/utils/helpers";
 
 import LayoutSwitch from "@/components/layout";
@@ -269,6 +270,11 @@ const Messages = () => {
     });
   };
 
+  const onCopyHandler = (referenceId: string) => {
+    const message = messages?.find(m => m.referenceId === referenceId);
+    writeContentToClipboard(message?.content);
+  }
+
   const onDeleteHandler = async (referenceId: string) => {
     setLoading(true);
     deleteMessage(referenceId, group.id).then((data) => {
@@ -577,6 +583,7 @@ const Messages = () => {
             onSubmitHandler={onSubmitHandler}
             onMediaHandler={onMediaHandler}
             onDeleteHandler={onDeleteHandler}
+            onCopyHandler={onCopyHandler}
             onAddFriendHandler={onAddFriendHandler}
             loading={loading}
             groups={groups}

types/index.tsx

@@ -115,6 +115,7 @@ export interface IMessageListProps {
   notifs: NotifType;
   lastMessageRef: LegacyRef<HTMLDivElement>;
   onDeleteHandler: Function;
+  onCopyHandler: Function;
   loading: boolean;
 }
 
@@ -164,6 +165,7 @@ export interface IMessageCardProps {
   messageTime: string;
   messageAuthorName: NameType | string;
   onDeleteHandler: Function;
+  onCopyHandler: Function;
   loading: boolean;
 }
 
@@ -259,6 +261,7 @@ export interface ISecitonSwitchProps {
   onKeyDownHandler: KeyboardEventHandler<HTMLInputElement>;
   onSubmitHandler: MouseEventHandler<HTMLButtonElement>;
   onDeleteHandler: Function;
+  onCopyHandler: Function;
   onMediaHandler: Function;
   onAddFriendHandler: Function;
   setGroup: Function;
@@ -279,6 +282,7 @@ export interface IGroupSectionProps {
   onKeyDownHandler: KeyboardEventHandler<HTMLInputElement>;
   onSubmitHandler: MouseEventHandler<HTMLButtonElement>;
   onDeleteHandler: Function;
+  onCopyHandler: Function;
   onMediaHandler: Function;
   setGroup: Function;
   lastMessageRef: null | LegacyRef<HTMLDivElement>;
@@ -292,7 +296,7 @@ export interface IMessageMenuProps {
   loading: boolean;
   messageTime: string;
   onDeleteHandler: Function;
-  setOptions: Function;
+  onCopyHandler: Function;
 }
 
 export interface IAddFriendProps {

utils/helpers.ts

@@ -16,19 +16,24 @@ const formatCompactNumber = (input: string) => {
   return formatter.format(number);
 };
 
-const isMedia = (content: string) => {
+const isImage = (content: string) => {
   return content?.startsWith("[image](");
 };
 
-const isImage = (content: string) => {
-  return content?.includes(mediaTypes.image);
+const getContent = (content: string) => {
+  const isMedia = isImage(content);
+  return isMedia
+    ? content?.substring(content?.indexOf("(") + 1, content?.indexOf(")"))
+    : content;
+};
+
+const writeContentToClipboard = (content: string) => {
+  navigator.clipboard.writeText(getContent(content));
 };
 
 const getBriefContent = (content: string) => {
-  if (isMedia(content)) {
-    if (isImage(content)) {
-      return mediaTypes.image;
-    }
+  if (isImage(content)) {
+    return mediaTypes.image;
   } else if (content?.length > 30) {
     return content.substring(0, 30).concat("...");
   } else return content;
@@ -65,11 +70,11 @@ const getNameOfUser = (target: {
 export {
   getTimeConverted,
   formatCompactNumber,
-  isMedia,
   isImage,
   getBriefContent,
   isLocalStorage,
   getRandomNumber,
   getMessageType,
   getNameOfUser,
+  writeContentToClipboard,
 };