signal-desktop/ts/components/AddGroupMemberErrorDialog.tsx

// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import type { FunctionComponent, ReactNode } from 'react';
import React from 'react';

import type { LocalizerType } from '../types/Util';
import { Alert } from './Alert';
import { missingCaseError } from '../util/missingCaseError';

export enum AddGroupMemberErrorDialogMode {
  MaximumGroupSize,
  RecommendedMaximumGroupSize,
}

type PropsDataType =
  | {
      mode: AddGroupMemberErrorDialogMode.MaximumGroupSize;
      maximumNumberOfContacts: number;
    }
  | {
      mode: AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize;
      recommendedMaximumNumberOfContacts: number;
    };

type PropsType = {
  i18n: LocalizerType;
  onClose: () => void;
} & PropsDataType;

export const AddGroupMemberErrorDialog: FunctionComponent<
  PropsType
> = props => {
  const { i18n, onClose } = props;

  let title: string;
  let body: ReactNode;
  switch (props.mode) {
    case AddGroupMemberErrorDialogMode.MaximumGroupSize: {
      const { maximumNumberOfContacts } = props;
      title = i18n('chooseGroupMembers__maximum-group-size__title');
      body = i18n('chooseGroupMembers__maximum-group-size__body', [
        maximumNumberOfContacts.toString(),
      ]);
      break;
    }
    case AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize: {
      const { recommendedMaximumNumberOfContacts } = props;
      title = i18n('chooseGroupMembers__maximum-recommended-group-size__title');
      body = i18n('chooseGroupMembers__maximum-recommended-group-size__body', [
        recommendedMaximumNumberOfContacts.toString(),
      ]);
      break;
    }
    default:
      throw missingCaseError(props);
  }

  return <Alert body={body} i18n={i18n} onClose={onClose} title={title} />;
};