133 lines
4.3 KiB
TypeScript
133 lines
4.3 KiB
TypeScript
import { useCallback } from 'react';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { useLocation } from 'react-router';
|
|
|
|
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
|
|
import { me } from '@/mastodon/initial_state';
|
|
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
|
import { changeCompose, focusCompose } from 'mastodon/actions/compose';
|
|
import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
|
|
import { Button } from 'mastodon/components/button';
|
|
import { CopyLinkField } from 'mastodon/components/form_fields';
|
|
import { IconButton } from 'mastodon/components/icon_button';
|
|
import {
|
|
ModalShell,
|
|
ModalShellActions,
|
|
ModalShellBody,
|
|
} from 'mastodon/components/modal_shell';
|
|
import { useAppDispatch } from 'mastodon/store';
|
|
|
|
import { CollectionPreviewCard } from './collection_preview_card';
|
|
import classes from './share_modal.module.scss';
|
|
|
|
const messages = defineMessages({
|
|
shareTextOwn: {
|
|
id: 'collection.share_template_own',
|
|
defaultMessage: 'Check out my new collection:',
|
|
description: 'Collection links are appended after a new line',
|
|
},
|
|
shareTextOther: {
|
|
id: 'collection.share_template_other',
|
|
defaultMessage: 'Check out this cool collection:',
|
|
description: 'Collection links are appended after a new line',
|
|
},
|
|
});
|
|
|
|
export const CollectionShareModal: React.FC<{
|
|
collection: ApiCollectionJSON;
|
|
onClose: () => void;
|
|
}> = ({ collection, onClose }) => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
const location = useLocation<{ newCollection?: boolean } | undefined>();
|
|
const isNew = !!location.state?.newCollection;
|
|
const isOwnCollection = collection.account_id === me;
|
|
|
|
const collectionLink = collection.url;
|
|
|
|
const handleShareOnDevice = useCallback(() => {
|
|
void navigator.share({
|
|
url: collectionLink,
|
|
});
|
|
}, [collectionLink]);
|
|
|
|
const handleShareViaPost = useCallback(() => {
|
|
let shareMessage = isOwnCollection
|
|
? intl.formatMessage(messages.shareTextOwn)
|
|
: intl.formatMessage(messages.shareTextOther);
|
|
shareMessage += `\n\n${collectionLink}`;
|
|
|
|
onClose();
|
|
dispatch(changeCompose(shareMessage));
|
|
dispatch(focusCompose());
|
|
}, [onClose, collectionLink, dispatch, intl, isOwnCollection]);
|
|
|
|
return (
|
|
<ModalShell>
|
|
<ModalShellBody>
|
|
<NavigationFocusTarget as='h1' className={classes.heading}>
|
|
{isNew ? (
|
|
<FormattedMessage
|
|
id='collection.share_modal.title_new'
|
|
defaultMessage='Share your new collection!'
|
|
/>
|
|
) : (
|
|
<FormattedMessage
|
|
id='collection.share_modal.title'
|
|
defaultMessage='Share collection'
|
|
/>
|
|
)}
|
|
</NavigationFocusTarget>
|
|
|
|
<IconButton
|
|
title={intl.formatMessage({
|
|
id: 'lightbox.close',
|
|
defaultMessage: 'Close',
|
|
})}
|
|
iconComponent={CloseIcon}
|
|
icon='close'
|
|
className={classes.closeButtonDesktop}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
<div className={classes.preview}>
|
|
<CollectionPreviewCard collection={collection} headingLevel='h2' />
|
|
</div>
|
|
|
|
<CopyLinkField
|
|
label={intl.formatMessage({
|
|
id: 'collection.share_modal.share_link_label',
|
|
defaultMessage: 'Share link',
|
|
})}
|
|
value={collectionLink}
|
|
/>
|
|
</ModalShellBody>
|
|
|
|
<ModalShellActions className={classes.actions}>
|
|
<div className={classes.shareButtonWrapper}>
|
|
<Button secondary onClick={handleShareViaPost}>
|
|
<FormattedMessage
|
|
id='collection.share_modal.share_via_post'
|
|
defaultMessage='Post on Mastodon'
|
|
/>
|
|
</Button>
|
|
{'share' in navigator && (
|
|
<Button secondary onClick={handleShareOnDevice}>
|
|
<FormattedMessage
|
|
id='collection.share_modal.share_via_system'
|
|
defaultMessage='Share to…'
|
|
/>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<Button plain onClick={onClose} className={classes.closeButtonMobile}>
|
|
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
|
|
</Button>
|
|
</ModalShellActions>
|
|
</ModalShell>
|
|
);
|
|
};
|