[IMPROVE] Replace useClipboard (#19764)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>

client/hooks/useClipboard.js

@@ -1,26 +0,0 @@
-import { useCallback } from 'react';
-import PropTypes from 'prop-types';
-
-import { useTranslation } from '../contexts/TranslationContext';
-import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
-
-export default function useClipboard(text) {
-	const t = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	const onClick = useCallback((e) => {
-		e.preventDefault();
-		try {
-			navigator.clipboard.writeText(text);
-			dispatchToastMessage({ type: 'success', message: t('Copied') });
-		} catch (e) {
-			dispatchToastMessage({ type: 'error', message: e });
-		}
-	}, [dispatchToastMessage, t, text]);
-
-	return onClick;
-}
-
-useClipboard.propTypes = {
-	text: PropTypes.string.isRequired,
-};

client/hooks/useClipboardWithToast.js

@@ -0,0 +1,14 @@
+import { useClipboard, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../contexts/TranslationContext';
+import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
+
+export default function useClipboardWithToast(text) {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useClipboard(text, {
+		onCopySuccess: useMutableCallback(() => dispatchToastMessage({ type: 'success', message: t('Copied') })),
+		onCopyError: useMutableCallback((e) => dispatchToastMessage({ type: 'error', message: e })),
+	});
+}

client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Box, Field, UrlInput, Icon, Button, InputBox, Callout } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
-import useClipboard from '../../../../../hooks/useClipboard';
+import useClipboardWithToast from '../../../../../hooks/useClipboardWithToast';
 import VerticalBar from '../../../../../components/VerticalBar';
 import { useTranslation } from '../../../../../contexts/TranslationContext';
 import { useEndpoint } from '../../../../../contexts/ServerContext';
@@ -19,7 +19,7 @@ export const InviteUsers = ({
 }) => {
 	const t = useTranslation();
 
-	const onClickCopy = useClipboard(linkText);
+	const { copy } = useClipboardWithToast(linkText);
 
 	return (
 		<>
@@ -33,7 +33,7 @@ export const InviteUsers = ({
 				<Field>
 					<Field.Label flexGrow={0}>{t('Invite_Link')}</Field.Label>
 					<Field.Row>
-						{linkText === undefined ? <InputBox.Skeleton /> : <UrlInput value={linkText} addon={<Icon onClick={onClickCopy} name='copy' size='x16'/>}/>}
+						{linkText === undefined ? <InputBox.Skeleton /> : <UrlInput value={linkText} addon={<Icon onClick={copy} name='copy' size='x16'/>}/>}
 					</Field.Row>
 				</Field>
 

package-lock.json

@@ -5083,19 +5083,12 @@
 			}
 		},
 		"@rocket.chat/fuselage-hooks": {
-			"version": "0.6.3-dev.140",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.140.tgz",
-			"integrity": "sha512-91SBKsTYkB0Y2Wde6byXEyMBNSe6DvK9qc14KfoPHEk2Zd0EfnV0t5p9alFfqnDoCGn+yDQzCDeTD1Irclp3DA==",
+			"version": "0.6.3-dev.147",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.147.tgz",
+			"integrity": "sha512-g55AzW79ALOIWlQ6rh0y43RVEbNBURHreqe8izApM9/Bq8dMTSFNObGbG9bYu1cEupV9JJOAMfidk5bUmx9zaw==",
 			"requires": {
-				"@rocket.chat/fuselage-tokens": "^0.6.3-dev.140+56c2eb73",
+				"@rocket.chat/fuselage-tokens": "^0.19.0",
 				"use-subscription": "^1.4.1"
-			},
-			"dependencies": {
-				"@rocket.chat/fuselage-tokens": {
-					"version": "0.6.3-dev.140",
-					"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.140.tgz",
-					"integrity": "sha512-IODy/fo9PEM2a6A28zoAuC4uqH18MHH65vkDFfcWvMV07ac5gG9LFwTrxaZeadQgoT6UZe0JFCJGsCDY3zxzPw=="
-				}
 			}
 		},
 		"@rocket.chat/fuselage-polyfills": {

package.json

@@ -140,7 +140,7 @@
 		"@rocket.chat/css-in-js": "^0.6.3-dev.143",
 		"@rocket.chat/emitter": "^0.6.3-dev.140",
 		"@rocket.chat/fuselage": "^0.6.3-dev.143",
-		"@rocket.chat/fuselage-hooks": "^0.6.3-dev.140",
+		"@rocket.chat/fuselage-hooks": "^0.6.3-dev.147",
 		"@rocket.chat/fuselage-polyfills": "^0.6.3-dev.140",
 		"@rocket.chat/fuselage-ui-kit": "^0.6.3-dev.143",
 		"@rocket.chat/icons": "^0.6.3-dev.140",