Refactor `copyToClipboard`

src/pages/Hub.tsx

@@ -4,7 +4,6 @@ import {
   Input,
   Space,
   Table,
-  Tooltip,
   Typography,
 } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
@@ -28,6 +27,10 @@ import { Routes } from '../routes';
 import { buildFullUrl } from '../utils/url';
 import { aspirationMapper } from '../utils/tune/mappers';
 import { TuneDbDocument } from '../types/dbData';
+import {
+  copyToClipboard,
+  isClipboardSupported,
+} from '../utils/clipboard';
 
 const { useBreakpoint } = Grid;
 
@@ -38,17 +41,8 @@ const Hub = () => {
   const { searchTunes } = useDb();
   const navigate = useNavigate();
   const [dataSource, setDataSource] = useState<any>([]);
-  const [copied, setCopied] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
-  const copyToClipboard = async (shareUrl: string) => {
-    if (navigator.clipboard) {
-      await navigator.clipboard.writeText(shareUrl);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1000);
-    }
-  };
-
   const loadData = debounce(async (searchText?: string) => {
     setIsLoading(true);
     const list = await searchTunes(searchText);
@@ -153,9 +147,7 @@ const Hub = () => {
       fixed: 'right',
       render: (tuneId: string) => (
         <Space>
-          <Tooltip title={copied ? 'Copied!' : 'Copy URL'}>
-            <Button icon={<CopyOutlined />} onClick={() => copyToClipboard(buildFullUrl([tunePath(tuneId)]))} />
-          </Tooltip>
+          {isClipboardSupported && <Button icon={<CopyOutlined />} onClick={() => copyToClipboard(buildFullUrl([tunePath(tuneId)]))} />}
           <Button type="primary" icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tuneId))} />
         </Space>
       ),

src/pages/Upload.tsx

@@ -61,6 +61,7 @@ import {
   TuneDbDocument,
 } from '../types/dbData';
 import { aspirationMapper } from '../utils/tune/mappers';
+import { copyToClipboard } from '../utils/clipboard';
 
 const { Item } = Form;
 
@@ -104,7 +105,6 @@ const UploadPage = () => {
   const [tuneDocumentId, setTuneDocumentId] = useState<string>();
   const [isUserAuthorized, setIsUserAuthorized] = useState(false);
   const [shareUrl, setShareUrl] = useState<string>();
-  const [copied, setCopied] = useState(false);
   const [isPublished, setIsPublished] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [readme, setReadme] = useState('# My Tune\n\ndescription');
@@ -123,7 +123,7 @@ const UploadPage = () => {
   const [toothLogFileIds, setToothLogFileIds] = useState<Map<string, string>>(new Map());
   const [customIniFileId, setCustomIniFileId] = useState<string | null>(null);
 
-  const hasNavigatorShare = navigator.share !== undefined;
+  const shareSupported = 'share' in navigator;
   const { currentUser } = useAuth();
   const navigate = useNavigate();
   const { removeFile, uploadFile, getFile } = useServerStorage();
@@ -135,14 +135,6 @@ const UploadPage = () => {
     tuneId: newTuneId!,
   }));
 
-  const copyToClipboard = async () => {
-    if (navigator.clipboard) {
-      await navigator.clipboard.writeText(shareUrl!);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1000);
-    }
-  };
-
   const genericError = (error: Error) => notification.error({ message: 'Error', description: error.message });
 
   const publishTune = async (values: any) => {
@@ -503,13 +495,13 @@ const UploadPage = () => {
       <Divider>Publish & Share</Divider>
       {isPublished && <Row>
         <Input
-          style={{ width: `calc(100% - ${hasNavigatorShare ? 65 : 35}px)` }}
+          style={{ width: `calc(100% - ${shareSupported ? 65 : 35}px)` }}
           value={shareUrl!}
         />
-        <Tooltip title={copied ? 'Copied!' : 'Copy URL'}>
-          <Button icon={<CopyOutlined />} onClick={copyToClipboard} />
+        <Tooltip title="Copy URL">
+          <Button icon={<CopyOutlined />} onClick={() => copyToClipboard(shareUrl!)} />
         </Tooltip>
-        {hasNavigatorShare && (
+        {shareSupported && (
           <Tooltip title="Share">
             <Button
               icon={<ShareAltOutlined />}

src/pages/auth/notifications.ts

@@ -133,6 +133,11 @@ const databaseGenericError = (err: Error) => notification.error({
   ...baseOptions,
 });
 
+const copiedToClipboard = () => notification.success({
+  message: 'Copied to clipboard',
+  ...baseOptions,
+});
+
 export {
   emailNotVerified,
   magicLinkSent,
@@ -155,4 +160,5 @@ export {
   passwordUpdateSuccess,
   passwordUpdateFailed,
   databaseGenericError,
+  copiedToClipboard,
 };

src/utils/clipboard.ts

@@ -0,0 +1,11 @@
+import { copiedToClipboard } from '../pages/auth/notifications';
+
+export const isClipboardSupported = 'clipboard' in navigator;
+
+export const copyToClipboard = (text: string) => {
+  if (!isClipboardSupported) {
+    return;
+  }
+
+  navigator.clipboard.writeText(text).then(copiedToClipboard);
+};