Refactor `copyToClipboard`
This commit is contained in:
parent
96afc49da7
commit
31f146b650
|
@ -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>
|
||||
),
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
};
|
Loading…
Reference in New Issue