treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Remove global `boosts` state and convert boosts modal to Typescript 

Port 67442f9039 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main-rebase-security-fix
Renaud Chaput 2024-03-28 16:33:15 +01:00 committed by Claire
parent 0f90e624c5
commit b3d5567bd0
13 changed files with 185 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/flavours/glitch/actions/boosts.js
View File

@ -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,
});
};
}

5
app/javascript/flavours/glitch/components/visibility_icon.tsx
View File

@ -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();

5
app/javascript/flavours/glitch/containers/status_container.js
View File

@ -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 } }));
}
});
},

4
app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
View File

@ -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 } }));
}
}
},

3
app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
View File

@ -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({

3
app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
View File

@ -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 } }));
}
}
},

5
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -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({

131
app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
View File

@ -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 (
<div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'>
<div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
<div className='status__info'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><VisibilityIcon visibility={status.get('visibility')} /></span>
<RelativeTimestamp timestamp={status.get('created_at')} />
</a>
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
<Avatar account={status.get('account')} size={48} />
</div>
<DisplayName account={status.get('account')} />
</a>
</div>
<StatusContent status={status} />
{status.get('media_attachments').size > 0 && (
<AttachmentList
compact
media={status.get('media_attachments')}
/>
)}
</div>
</div>
<div className='boost-modal__action-bar'>
<div>
{ missingMediaDescription ?
<FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' />
:
<FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' icon={RepeatIcon} /></span> }} />
}
</div>
{status.get('visibility') !== 'private' && !status.get('reblogged') && (
<PrivacyDropdown
noDirect
value={privacy}
container={this._findContainer}
onChange={this.props.onChangeBoostPrivacy}
/>
)}
<Button text={intl.formatMessage(buttonText)} onClick={this.handleReblog} autoFocus />
</div>
</div>
);
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BoostModal)));

170
app/javascript/flavours/glitch/features/ui/components/boost_modal.tsx Normal file
View File

@ -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>(
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<MouseEventHandler>(
(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 (
<div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'>
<div
className={classNames(
'status',
`status-${statusVisibility}`,
'light',
)}
>
<div className='status__info'>
<a
href={status.get('url') as string}
className='status__relative-time'
target='_blank'
rel='noopener noreferrer'
>
<span className='status__visibility-icon'>
<VisibilityIcon visibility={statusVisibility} />
</span>
<RelativeTimestamp
timestamp={status.get('created_at') as string}
/>
</a>
<a
onClick={handleAccountClick}
href={account.url}
className='status__display-name'
>
<div className='status__avatar'>
<Avatar account={account} size={48} />
</div>
<DisplayName account={account} />
</a>
</div>
{/* @ts-expect-error Expected until StatusContent is typed */}
<StatusContent status={status} />
{(status.get('media_attachments') as Immutable.List<unknown>).size >
0 && (
<AttachmentList compact media={status.get('media_attachments')} />
)}
</div>
</div>
<div className='boost-modal__action-bar'>
<div>
{missingMediaDescription ? (
<FormattedMessage
id='boost_modal.missing_description'
defaultMessage='This toot contains some media without description'
/>
) : (
<FormattedMessage
id='boost_modal.combo'
defaultMessage='You can press {combo} to skip this next time'
values={{
combo: (
<span>
Shift + <Icon id='retweet' icon={RepeatIcon} />
</span>
),
}}
/>
)}
</div>
{statusVisibility !== 'private' && !status.get('reblogged') && (
<PrivacyDropdown
noDirect
value={privacy}
container={findContainer}
onChange={onPrivacyChange}
/>
)}
<Button
text={intl.formatMessage(buttonText)}
onClick={handleReblog}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
/>
</div>
</div>
);
};

2
app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
View File

@ -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';

4
app/javascript/flavours/glitch/models/status.ts Normal file
View File

@ -0,0 +1,4 @@
export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct';
// Temporary until we type it correctly
export type Status = Immutable.Map<string, unknown>;

25
app/javascript/flavours/glitch/reducers/boosts.js
View File

@ -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;
}
}

2
app/javascript/flavours/glitch/reducers/index.ts
View File

@ -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,