export function CreateRecipientGroup()

in dashboards-notifications/public/pages/Emails/CreateRecipientGroup.tsx [35:191]
112 lines of code
8 McCabe index (conditional complexity)

export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
  const coreContext = useContext(CoreServicesContext)!;
  const servicesContext = useContext(ServicesContext)!;

  const [loading, setLoading] = useState(false);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [selectedEmailOptions, setSelectedEmailOptions] = useState<
    Array<EuiComboBoxOptionOption<string>>
  >([]);
  const [emailOptions, setEmailOptions] = useState([
    {
      label: 'no-reply@company.com',
    },
  ]);
  const [inputErrors, setInputErrors] = useState<{ [key: string]: string[] }>({
    name: [],
    emailOptions: [],
  });

  const isInputValid = (): boolean => {
    const errors: { [key: string]: string[] } = {
      name: validateRecipientGroupName(name),
      emailOptions: validateRecipientGroupEmails(selectedEmailOptions),
    };
    setInputErrors(errors);
    return !Object.values(errors).reduce(
      (errorFlag, error) => errorFlag || error.length > 0,
      false
    );
  };

  useEffect(() => {
    coreContext.chrome.setBreadcrumbs([
      BREADCRUMBS.NOTIFICATIONS,
      BREADCRUMBS.EMAIL_GROUPS,
      props.edit
        ? BREADCRUMBS.EDIT_RECIPIENT_GROUP
        : BREADCRUMBS.CREATE_RECIPIENT_GROUP,
    ]);
    window.scrollTo(0, 0);

    if (props.edit) {
      getRecipientGroup();
    }
  }, []);

  const getRecipientGroup = async () => {
    const id = props.match.params?.id;
    if (typeof id !== 'string') return;

    try {
      const response = await servicesContext.notificationService.getRecipientGroup(
        id
      );
      setName(response.name);
      setDescription(response.description || '');
      setSelectedEmailOptions(
        response.email_group.recipient_list.map((recipient) => ({
          label: recipient.recipient,
        }))
      );
    } catch (error) {
      coreContext.notifications.toasts.addDanger(
        getErrorMessage(error, 'There was a problem loading recipient group.')
      );
    }
  };

  return (
    <>
      <EuiTitle size="l">
        <h1>{`${props.edit ? 'Edit' : 'Create'} recipient group`}</h1>
      </EuiTitle>

      <EuiSpacer />
      <ContentPanel
        bodyStyles={{ padding: 'initial' }}
        title="Configure recipient group"
        titleSize="s"
        panelStyles={{ maxWidth: 1000 }}
      >
        <CreateRecipientGroupForm
          name={name}
          setName={setName}
          description={description}
          setDescription={setDescription}
          selectedEmailOptions={selectedEmailOptions}
          setSelectedEmailOptions={setSelectedEmailOptions}
          emailOptions={emailOptions}
          setEmailOptions={setEmailOptions}
          inputErrors={inputErrors}
          setInputErrors={setInputErrors}
        />
      </ContentPanel>
      <EuiSpacer />
      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
        <EuiFlexItem grow={false}>
          <EuiButtonEmpty href={`#${ROUTES.EMAIL_GROUPS}`}>
            Cancel
          </EuiButtonEmpty>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
          <EuiButton
            fill
            isLoading={loading}
            onClick={async () => {
              if (!isInputValid()) {
                coreContext.notifications.toasts.addDanger(
                  'Some fields are invalid. Fix all highlighted error(s) before continuing.'
                );
                return;
              }
              setLoading(true);
              const config = createRecipientGroupConfigObject(
                name,
                description,
                selectedEmailOptions
              );
              const request = props.edit
                ? servicesContext.notificationService.updateConfig(
                    props.match.params.id!,
                    config
                  )
                : servicesContext.notificationService.createConfig(config);
              await request
                .then((response) => {
                  coreContext.notifications.toasts.addSuccess(
                    `Recipient group ${name} successfully ${
                      props.edit ? 'updated' : 'created'
                    }.`
                  );
                  setTimeout(
                    () => (location.hash = `#${ROUTES.EMAIL_GROUPS}`),
                    SERVER_DELAY
                  );
                })
                .catch((error) => {
                  setLoading(false);
                  coreContext.notifications.toasts.addError(
                    error?.body || error,
                    {
                      title: `Failed to ${
                        props.edit ? 'update' : 'create'
                      } recipient group.`,
                    }
                  );
                });
            }}
          >
            {props.edit ? 'Save' : 'Create'}
          </EuiButton>
        </EuiFlexItem>
      </EuiFlexGroup>
    </>
  );
}