diff --git a/app/javascript/flavours/glitch/features/report/comment.jsx b/app/javascript/flavours/glitch/features/report/comment.jsx index db534a21f..6a3605215 100644 --- a/app/javascript/flavours/glitch/features/report/comment.jsx +++ b/app/javascript/flavours/glitch/features/report/comment.jsx @@ -1,87 +1,121 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; -import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; +import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; + +import { OrderedSet, List as ImmutableList } from 'immutable'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { shallowEqual } from 'react-redux'; +import { createSelector } from 'reselect'; import Toggle from 'react-toggle'; +import { fetchAccount } from 'flavours/glitch/actions/accounts'; import Button from 'flavours/glitch/components/button'; +import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; const messages = defineMessages({ placeholder: { id: 'report.placeholder', defaultMessage: 'Type or paste additional comments' }, }); -class Comment extends PureComponent { - - static propTypes = { - onSubmit: PropTypes.func.isRequired, - comment: PropTypes.string.isRequired, - onChangeComment: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - isSubmitting: PropTypes.bool, - forward: PropTypes.bool, - isRemote: PropTypes.bool, - domain: PropTypes.string, - onChangeForward: PropTypes.func.isRequired, - }; - - handleClick = () => { - const { onSubmit } = this.props; - onSubmit(); - }; - - handleChange = e => { - const { onChangeComment } = this.props; - onChangeComment(e.target.value); - }; - - handleKeyDown = e => { +const selectRepliedToAccountIds = createSelector( + [ + (state) => state.get('statuses'), + (_, statusIds) => statusIds, + ], + (statusesMap, statusIds) => statusIds.map((statusId) => statusesMap.getIn([statusId, 'in_reply_to_account_id'])), + { + resultEqualityCheck: shallowEqual, + } +); + +const Comment = ({ comment, domain, statusIds, isRemote, isSubmitting, selectedDomains, onSubmit, onChangeComment, onToggleDomain }) => { + const intl = useIntl(); + + const dispatch = useAppDispatch(); + const loadedRef = useRef(false); + + const handleClick = useCallback(() => onSubmit(), [onSubmit]); + const handleChange = useCallback((e) => onChangeComment(e.target.value), [onChangeComment]); + const handleToggleDomain = useCallback(e => onToggleDomain(e.target.value, e.target.checked), [onToggleDomain]); + + const handleKeyDown = useCallback((e) => { if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { - this.handleClick(); + handleClick(); } - }; - - handleForwardChange = e => { - const { onChangeForward } = this.props; - onChangeForward(e.target.checked); - }; - - render () { - const { comment, isRemote, forward, domain, isSubmitting, intl } = this.props; - - return ( - <> -

- -