From 33b68a2123ba9986e19d4f8d30dd0b6796ccd5ff Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 22 May 2024 18:39:01 +1000
Subject: [PATCH] feat: created copy to clipboard button

---
 ts/components/basic/SessionButton.tsx         |  7 +++--
 .../buttons/CopyToClipboardButton.tsx         | 31 +++++++++++++++++++
 .../dialog/UpdateGroupNameDialog.tsx          |  1 -
 .../leftpane/overlay/OverlayInvite.tsx        | 11 +++----
 4 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 ts/components/buttons/CopyToClipboardButton.tsx

diff --git a/ts/components/basic/SessionButton.tsx b/ts/components/basic/SessionButton.tsx
index 67d769e8a..3f174771f 100644
--- a/ts/components/basic/SessionButton.tsx
+++ b/ts/components/basic/SessionButton.tsx
@@ -112,7 +112,7 @@ const StyledButton = styled.button<{
   }
 `;
 
-type Props = {
+export type SessionButtonProps = {
   text?: string;
   disabled?: boolean;
   buttonType?: SessionButtonType;
@@ -121,15 +121,17 @@ type Props = {
   onClick?: any;
   children?: ReactNode;
   margin?: string;
+  reference?: any;
   dataTestId?: string;
 };
 
-export const SessionButton = (props: Props) => {
+export const SessionButton = (props: SessionButtonProps) => {
   const {
     buttonType = SessionButtonType.Outline,
     buttonShape = buttonType === SessionButtonType.Ghost
       ? SessionButtonShape.None
       : SessionButtonShape.Round,
+    reference,
     dataTestId,
     buttonColor,
     text,
@@ -160,6 +162,7 @@ export const SessionButton = (props: Props) => {
       )}
       role="button"
       onClick={onClickFn}
+      ref={reference}
       data-testid={dataTestId}
       style={{ margin }}
     >
diff --git a/ts/components/buttons/CopyToClipboardButton.tsx b/ts/components/buttons/CopyToClipboardButton.tsx
new file mode 100644
index 000000000..37d83aab7
--- /dev/null
+++ b/ts/components/buttons/CopyToClipboardButton.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { ToastUtils } from '../../session/utils';
+import { SessionButton, SessionButtonProps } from '../basic/SessionButton';
+
+type Props = Omit<SessionButtonProps, 'children' | 'text' | 'onClick'> & {
+  copyContent: string;
+  onCopyComplete?: (copiedValue: string | undefined) => void;
+};
+
+export const CopyToClipboardButton = (props: Props) => {
+  const { copyContent, onCopyComplete } = props;
+  const [copied, setCopied] = useState(false);
+
+  const [{ value }, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <SessionButton
+      {...props}
+      text={copied ? window.i18n('copiedToClipboard') : window.i18n('editMenuCopy')}
+      onClick={() => {
+        copyToClipboard(copyContent);
+        ToastUtils.pushCopiedToClipBoard();
+        setCopied(true);
+        if (onCopyComplete) {
+          onCopyComplete(value);
+        }
+      }}
+    />
+  );
+};
diff --git a/ts/components/dialog/UpdateGroupNameDialog.tsx b/ts/components/dialog/UpdateGroupNameDialog.tsx
index d02bb641a..b42543470 100644
--- a/ts/components/dialog/UpdateGroupNameDialog.tsx
+++ b/ts/components/dialog/UpdateGroupNameDialog.tsx
@@ -121,7 +121,6 @@ export class UpdateGroupNameDialog extends Component<Props, State> {
         {isAdmin ? (
           <input
             type="text"
-            className="profile-name-input"
             value={this.state.groupName}
             placeholder={window.i18n('groupNamePlaceholder')}
             onChange={this.onGroupNameChanged}
diff --git a/ts/components/leftpane/overlay/OverlayInvite.tsx b/ts/components/leftpane/overlay/OverlayInvite.tsx
index 7933d6b7d..64bc2c093 100644
--- a/ts/components/leftpane/overlay/OverlayInvite.tsx
+++ b/ts/components/leftpane/overlay/OverlayInvite.tsx
@@ -5,11 +5,11 @@ import { shell } from 'electron';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
-import { SessionButton } from '../../basic/SessionButton';
 
 import { UserUtils } from '../../../session/utils';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG, SpacerMD, SpacerSM } from '../../basic/Text';
+import { CopyToClipboardButton } from '../../buttons/CopyToClipboardButton';
 import { SessionIcon, SessionIconButton } from '../../icon';
 import { SessionInput } from '../../inputs';
 import { StyledLeftPaneOverlay } from './OverlayMessage';
@@ -88,12 +88,9 @@ export const OverlayInvite = () => {
           <StyledDescription>{window.i18n('sessionInviteAFriendDescription')}</StyledDescription>
           <SpacerLG />
           <StyledButtonerContainer>
-            <SessionButton
-              text={window.i18n('editMenuCopy')}
-              onClick={() => {
-                window.clipboard.writeText(ourSessionID);
-                setIdCopied(true);
-              }}
+            <CopyToClipboardButton
+              copyContent={ourSessionID}
+              onCopyComplete={() => setIdCopied(true)}
               dataTestId="invite-account-id-copy"
             />
           </StyledButtonerContainer>