bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'report-modal-previous' into 'develop'

Browse source 
Show 'previous' button in report modal

See merge request soapbox-pub/soapbox!1961
This commit is contained in:
marcin mikołajczak 2022-11-28 15:06:29 +00:00
commit 0d278ffc53
1 changed files with 50 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
View file

@ -23,6 +23,8 @@ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
submit: { id: 'report.submit', defaultMessage: 'Submit' },
cancel: { id: 'common.cancel', defaultMessage: 'Cancel' },
previous: { id: 'report.previous', defaultMessage: 'Previous' },
});
enum Steps {
@ -101,6 +103,52 @@ const ReportModal = ({ onClose }: IReportModal) => {
}
};
const renderSelectedStatuses = useCallback(() => {
switch (selectedStatusIds.size) {
case 0:
return (
<div className='bg-gray-100 dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center w-full'>
<Text theme='muted'>{intl.formatMessage(messages.blankslate)}</Text>
</div>
);
default:
return <SelectedStatus statusId={selectedStatusIds.first()} />;
}
}, [selectedStatusIds.size]);
const cancelText = useMemo(() => {
switch (currentStep) {
case Steps.ONE:
return intl.formatMessage(messages.cancel);
default:
return intl.formatMessage(messages.previous);
}
}, [currentStep]);
const cancelAction = () => {
switch (currentStep) {
case Steps.ONE:
onClose();
break;
case Steps.TWO:
setCurrentStep(Steps.ONE);
break;
default:
break;
}
};
const confirmationText = useMemo(() => {
switch (currentStep) {
case Steps.TWO:
return intl.formatMessage(messages.submit);
case Steps.THREE:
return intl.formatMessage(messages.done);
default:
return intl.formatMessage(messages.next);
}
}, [currentStep]);
const handleNextStep = () => {
switch (currentStep) {
case Steps.ONE:
@ -118,30 +166,6 @@ const ReportModal = ({ onClose }: IReportModal) => {
}
};
const renderSelectedStatuses = useCallback(() => {
switch (selectedStatusIds.size) {
case 0:
return (
<div className='bg-gray-100 dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center w-full'>
<Text theme='muted'>{intl.formatMessage(messages.blankslate)}</Text>
</div>
);
default:
return <SelectedStatus statusId={selectedStatusIds.first()} />;
}
}, [selectedStatusIds.size]);
const confirmationText = useMemo(() => {
switch (currentStep) {
case Steps.TWO:
return intl.formatMessage(messages.submit);
case Steps.THREE:
return intl.formatMessage(messages.done);
default:
return intl.formatMessage(messages.next);
}
}, [currentStep]);
const isConfirmationButtonDisabled = useMemo(() => {
if (currentStep === Steps.THREE) {
return false;
@ -179,8 +203,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
<Modal
title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account.acct}</strong> }} />}
onClose={onClose}
cancelText={<FormattedMessage id='common.cancel' defaultMessage='Cancel' />}
cancelAction={currentStep === Steps.THREE ? undefined : onClose}
cancelText={cancelText}
cancelAction={cancelAction}
confirmationAction={handleNextStep}
confirmationText={confirmationText}
confirmationDisabled={isConfirmationButtonDisabled}