diff --git a/app/javascript/mastodon/components/copy_icon_button.jsx b/app/javascript/mastodon/components/copy_icon_button.tsx similarity index 62% rename from app/javascript/mastodon/components/copy_icon_button.jsx rename to app/javascript/mastodon/components/copy_icon_button.tsx index 0c3c6c290b..29f5f34430 100644 --- a/app/javascript/mastodon/components/copy_icon_button.jsx +++ b/app/javascript/mastodon/components/copy_icon_button.tsx @@ -1,29 +1,36 @@ -import PropTypes from 'prop-types'; import { useState, useCallback } from 'react'; import { defineMessages } from 'react-intl'; import classNames from 'classnames'; -import { useDispatch } from 'react-redux'; - import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react'; import { showAlert } from 'mastodon/actions/alerts'; import { IconButton } from 'mastodon/components/icon_button'; +import { useAppDispatch } from 'mastodon/store'; const messages = defineMessages({ - copied: { id: 'copy_icon_button.copied', defaultMessage: 'Copied to clipboard' }, + copied: { + id: 'copy_icon_button.copied', + defaultMessage: 'Copied to clipboard', + }, }); -export const CopyIconButton = ({ title, value, className }) => { +export const CopyIconButton: React.FC<{ + title: string; + value: string; + className: string; +}> = ({ title, value, className }) => { const [copied, setCopied] = useState(false); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const handleClick = useCallback(() => { - navigator.clipboard.writeText(value); + void navigator.clipboard.writeText(value); setCopied(true); dispatch(showAlert({ message: messages.copied })); - setTimeout(() => setCopied(false), 700); + setTimeout(() => { + setCopied(false); + }, 700); }, [setCopied, value, dispatch]); return ( @@ -31,13 +38,8 @@ export const CopyIconButton = ({ title, value, className }) => { className={classNames(className, copied ? 'copied' : 'copyable')} title={title} onClick={handleClick} + icon='' iconComponent={ContentCopyIcon} /> ); }; - -CopyIconButton.propTypes = { - title: PropTypes.string, - value: PropTypes.string, - className: PropTypes.string, -};