diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index bbcd83d6a..3a45f07a5 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -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 (
+
+ {intl.formatMessage(messages.blankslate)}
+
+ );
+ default:
+ return ;
+ }
+ }, [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 (
-
- {intl.formatMessage(messages.blankslate)}
-
- );
- default:
- return ;
- }
- }, [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) => {
@{account.acct} }} />}
onClose={onClose}
- cancelText={}
- cancelAction={currentStep === Steps.THREE ? undefined : onClose}
+ cancelText={cancelText}
+ cancelAction={cancelAction}
confirmationAction={handleNextStep}
confirmationText={confirmationText}
confirmationDisabled={isConfirmationButtonDisabled}