parent
0fb4c9bd40
commit
924b042c84
@ -0,0 +1,31 @@
|
||||
import api from '../api';
|
||||
|
||||
import type { Rule } from 'soapbox/reducers/rules';
|
||||
|
||||
const RULES_FETCH_REQUEST = 'RULES_FETCH_REQUEST';
|
||||
const RULES_FETCH_SUCCESS = 'RULES_FETCH_SUCCESS';
|
||||
|
||||
type RulesFetchRequestAction = {
|
||||
type: typeof RULES_FETCH_REQUEST
|
||||
}
|
||||
|
||||
type RulesFetchRequestSuccessAction = {
|
||||
type: typeof RULES_FETCH_SUCCESS
|
||||
payload: Rule[]
|
||||
}
|
||||
|
||||
export type RulesActions = RulesFetchRequestAction | RulesFetchRequestSuccessAction
|
||||
|
||||
const fetchRules = () => (dispatch: React.Dispatch<RulesActions>, getState: any) => {
|
||||
dispatch({ type: RULES_FETCH_REQUEST });
|
||||
|
||||
return api(getState)
|
||||
.get('/api/v1/instance/rules')
|
||||
.then((response) => dispatch({ type: RULES_FETCH_SUCCESS, payload: response.data }));
|
||||
};
|
||||
|
||||
export {
|
||||
fetchRules,
|
||||
RULES_FETCH_REQUEST,
|
||||
RULES_FETCH_SUCCESS,
|
||||
};
|
@ -0,0 +1,133 @@
|
||||
import { AxiosError } from 'axios';
|
||||
import { Set as ImmutableSet } from 'immutable';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import { blockAccount } from 'soapbox/actions/accounts';
|
||||
import { submitReport, cancelReport, submitReportSuccess, submitReportFail } from 'soapbox/actions/reports';
|
||||
import { expandAccountTimeline } from 'soapbox/actions/timelines';
|
||||
import { Modal } from 'soapbox/components/ui';
|
||||
import { useAccount, useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import ConfirmationStep from './steps/confirmation-step';
|
||||
import OtherActionsStep from './steps/other-actions-step';
|
||||
import ReasonStep from './steps/reason-step';
|
||||
|
||||
const messages = defineMessages({
|
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
|
||||
submit: { id: 'report.submit', defaultMessage: 'Submit' },
|
||||
});
|
||||
|
||||
enum Steps {
|
||||
ONE = 'ONE',
|
||||
TWO = 'TWO',
|
||||
THREE = 'THREE',
|
||||
}
|
||||
|
||||
const reportSteps = {
|
||||
ONE: ReasonStep,
|
||||
TWO: OtherActionsStep,
|
||||
THREE: ConfirmationStep,
|
||||
};
|
||||
|
||||
interface IReportModal {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const ReportModal = ({ onClose }: IReportModal) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const accountId = useAppSelector((state) => state.reports.getIn(['new', 'account_id']) as string);
|
||||
const account = useAccount(accountId);
|
||||
|
||||
const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
|
||||
const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
|
||||
const rules = useAppSelector((state) => state.rules.items);
|
||||
const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as string);
|
||||
const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
|
||||
|
||||
const shouldRequireRule = rules.length > 0;
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<Steps>(Steps.ONE);
|
||||
|
||||
const handleSubmit = () => {
|
||||
dispatch(submitReport())
|
||||
.then(() => setCurrentStep(Steps.THREE))
|
||||
.catch((error: AxiosError) => dispatch(submitReportFail(error)));
|
||||
|
||||
if (isBlocked && account) {
|
||||
dispatch(blockAccount(account.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
dispatch(cancelReport());
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleNextStep = () => {
|
||||
switch (currentStep) {
|
||||
case Steps.ONE:
|
||||
setCurrentStep(Steps.TWO);
|
||||
break;
|
||||
case Steps.TWO:
|
||||
handleSubmit();
|
||||
break;
|
||||
case Steps.THREE:
|
||||
dispatch(submitReportSuccess());
|
||||
onClose();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const confirmationText = useMemo(() => {
|
||||
switch (currentStep) {
|
||||
case Steps.TWO:
|
||||
return intl.formatMessage(messages.submit);
|
||||
case Steps.THREE:
|
||||
return 'Done';
|
||||
default:
|
||||
return 'Next';
|
||||
}
|
||||
}, [currentStep]);
|
||||
|
||||
const isConfirmationButtonDisabled = useMemo(() => {
|
||||
if (currentStep === Steps.THREE) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isSubmitting || (shouldRequireRule && !ruleId) || selectedStatusIds.size === 0;
|
||||
}, [currentStep, isSubmitting, shouldRequireRule, ruleId, selectedStatusIds.size]);
|
||||
|
||||
useEffect(() => {
|
||||
if (account) {
|
||||
dispatch(expandAccountTimeline(account.id, { withReplies: true, maxId: null }));
|
||||
}
|
||||
}, [account]);
|
||||
|
||||
if (!account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const StepToRender = reportSteps[currentStep];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account.acct}</strong> }} />}
|
||||
onClose={handleClose}
|
||||
cancelAction={onClose}
|
||||
confirmationAction={handleNextStep}
|
||||
confirmationText={confirmationText}
|
||||
confirmationDisabled={isConfirmationButtonDisabled}
|
||||
skipFocus
|
||||
>
|
||||
<StepToRender account={account} />
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportModal;
|
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
import type { ReducerAccount } from 'soapbox/reducers/accounts';
|
||||
|
||||
interface IOtherActionsStep {
|
||||
account: ReducerAccount
|
||||
}
|
||||
|
||||
const ConfirmationStep = ({ account }: IOtherActionsStep) => {
|
||||
return (
|
||||
<Stack space={1}>
|
||||
<Text weight='medium'>
|
||||
Thanks for submitting your report.
|
||||
</Text>
|
||||
|
||||
<Text>
|
||||
If we find that this account is violating the TRUTH Terms of Service we
|
||||
will take further action on the matter.
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmationStep;
|
@ -0,0 +1,180 @@
|
||||
import { OrderedSet, Set as ImmutableSet } from 'immutable';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports';
|
||||
import { fetchRules } from 'soapbox/actions/rules';
|
||||
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
|
||||
import StatusContent from 'soapbox/components/status_content';
|
||||
import { Button, FormGroup, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account_container';
|
||||
import StatusCheckBox from 'soapbox/features/report/containers/status_check_box_container';
|
||||
import { useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
import { isRemote, getDomain } from 'soapbox/utils/accounts';
|
||||
|
||||
import type { ReducerAccount } from 'soapbox/reducers/accounts';
|
||||
|
||||
const SelectedStatus = ({ statusId }: { statusId: string }) => {
|
||||
const status = useAppSelector((state) => state.statuses.get(statusId));
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
|
||||
<AccountContainer
|
||||
id={status.get('account') as any}
|
||||
showProfileHoverCard={false}
|
||||
timestamp={status.get('created_at')}
|
||||
hideActions
|
||||
/>
|
||||
|
||||
<StatusContent
|
||||
status={status}
|
||||
expanded
|
||||
collapsable
|
||||
/>
|
||||
|
||||
{status.get('media_attachments').size > 0 && (
|
||||
<AttachmentThumbs
|
||||
compact
|
||||
media={status.get('media_attachments')}
|
||||
sensitive={status.get('sensitive')}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
interface IOtherActionsStep {
|
||||
account: ReducerAccount
|
||||
}
|
||||
|
||||
const OtherActionsStep = ({ account }: IOtherActionsStep) => {
|
||||
const dispatch = useDispatch();
|
||||
const features = useFeatures();
|
||||
|
||||
const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
|
||||
const statusIds = useAppSelector((state) => OrderedSet(state.timelines.getIn([`account:${account.id}:with_replies`, 'items'])).union(state.reports.getIn(['new', 'status_ids']) as Iterable<unknown>) as OrderedSet<string>);
|
||||
const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
|
||||
const isForward = useAppSelector((state) => state.reports.getIn(['reports', 'forward']) as boolean);
|
||||
const canForward = isRemote(account as any) && features.federating;
|
||||
const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
|
||||
|
||||
const [showAdditionalStatuses, setShowAdditionalStatuses] = useState<boolean>(false);
|
||||
|
||||
const renderSelectedStatuses = useCallback(() => {
|
||||
switch (selectedStatusIds.size) {
|
||||
case 0:
|
||||
return (
|
||||
<div className='bg-gray-100 dark:bg-slate-700 p-4 rounded-lg flex items-center justify-center w-full'>
|
||||
<Text theme='muted'>You have removed all statuses from being selected.</Text>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return <SelectedStatus statusId={selectedStatusIds.first()} />;
|
||||
}
|
||||
}, [selectedStatusIds.size]);
|
||||
|
||||
const handleBlockChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(changeReportBlock(event.target.checked));
|
||||
};
|
||||
|
||||
const handleForwardChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(changeReportForward(event.target.checked));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchRules());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack space={4}>
|
||||
{renderSelectedStatuses()}
|
||||
|
||||
{!features.reportMultipleStatuses && (
|
||||
<Stack space={2}>
|
||||
<Text size='xl' weight='semibold'>Include other statuses?</Text>
|
||||
|
||||
<FormGroup
|
||||
labelText='Would you like to add additional statuses to this report?'
|
||||
>
|
||||
{showAdditionalStatuses ? (
|
||||
<Stack space={2}>
|
||||
<div className='bg-gray-100 rounded-lg p-4'>
|
||||
{statusIds.map((statusId) => <StatusCheckBox id={statusId} key={statusId} />)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
icon={require('@tabler/icons/icons/arrows-minimize.svg')}
|
||||
theme='secondary'
|
||||
size='sm'
|
||||
onClick={() => setShowAdditionalStatuses(false)}
|
||||
>
|
||||
Hide additional statuses
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
) : (
|
||||
<Button
|
||||
icon={require('@tabler/icons/icons/plus.svg')}
|
||||
theme='secondary'
|
||||
size='sm'
|
||||
onClick={() => setShowAdditionalStatuses(true)}
|
||||
>
|
||||
Add more
|
||||
</Button>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Stack space={2}>
|
||||
<Text size='xl' weight='semibold'>Further actions:</Text>
|
||||
|
||||
<FormGroup
|
||||
labelText={<FormattedMessage id='report.block_hint' defaultMessage='Do you also want to block this account?' />}
|
||||
>
|
||||
<HStack space={2} alignItems='center'>
|
||||
<Toggle
|
||||
checked={isBlocked}
|
||||
onChange={handleBlockChange}
|
||||
icons={false}
|
||||
id='report-block'
|
||||
/>
|
||||
|
||||
<Text theme='muted' tag='label' size='sm' htmlFor='report-block'>
|
||||
<FormattedMessage id='report.block' defaultMessage='Block {target}' values={{ target: `@${account.get('acct')}` }} />
|
||||
</Text>
|
||||
</HStack>
|
||||
</FormGroup>
|
||||
|
||||
{canForward && (
|
||||
<FormGroup
|
||||
labelText={<FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send a copy of the report there as well?' />}
|
||||
>
|
||||
<HStack space={2} alignItems='center'>
|
||||
<Toggle
|
||||
checked={isForward}
|
||||
onChange={handleForwardChange}
|
||||
icons={false}
|
||||
id='report-forward'
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
||||
<Text theme='muted' tag='label' size='sm' htmlFor='report-forward'>
|
||||
<FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: getDomain(account) }} />
|
||||
</Text>
|
||||
</HStack>
|
||||
</FormGroup>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default OtherActionsStep;
|
@ -0,0 +1,189 @@
|
||||
import classNames from 'classnames';
|
||||
import { Set as ImmutableSet } from 'immutable';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { changeReportComment, changeReportRule } from 'soapbox/actions/reports';
|
||||
import { fetchRules } from 'soapbox/actions/rules';
|
||||
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
|
||||
import StatusContent from 'soapbox/components/status_content';
|
||||
import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account_container';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import type { ReducerAccount } from 'soapbox/reducers/accounts';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
|
||||
});
|
||||
|
||||
const SelectedStatus = ({ statusId }: { statusId: string }) => {
|
||||
const status = useAppSelector((state) => state.statuses.get(statusId));
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
|
||||
<AccountContainer
|
||||
id={status.get('account') as any}
|
||||
showProfileHoverCard={false}
|
||||
timestamp={status.get('created_at')}
|
||||
hideActions
|
||||
/>
|
||||
|
||||
<StatusContent
|
||||
status={status}
|
||||
expanded
|
||||
collapsable
|
||||
/>
|
||||
|
||||
{status.get('media_attachments').size > 0 && (
|
||||
<AttachmentThumbs
|
||||
compact
|
||||
media={status.get('media_attachments')}
|
||||
sensitive={status.get('sensitive')}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
interface IReasonStep {
|
||||
account: ReducerAccount
|
||||
}
|
||||
|
||||
const ReasonStep = (_props: IReasonStep) => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const rulesListRef = useRef(null);
|
||||
|
||||
const [isNearBottom, setNearBottom] = useState<boolean>(false);
|
||||
const [isNearTop, setNearTop] = useState<boolean>(true);
|
||||
|
||||
const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
|
||||
const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string);
|
||||
const rules = useAppSelector((state) => state.rules.items);
|
||||
const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as boolean);
|
||||
|
||||
const renderSelectedStatuses = useCallback(() => {
|
||||
switch (selectedStatusIds.size) {
|
||||
case 0:
|
||||
return (
|
||||
<div className='bg-gray-100 dark:bg-slate-700 p-4 rounded-lg flex items-center justify-center w-full'>
|
||||
<Text theme='muted'>You have removed all statuses from being selected.</Text>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return <SelectedStatus statusId={selectedStatusIds.first()} />;
|
||||
}
|
||||
}, [selectedStatusIds.size]);
|
||||
|
||||
const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
dispatch(changeReportComment(event.target.value));
|
||||
};
|
||||
|
||||
const handleRulesScrolling = () => {
|
||||
if (rulesListRef.current) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = rulesListRef.current;
|
||||
|
||||
if (scrollTop + clientHeight > scrollHeight - 24) {
|
||||
setNearBottom(true);
|
||||
} else {
|
||||
setNearBottom(false);
|
||||
}
|
||||
|
||||
if (scrollTop < 24) {
|
||||
setNearTop(true);
|
||||
} else {
|
||||
setNearTop(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchRules());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack space={4}>
|
||||
{renderSelectedStatuses()}
|
||||
|
||||
<Stack space={2}>
|
||||
<Text size='xl' weight='semibold'>Reason for reporting</Text>
|
||||
|
||||
<div className='relative'>
|
||||
<div
|
||||
className='bg-white rounded-lg -space-y-px max-h-96 overflow-y-auto'
|
||||
onScroll={handleRulesScrolling}
|
||||
ref={rulesListRef}
|
||||
>
|
||||
{rules.map((rule, idx) => {
|
||||
const isSelected = String(ruleId) === rule.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => dispatch(changeReportRule(rule.id))}
|
||||
className={classNames({
|
||||
'relative border border-solid border-gray-200 hover:bg-gray-50 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,
|
||||
'rounded-tl-lg rounded-tr-lg': idx === 0,
|
||||
'rounded-bl-lg rounded-br-lg': idx === rules.length - 1,
|
||||
'bg-gray-50': isSelected,
|
||||
})}
|
||||
>
|
||||
<div className='mr-3 flex flex-col'>
|
||||
<span
|
||||
className={classNames('block text-sm font-medium', {
|
||||
'text-primary-800': isSelected,
|
||||
'text-gray-800': !isSelected,
|
||||
})}
|
||||
>
|
||||
{rule.text}
|
||||
</span>
|
||||
<Text theme='muted' size='sm'>{rule.subtext}</Text>
|
||||
</div>
|
||||
|
||||
<input
|
||||
name='reason'
|
||||
type='radio'
|
||||
value={rule.id}
|
||||
checked={isSelected}
|
||||
readOnly
|
||||
className='h-4 w-4 mt-0.5 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-500'
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={classNames('inset-x-0 top-0 flex justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
|
||||
'opacity-0': isNearTop,
|
||||
'opacity-100': !isNearTop,
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={classNames('inset-x-0 bottom-0 flex justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-slate-900 absolute transition-opacity duration-500', {
|
||||
'opacity-0': isNearBottom,
|
||||
'opacity-100': !isNearBottom,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<FormGroup labelText={intl.formatMessage(messages.placeholder)}>
|
||||
<Textarea
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={comment}
|
||||
onChange={handleCommentChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReasonStep;
|
@ -1,129 +0,0 @@
|
||||
import { OrderedSet } from 'immutable';
|
||||
import React, { useEffect } from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
import { blockAccount } from 'soapbox/actions/accounts';
|
||||
import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from 'soapbox/actions/reports';
|
||||
import { expandAccountTimeline } from 'soapbox/actions/timelines';
|
||||
import { Button, Modal } from 'soapbox/components/ui';
|
||||
import { useAccount, useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
import { isRemote, getDomain } from 'soapbox/utils/accounts';
|
||||
|
||||
import StatusCheckBox from '../../report/containers/status_check_box_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
|
||||
submit: { id: 'report.submit', defaultMessage: 'Submit' },
|
||||
});
|
||||
|
||||
interface IReportModal {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const ReportModal = ({ onClose }: IReportModal) => {
|
||||
const dispatch = useDispatch();
|
||||
const features = useFeatures();
|
||||
const intl = useIntl();
|
||||
|
||||
const accountId = useAppSelector((state) => state.reports.getIn(['new', 'account_id']) as string);
|
||||
const account = useAccount(accountId);
|
||||
|
||||
const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
|
||||
const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
|
||||
const isForward = useAppSelector((state) => state.reports.getIn(['reports', 'forward']) as boolean);
|
||||
const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string);
|
||||
const statusIds = useAppSelector((state) => OrderedSet(state.timelines.getIn([`account:${accountId}:with_replies`, 'items'])).union(state.reports.getIn(['new', 'status_ids']) as Iterable<unknown>) as OrderedSet<string>);
|
||||
const canForward = isRemote(account as any) && features.federating;
|
||||
|
||||
const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
dispatch(changeReportComment(event.target.value));
|
||||
};
|
||||
|
||||
const handleForwardChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(changeReportForward(event.target.checked));
|
||||
};
|
||||
|
||||
const handleBlockChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
dispatch(changeReportBlock(event.target.checked));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
dispatch(submitReport());
|
||||
|
||||
if (isBlocked && account) {
|
||||
dispatch(blockAccount(account.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (event.keyCode === 13 && (event.ctrlKey || event.metaKey)) {
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (account) {
|
||||
dispatch(expandAccountTimeline(account.id, { withReplies: true, maxId: null }));
|
||||
}
|
||||
}, [account]);
|
||||
|
||||
if (!account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account.acct}</strong> }} />}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className='report-modal__container'>
|
||||
<div className='report-modal__comment'>
|
||||
<p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' /></p>
|
||||
|
||||
<textarea
|
||||
className='setting-text light'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={comment}
|
||||
onChange={handleCommentChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={isSubmitting}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{canForward && (
|
||||
<div>
|
||||
<p><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send a copy of the report there as well?' /></p>
|
||||
|
||||
<div className='setting-toggle'>
|
||||
<Toggle id='report-forward' checked={isForward} disabled={isSubmitting} onChange={handleForwardChange} />
|
||||
<label htmlFor='report-forward' className='setting-toggle__label'><FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: getDomain(account) }} /></label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p><FormattedMessage id='report.block_hint' defaultMessage='Do you also want to block this account?' /></p>
|
||||
|
||||
<div className='setting-toggle'>
|
||||
<Toggle id='report-block' checked={isBlocked} disabled={isSubmitting} onChange={handleBlockChange} />
|
||||
<label htmlFor='report-block' className='setting-toggle__label'><FormattedMessage id='report.block' defaultMessage='Block {target}' values={{ target: account.get('acct') }} /></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button disabled={isSubmitting} onClick={handleSubmit}>{intl.formatMessage(messages.submit)}</Button>
|
||||
</div>
|
||||
|
||||
<div className='report-modal__statuses'>
|
||||
<div>
|
||||
{statusIds.map((statusId) => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportModal;
|
@ -0,0 +1,31 @@
|
||||
import { RULES_FETCH_REQUEST, RULES_FETCH_SUCCESS } from '../actions/rules';
|
||||
|
||||
import type { RulesActions } from '../actions/rules';
|
||||
|
||||
export type Rule = {
|
||||
id: string
|
||||
text: string
|
||||
subtext: string
|
||||
rule_type: 'content' | 'account'
|
||||
}
|
||||
|
||||
type RulesState = {
|
||||
items: Rule[],
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
const initialState: RulesState = {
|
||||
items: [],
|
||||
isLoading: false,
|
||||
};
|
||||
|
||||
export default function rules(state: RulesState = initialState, action: RulesActions): RulesState {
|
||||
switch (action.type) {
|
||||
case RULES_FETCH_REQUEST:
|
||||
return { ...state, isLoading: true };
|
||||
case RULES_FETCH_SUCCESS:
|
||||
return { ...state, isLoading: false, items: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
Loading…
Reference in new issue