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

Show 'previous' button in report modal

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-11-28 00:08:27 +01:00
parent 429b40aa6d
commit 4a96507cd1
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' }, close: { id: 'lightbox.close', defaultMessage: 'Close' },
placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' }, placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
submit: { id: 'report.submit', defaultMessage: 'Submit' }, submit: { id: 'report.submit', defaultMessage: 'Submit' },
cancel: { id: 'common.cancel', defaultMessage: 'Cancel' },
previous: { id: 'report.previous', defaultMessage: 'Previous' },
}); });
enum Steps { 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 = () => { const handleNextStep = () => {
switch (currentStep) { switch (currentStep) {
case Steps.ONE: 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(() => { const isConfirmationButtonDisabled = useMemo(() => {
if (currentStep === Steps.THREE) { if (currentStep === Steps.THREE) {
return false; return false;
@ -179,8 +203,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
<Modal <Modal
title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account.acct}</strong> }} />} title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account.acct}</strong> }} />}
onClose={onClose} onClose={onClose}
cancelText={<FormattedMessage id='common.cancel' defaultMessage='Cancel' />} cancelText={cancelText}
cancelAction={currentStep === Steps.THREE ? undefined : onClose} cancelAction={cancelAction}
confirmationAction={handleNextStep} confirmationAction={handleNextStep}
confirmationText={confirmationText} confirmationText={confirmationText}
confirmationDisabled={isConfirmationButtonDisabled} confirmationDisabled={isConfirmationButtonDisabled}