From b06907e4e4725cf28dc53d65e5e166a16e2b814c Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 31 Aug 2024 18:41:25 +0200 Subject: [PATCH] Rewrite favourite modal as a Typescript functional component, use revamped design (#2831) --- .../ui/components/favourite_modal.jsx | 92 ------------------- .../ui/components/favourite_modal.tsx | 90 ++++++++++++++++++ .../features/ui/components/modal_root.jsx | 2 +- .../flavours/glitch/locales/en.json | 2 +- 4 files changed, 92 insertions(+), 94 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx create mode 100644 app/javascript/flavours/glitch/features/ui/components/favourite_modal.tsx diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx deleted file mode 100644 index 138f44f21c..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import PropTypes from 'prop-types'; - -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; - -import classNames from 'classnames'; -import { withRouter } from 'react-router-dom'; - -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; -import AttachmentList from 'flavours/glitch/components/attachment_list'; -import { Avatar } from 'flavours/glitch/components/avatar'; -import { Button } from 'flavours/glitch/components/button'; -import { DisplayName } from 'flavours/glitch/components/display_name'; -import { Icon } from 'flavours/glitch/components/icon'; -import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; -import StatusContent from 'flavours/glitch/components/status_content'; -import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon'; -import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; - -const messages = defineMessages({ - favourite: { id: 'status.favourite', defaultMessage: 'Favorite' }, -}); - -class FavouriteModal extends ImmutablePureComponent { - - static propTypes = { - status: ImmutablePropTypes.map.isRequired, - onFavourite: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - ...WithRouterPropTypes, - }; - - handleFavourite = () => { - this.props.onFavourite(this.props.status); - this.props.onClose(); - }; - - handleAccountClick = (e) => { - if (e.button === 0) { - e.preventDefault(); - this.props.onClose(); - this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`); - } - }; - - render () { - const { status, intl } = this.props; - - return ( -
-
-
-
- - - - - - -
- -
- - - -
- - - - {status.get('media_attachments').size > 0 && ( - - )} -
-
- -
-
Shift + }} />
-
-
- ); - } - -} - -export default withRouter(injectIntl(FavouriteModal)); diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.tsx new file mode 100644 index 0000000000..88d8bb91b8 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.tsx @@ -0,0 +1,90 @@ +import { useCallback } from 'react'; + +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; + +import classNames from 'classnames'; + +import StarIcon from '@/material-icons/400-24px/star.svg?react'; +import { Button } from 'flavours/glitch/components/button'; +import { Icon } from 'flavours/glitch/components/icon'; +import { EmbeddedStatus } from 'flavours/glitch/features/notifications_v2/components/embedded_status'; +import type { Status } from 'flavours/glitch/models/status'; + +const messages = defineMessages({ + favourite: { id: 'status.favourite', defaultMessage: 'Favorite' }, +}); + +export const FavouriteModal: React.FC<{ + status: Status; + onClose: () => void; + onFavourite: (status: Status) => void; +}> = ({ status, onFavourite, onClose }) => { + const intl = useIntl(); + + const statusId = status.get('id') as string; + + const handleFavourite = useCallback(() => { + onFavourite(status); + onClose(); + }, [onClose, onFavourite, status]); + + const handleCancel = useCallback(() => { + onClose(); + }, [onClose]); + + return ( +
+
+
+
+ +
+ +
+

+ +

+
+ + Shift+ + + ), + }} + /> +
+
+
+ +
+ +
+
+ +
+
+
+ + + +
+
+
+ ); +}; diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx index 64c6b52c31..83345905be 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -41,7 +41,7 @@ import { } from './confirmation_modals'; import DeprecatedSettingsModal from './deprecated_settings_modal'; import DoodleModal from './doodle_modal'; -import FavouriteModal from './favourite_modal'; +import { FavouriteModal } from './favourite_modal'; import FocalPointModal from './focal_point_modal'; import ImageModal from './image_modal'; import MediaModal from './media_modal'; diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 3faf16c335..3b0439e7ed 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -36,7 +36,7 @@ "confirmations.missing_media_description.message": "At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.", "direct.group_by_conversations": "Group by conversation", "endorsed_accounts_editor.endorsed_accounts": "Featured accounts", - "favourite_modal.combo": "You can press {combo} to skip this next time", + "favourite_modal.favourite": "Favourite post?", "federation.federated.long": "Allow this post to reach other servers", "federation.federated.short": "Federated", "federation.local_only.long": "Prevent this post from reaching other servers",