92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
import React, { useMemo, useState } from 'react';
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { submitGroupEditor } from 'soapbox/actions/groups';
|
|
import { Modal, Stack } from 'soapbox/components/ui';
|
|
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
|
|
|
import DetailsStep from './steps/details-step';
|
|
import PrivacyStep from './steps/privacy-step';
|
|
|
|
const messages = defineMessages({
|
|
next: { id: 'manage_group.next', defaultMessage: 'Next' },
|
|
create: { id: 'manage_group.create', defaultMessage: 'Create' },
|
|
update: { id: 'manage_group.update', defaultMessage: 'Update' },
|
|
});
|
|
|
|
enum Steps {
|
|
ONE = 'ONE',
|
|
TWO = 'TWO',
|
|
}
|
|
|
|
const manageGroupSteps = {
|
|
ONE: PrivacyStep,
|
|
TWO: DetailsStep,
|
|
};
|
|
|
|
interface IManageGroupModal {
|
|
onClose: (type?: string) => void
|
|
}
|
|
|
|
const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const id = useAppSelector((state) => state.group_editor.groupId);
|
|
|
|
const isSubmitting = useAppSelector((state) => state.group_editor.isSubmitting);
|
|
|
|
const [currentStep, setCurrentStep] = useState<Steps>(id ? Steps.TWO : Steps.ONE);
|
|
|
|
const onClickClose = () => {
|
|
onClose('MANAGE_GROUP');
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
dispatch(submitGroupEditor(true));
|
|
};
|
|
|
|
const confirmationText = useMemo(() => {
|
|
switch (currentStep) {
|
|
case Steps.TWO:
|
|
return intl.formatMessage(id ? messages.update : messages.create);
|
|
default:
|
|
return intl.formatMessage(messages.next);
|
|
}
|
|
}, [currentStep]);
|
|
|
|
const handleNextStep = () => {
|
|
switch (currentStep) {
|
|
case Steps.ONE:
|
|
setCurrentStep(Steps.TWO);
|
|
break;
|
|
case Steps.TWO:
|
|
handleSubmit();
|
|
onClose();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const StepToRender = manageGroupSteps[currentStep];
|
|
|
|
return (
|
|
<Modal
|
|
title={id
|
|
? <FormattedMessage id='navigation_bar.edit_group' defaultMessage='Edit Group' />
|
|
: <FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />}
|
|
confirmationAction={handleNextStep}
|
|
confirmationText={confirmationText}
|
|
confirmationDisabled={isSubmitting}
|
|
confirmationFullWidth
|
|
onClose={onClickClose}
|
|
>
|
|
<Stack space={2}>
|
|
<StepToRender />
|
|
</Stack>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ManageGroupModal;
|