diff --git a/app/javascript/flavours/glitch/actions/boosts.js b/app/javascript/flavours/glitch/actions/boosts.js deleted file mode 100644 index 1fc2e391e2..0000000000 --- a/app/javascript/flavours/glitch/actions/boosts.js +++ /dev/null @@ -1,32 +0,0 @@ -import { openModal } from './modal'; - -export const BOOSTS_INIT_MODAL = 'BOOSTS_INIT_MODAL'; -export const BOOSTS_CHANGE_PRIVACY = 'BOOSTS_CHANGE_PRIVACY'; - -export function initBoostModal(props) { - return (dispatch, getState) => { - const default_privacy = getState().getIn(['compose', 'default_privacy']); - - const privacy = props.status.get('visibility') === 'private' ? 'private' : default_privacy; - - dispatch({ - type: BOOSTS_INIT_MODAL, - privacy, - }); - - dispatch(openModal({ - modalType: 'BOOST', - modalProps: props, - })); - }; -} - - -export function changeBoostPrivacy(privacy) { - return dispatch => { - dispatch({ - type: BOOSTS_CHANGE_PRIVACY, - privacy, - }); - }; -} diff --git a/app/javascript/flavours/glitch/components/visibility_icon.tsx b/app/javascript/flavours/glitch/components/visibility_icon.tsx index dd24c5c927..1ae2c24272 100644 --- a/app/javascript/flavours/glitch/components/visibility_icon.tsx +++ b/app/javascript/flavours/glitch/components/visibility_icon.tsx @@ -4,11 +4,10 @@ import LockIcon from '@/material-icons/400-24px/lock.svg?react'; import MailIcon from '@/material-icons/400-24px/mail.svg?react'; import PublicIcon from '@/material-icons/400-24px/public.svg?react'; import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react'; +import type { StatusVisibility } from 'flavours/glitch/models/status'; import { Icon } from './icon'; -type Visibility = 'public' | 'unlisted' | 'private' | 'direct'; - const messages = defineMessages({ public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, unlisted_short: { @@ -25,7 +24,7 @@ const messages = defineMessages({ }, }); -export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({ +export const VisibilityIcon: React.FC<{ visibility: StatusVisibility }> = ({ visibility, }) => { const intl = useIntl(); diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index ed48ea8f9c..d304af5ec7 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -3,7 +3,6 @@ import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { initBlockModal } from 'flavours/glitch/actions/blocks'; -import { initBoostModal } from 'flavours/glitch/actions/boosts'; import { replyCompose, mentionCompose, @@ -126,11 +125,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ dispatch((_, getState) => { let state = getState(); if (state.getIn(['local_settings', 'confirm_boost_missing_media_description']) && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) { - dispatch(initBoostModal({ status, onReblog: this.onModalReblog, missingMediaDescription: true })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog, missingMediaDescription: true } })); } else if (e.shiftKey || !boostModal) { this.onModalReblog(status); } else { - dispatch(initBoostModal({ status, onReblog: this.onModalReblog })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } })); } }); }, diff --git a/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js b/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js index 8a4b5c8ed5..de5cb2b11e 100644 --- a/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js +++ b/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js @@ -1,6 +1,5 @@ import { connect } from 'react-redux'; -import { initBoostModal } from '../../../actions/boosts'; import { mentionCompose } from '../../../actions/compose'; import { reblog, @@ -8,6 +7,7 @@ import { unreblog, unfavourite, } from '../../../actions/interactions'; +import { openModal } from '../../../actions/modal'; import { boostModal } from '../../../initial_state'; import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors'; import Notification from '../components/notification'; @@ -46,7 +46,7 @@ const mapDispatchToProps = dispatch => ({ if (e.shiftKey || !boostModal) { this.onModalReblog(status); } else { - dispatch(initBoostModal({ status, onReblog: this.onModalReblog })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } })); } } }, diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx index 1260ecc7ba..e21ee2d3d3 100644 --- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx +++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx @@ -14,7 +14,6 @@ import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react'; import StarIcon from '@/material-icons/400-24px/star.svg?react'; -import { initBoostModal } from 'flavours/glitch/actions/boosts'; import { replyCompose } from 'flavours/glitch/actions/compose'; import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions'; import { openModal } from 'flavours/glitch/actions/modal'; @@ -142,7 +141,7 @@ class Footer extends ImmutablePureComponent { } else if ((e && e.shiftKey) || !boostModal) { this._performReblog(status); } else { - dispatch(initBoostModal({ status, onReblog: this._performReblog })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this._performReblog } })); } } else { dispatch(openModal({ diff --git a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js index 40803441d2..7e8fe49b23 100644 --- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js @@ -4,7 +4,6 @@ import { connect } from 'react-redux'; import { showAlertForError } from '../../../actions/alerts'; import { initBlockModal } from '../../../actions/blocks'; -import { initBoostModal } from '../../../actions/boosts'; import { replyCompose, mentionCompose, @@ -82,7 +81,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ if (e.shiftKey || !boostModal) { this.onModalReblog(status); } else { - dispatch(initBoostModal({ status, onReblog: this.onModalReblog })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } })); } } }, diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index f9b8640762..6274bf672c 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -25,7 +25,6 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; import { initBlockModal } from '../../actions/blocks'; -import { initBoostModal } from '../../actions/boosts'; import { replyCompose, mentionCompose, @@ -362,11 +361,11 @@ class Status extends ImmutablePureComponent { if (signedIn) { if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) { - dispatch(initBoostModal({ status, onReblog: this.handleModalReblog, missingMediaDescription: true })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog, missingMediaDescription: true } })); } else if ((e && e.shiftKey) || !boostModal) { this.handleModalReblog(status); } else { - dispatch(initBoostModal({ status, onReblog: this.handleModalReblog })); + dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog } })); } } else { dispatch(openModal({ diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx deleted file mode 100644 index c16ed71cb8..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx +++ /dev/null @@ -1,131 +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 { connect } from 'react-redux'; - -import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; -import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts'; -import AttachmentList from 'flavours/glitch/components/attachment_list'; -import { Icon } from 'flavours/glitch/components/icon'; -import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon'; -import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown'; -import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; - -import { Avatar } from '../../../components/avatar'; -import { Button } from '../../../components/button'; -import { DisplayName } from '../../../components/display_name'; -import { RelativeTimestamp } from '../../../components/relative_timestamp'; -import StatusContent from '../../../components/status_content'; - -const messages = defineMessages({ - cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' }, - reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, -}); - -const mapStateToProps = state => { - return { - privacy: state.getIn(['boosts', 'new', 'privacy']), - }; -}; - -const mapDispatchToProps = dispatch => { - return { - onChangeBoostPrivacy(value) { - dispatch(changeBoostPrivacy(value)); - }, - }; -}; - -class BoostModal extends ImmutablePureComponent { - static propTypes = { - status: ImmutablePropTypes.map.isRequired, - onReblog: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, - missingMediaDescription: PropTypes.bool, - intl: PropTypes.object.isRequired, - ...WithRouterPropTypes, - }; - - handleReblog = () => { - this.props.onReblog(this.props.status, this.props.privacy); - this.props.onClose(); - }; - - handleAccountClick = (e) => { - if (e.button === 0) { - e.preventDefault(); - this.props.onClose(); - this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`); - } - }; - - _findContainer = () => { - return document.getElementsByClassName('modal-root__container')[0]; - }; - - render () { - const { status, missingMediaDescription, privacy, intl } = this.props; - const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog; - - return ( -
-
-
-
- - - - - - -
- -
- - - -
- - - - {status.get('media_attachments').size > 0 && ( - - )} -
-
- -
-
- { missingMediaDescription ? - - : - Shift + }} /> - } -
- - {status.get('visibility') !== 'private' && !status.get('reblogged') && ( - - )} -
-
- ); - } - -} - -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BoostModal))); diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/boost_modal.tsx new file mode 100644 index 0000000000..452a022a7d --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.tsx @@ -0,0 +1,170 @@ +import type { MouseEventHandler } from 'react'; +import { useCallback, useState } from 'react'; + +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; + +import classNames from 'classnames'; +import { useHistory } from 'react-router'; + +import type Immutable from 'immutable'; + +import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; +import AttachmentList from 'flavours/glitch/components/attachment_list'; +import { Icon } from 'flavours/glitch/components/icon'; +import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon'; +import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown'; +import type { Account } from 'flavours/glitch/models/account'; +import type { Status, StatusVisibility } from 'flavours/glitch/models/status'; +import { useAppSelector } from 'flavours/glitch/store'; + +import { Avatar } from '../../../components/avatar'; +import { Button } from '../../../components/button'; +import { DisplayName } from '../../../components/display_name'; +import { RelativeTimestamp } from '../../../components/relative_timestamp'; +import StatusContent from '../../../components/status_content'; + +const messages = defineMessages({ + cancel_reblog: { + id: 'status.cancel_reblog_private', + defaultMessage: 'Unboost', + }, + reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, +}); + +export const BoostModal: React.FC<{ + status: Status; + onClose: () => void; + onReblog: (status: Status, privacy: StatusVisibility) => void; + missingMediaDescription?: boolean; +}> = ({ status, onReblog, onClose, missingMediaDescription }) => { + const intl = useIntl(); + const history = useHistory(); + + const default_privacy = useAppSelector( + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access + (state) => state.compose.get('default_privacy') as StatusVisibility, + ); + + const account = status.get('account') as Account; + const statusVisibility = status.get('visibility') as StatusVisibility; + + const [privacy, setPrivacy] = useState( + statusVisibility === 'private' ? 'private' : default_privacy, + ); + + const onPrivacyChange = useCallback((value: StatusVisibility) => { + setPrivacy(value); + }, []); + + const handleReblog = useCallback(() => { + onReblog(status, privacy); + onClose(); + }, [onClose, onReblog, status, privacy]); + + const handleAccountClick = useCallback( + (e) => { + if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { + e.preventDefault(); + onClose(); + history.push(`/@${account.acct}`); + } + }, + [history, onClose, account], + ); + + const buttonText = status.get('reblogged') + ? messages.cancel_reblog + : messages.reblog; + + const findContainer = useCallback( + () => document.getElementsByClassName('modal-root__container')[0], + [], + ); + + return ( +
+
+
+ + + {/* @ts-expect-error Expected until StatusContent is typed */} + + + {(status.get('media_attachments') as Immutable.List).size > + 0 && ( + + )} +
+
+ +
+
+ {missingMediaDescription ? ( + + ) : ( + + Shift + + + ), + }} + /> + )} +
+ {statusVisibility !== 'private' && !status.get('reblogged') && ( + + )} +
+
+ ); +}; 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 3f7e291e7b..063316ef1b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -26,7 +26,7 @@ import BundleContainer from '../containers/bundle_container'; import ActionsModal from './actions_modal'; import AudioModal from './audio_modal'; -import BoostModal from './boost_modal'; +import { BoostModal } from './boost_modal'; import BundleModalError from './bundle_modal_error'; import ConfirmationModal from './confirmation_modal'; import DeprecatedSettingsModal from './deprecated_settings_modal'; diff --git a/app/javascript/flavours/glitch/models/status.ts b/app/javascript/flavours/glitch/models/status.ts new file mode 100644 index 0000000000..83e9f6b885 --- /dev/null +++ b/app/javascript/flavours/glitch/models/status.ts @@ -0,0 +1,4 @@ +export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct'; + +// Temporary until we type it correctly +export type Status = Immutable.Map; diff --git a/app/javascript/flavours/glitch/reducers/boosts.js b/app/javascript/flavours/glitch/reducers/boosts.js deleted file mode 100644 index 3541ca0c28..0000000000 --- a/app/javascript/flavours/glitch/reducers/boosts.js +++ /dev/null @@ -1,25 +0,0 @@ -import Immutable from 'immutable'; - -import { - BOOSTS_INIT_MODAL, - BOOSTS_CHANGE_PRIVACY, -} from 'flavours/glitch/actions/boosts'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - privacy: 'public', - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case BOOSTS_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'privacy'], action.privacy); - }); - case BOOSTS_CHANGE_PRIVACY: - return state.setIn(['new', 'privacy'], action.privacy); - default: - return state; - } -} diff --git a/app/javascript/flavours/glitch/reducers/index.ts b/app/javascript/flavours/glitch/reducers/index.ts index 9a8f7e204f..3fee5818f9 100644 --- a/app/javascript/flavours/glitch/reducers/index.ts +++ b/app/javascript/flavours/glitch/reducers/index.ts @@ -7,7 +7,6 @@ import { accountsReducer } from './accounts'; import accounts_map from './accounts_map'; import alerts from './alerts'; import announcements from './announcements'; -import boosts from './boosts'; import compose from './compose'; import contexts from './contexts'; import conversations from './conversations'; @@ -63,7 +62,6 @@ const reducers = { settings, local_settings, push_notifications, - boosts, server, contexts, compose,