From 470c0a80025f5d52bd66c16d1bfbccb1bfcaf6b0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 23 Feb 2022 20:03:46 +0100 Subject: [Glitch] Change report modal to include category selection in web UI Port a9a43de6d1502a6cbb388a5dbcd0e8532c236e64 to glitch-soc Signed-off-by: Claire --- .../glitch/features/ui/components/report_modal.js | 237 ++++++++++++++------- 1 file changed, 160 insertions(+), 77 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui/components') diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.js b/app/javascript/flavours/glitch/features/ui/components/report_modal.js index 5cb7c5d07..3e6d77b5d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/report_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.js @@ -1,38 +1,31 @@ import React from 'react'; import { connect } from 'react-redux'; -import { changeReportComment, changeReportForward, submitReport } from 'flavours/glitch/actions/reports'; +import { submitReport } from 'flavours/glitch/actions/reports'; import { expandAccountTimeline } from 'flavours/glitch/actions/timelines'; +import { fetchRules } from 'flavours/glitch/actions/rules'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { makeGetAccount } from 'flavours/glitch/selectors'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; -import StatusCheckBox from 'flavours/glitch/features/report/containers/status_check_box_container'; import { OrderedSet } from 'immutable'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import Button from 'flavours/glitch/components/button'; -import Toggle from 'react-toggle'; -import IconButton from '../../../components/icon_button'; +import IconButton from 'flavours/glitch/components/icon_button'; +import Category from 'flavours/glitch/features/report/category'; +import Statuses from 'flavours/glitch/features/report/statuses'; +import Rules from 'flavours/glitch/features/report/rules'; +import Comment from 'flavours/glitch/features/report/comment'; +import Thanks from 'flavours/glitch/features/report/thanks'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, - placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' }, - submit: { id: 'report.submit', defaultMessage: 'Submit' }, }); const makeMapStateToProps = () => { const getAccount = makeGetAccount(); - const mapStateToProps = state => { - const accountId = state.getIn(['reports', 'new', 'account_id']); - - return { - isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']), - account: getAccount(state, accountId), - comment: state.getIn(['reports', 'new', 'comment']), - forward: state.getIn(['reports', 'new', 'forward']), - statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])), - }; - }; + const mapStateToProps = (state, { accountId }) => ({ + account: getAccount(state, accountId), + }); return mapStateToProps; }; @@ -42,92 +35,182 @@ export default @connect(makeMapStateToProps) class ReportModal extends ImmutablePureComponent { static propTypes = { - isSubmitting: PropTypes.bool, - account: ImmutablePropTypes.map, - statusIds: ImmutablePropTypes.orderedSet.isRequired, - comment: PropTypes.string.isRequired, - forward: PropTypes.bool, + accountId: PropTypes.string.isRequired, + statusId: PropTypes.string, dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + account: ImmutablePropTypes.map.isRequired, }; - handleCommentChange = e => { - this.props.dispatch(changeReportComment(e.target.value)); - } - - handleForwardChange = e => { - this.props.dispatch(changeReportForward(e.target.checked)); - } + state = { + step: 'category', + selectedStatusIds: OrderedSet(this.props.statusId ? [this.props.statusId] : []), + comment: '', + category: null, + selectedRuleIds: OrderedSet(), + forward: true, + isSubmitting: false, + isSubmitted: false, + }; handleSubmit = () => { - this.props.dispatch(submitReport()); - } + const { dispatch, accountId } = this.props; + const { selectedStatusIds, comment, category, selectedRuleIds, forward } = this.state; + + this.setState({ isSubmitting: true }); + + dispatch(submitReport({ + account_id: accountId, + status_ids: selectedStatusIds.toArray(), + comment, + forward, + category, + rule_ids: selectedRuleIds.toArray(), + }, this.handleSuccess, this.handleFail)); + }; + + handleSuccess = () => { + this.setState({ isSubmitting: false, isSubmitted: true, step: 'thanks' }); + }; + + handleFail = () => { + this.setState({ isSubmitting: false }); + }; + + handleStatusToggle = (statusId, checked) => { + const { selectedStatusIds } = this.state; + + if (checked) { + this.setState({ selectedStatusIds: selectedStatusIds.add(statusId) }); + } else { + this.setState({ selectedStatusIds: selectedStatusIds.remove(statusId) }); + } + }; - handleKeyDown = e => { - if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { - this.handleSubmit(); + handleRuleToggle = (ruleId, checked) => { + const { selectedRuleIds } = this.state; + + if (checked) { + this.setState({ selectedRuleIds: selectedRuleIds.add(ruleId) }); + } else { + this.setState({ selectedRuleIds: selectedRuleIds.remove(ruleId) }); } } + handleChangeCategory = category => { + this.setState({ category }); + }; + + handleChangeComment = comment => { + this.setState({ comment }); + }; + + handleChangeForward = forward => { + this.setState({ forward }); + }; + + handleNextStep = step => { + this.setState({ step }); + }; + componentDidMount () { - this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true })); - } + const { dispatch, accountId } = this.props; - componentWillReceiveProps (nextProps) { - if (this.props.account !== nextProps.account && nextProps.account) { - this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true })); - } + dispatch(expandAccountTimeline(accountId, { withReplies: true })); + dispatch(fetchRules()); } render () { - const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props; + const { + accountId, + account, + intl, + onClose, + } = this.props; if (!account) { return null; } - const domain = account.get('acct').split('@')[1]; + const { + step, + selectedStatusIds, + selectedRuleIds, + comment, + forward, + category, + isSubmitting, + isSubmitted, + } = this.state; + + const domain = account.get('acct').split('@')[1]; + const isRemote = !!domain; + + let stepComponent; + + switch(step) { + case 'category': + stepComponent = ( + + ); + break; + case 'rules': + stepComponent = ( + + ); + break; + case 'statuses': + stepComponent = ( + + ); + break; + case 'comment': + stepComponent = ( + + ); + break; + case 'thanks': + stepComponent = ( + + ); + } return ( -
+
{account.get('acct')} }} />
-
-
-

- -