Change button text when clicked

Author: florianduros

src/components/views/dialogs/ShareDialog.tsx

@@ -7,10 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { JSX, useMemo, useState } from "react";
+import React, { JSX, useMemo, useRef, useState } from "react";
 import { Room, RoomMember, MatrixEvent, User } from "matrix-js-sdk/src/matrix";
 import { Checkbox, Button } from "@vector-im/compound-web";
 import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 
 import { _t } from "../../../languageHandler";
 import QRCode from "../elements/QRCode";
@@ -102,6 +103,9 @@ export function ShareDialog({ target, customTitle, onFinished, permalinkCreator
     const showQrCode = useSettingValue<boolean>(UIFeature.ShareQRCode);
     const showSocials = useSettingValue<boolean>(UIFeature.ShareSocial);
 
+    const timeoutIdRef = useRef<number>();
+    const [isCopied, setIsCopied] = useState(false);
+
     const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent);
     const { title, url, checkboxLabel } = useTargetValues(target, linkToSpecificEvent, permalinkCreator);
     const newTitle = customTitle ?? title;
@@ -129,13 +133,15 @@ export function ShareDialog({ target, customTitle, onFinished, permalinkCreator
                     </label>
                 )}
                 <Button
-                    Icon={LinkIcon}
+                    Icon={isCopied ? CheckIcon : LinkIcon}
                     onClick={async () => {
+                        clearTimeout(timeoutIdRef.current);
                         await copyPlaintext(url);
-                        onFinished();
+                        setIsCopied(true);
+                        timeoutIdRef.current = setTimeout(() => setIsCopied(false), 2000);
                     }}
                 >
-                    {_t("action|copy_link")}
+                    {isCopied ? _t("share|link_copied") : _t("action|copy_link")}
                 </Button>
                 {showSocials && <SocialLinks url={url} />}
             </div>

src/i18n/strings/en_EN.json

@@ -2952,6 +2952,7 @@
         "warning": "<w>WARNING:</w> <description/>"
     },
     "share": {
+        "link_copied": "Link copied",
         "permalink_message": "Link to selected message",
         "permalink_most_recent": "Link to most recent message",
         "share_call": "Conference invite link",