97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import { useCallback } from 'react';
|
|
import type { FC } from 'react';
|
|
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import { showAlert } from '@/mastodon/actions/alerts';
|
|
import { resetCompose, focusCompose } from '@/mastodon/actions/compose';
|
|
import { closeModal } from '@/mastodon/actions/modal';
|
|
import { Button } from '@/mastodon/components/button';
|
|
import type { AnnualReport as AnnualReportData } from '@/mastodon/models/annual_report';
|
|
import { useAppDispatch } from '@/mastodon/store';
|
|
|
|
import { archetypeNames } from './archetype';
|
|
import styles from './index.module.scss';
|
|
|
|
const messages = defineMessages({
|
|
share_message: {
|
|
id: 'annual_report.summary.share_message',
|
|
defaultMessage: 'I got the {archetype} archetype!',
|
|
},
|
|
share_on_mastodon: {
|
|
id: 'annual_report.summary.share_on_mastodon',
|
|
defaultMessage: 'Share on Mastodon',
|
|
},
|
|
share_elsewhere: {
|
|
id: 'annual_report.summary.share_elsewhere',
|
|
defaultMessage: 'Share elsewhere',
|
|
},
|
|
copy_link: {
|
|
id: 'annual_report.summary.copy_link',
|
|
defaultMessage: 'Copy link',
|
|
},
|
|
copied: {
|
|
id: 'copy_icon_button.copied',
|
|
defaultMessage: 'Copied to clipboard',
|
|
},
|
|
});
|
|
|
|
export const ShareButton: FC<{ report: AnnualReportData }> = ({ report }) => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleShareClick = useCallback(() => {
|
|
// Generate the share message.
|
|
const archetypeName = intl.formatMessage(
|
|
archetypeNames[report.data.archetype],
|
|
);
|
|
const shareLines = [
|
|
intl.formatMessage(messages.share_message, {
|
|
archetype: archetypeName,
|
|
}),
|
|
];
|
|
// Share URL is only available for schema version 2.
|
|
if (report.schema_version === 2 && report.share_url) {
|
|
shareLines.push(report.share_url);
|
|
}
|
|
shareLines.push(`#Wrapstodon${report.year}`);
|
|
|
|
// Reset the composer and focus it with the share message, then close the modal.
|
|
dispatch(resetCompose());
|
|
dispatch(focusCompose(shareLines.join('\n\n')));
|
|
dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
|
|
}, [report, intl, dispatch]);
|
|
|
|
const supportsNativeShare = 'share' in navigator;
|
|
|
|
const handleSecondaryShare = useCallback(() => {
|
|
if (report.schema_version === 2 && report.share_url) {
|
|
if (supportsNativeShare) {
|
|
void navigator.share({
|
|
url: report.share_url,
|
|
});
|
|
} else {
|
|
void navigator.clipboard.writeText(report.share_url);
|
|
dispatch(showAlert({ message: messages.copied }));
|
|
}
|
|
}
|
|
}, [report, supportsNativeShare, dispatch]);
|
|
|
|
return (
|
|
<div className={styles.shareButtonWrapper}>
|
|
<Button
|
|
text={intl.formatMessage(messages.share_on_mastodon)}
|
|
onClick={handleShareClick}
|
|
/>
|
|
<Button
|
|
plain
|
|
className={styles.secondaryShareButton}
|
|
text={intl.formatMessage(
|
|
supportsNativeShare ? messages.share_elsewhere : messages.copy_link,
|
|
)}
|
|
onClick={handleSecondaryShare}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|