All files / client/src/views/group/components GroupCreatorActions.tsx

75% Statements 15/20
16.66% Branches 1/6
66.66% Functions 4/6
75% Lines 15/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92                                356x 18x 18x   18x   18x   18x   18x 2x   2x           2x     2x 2x     2x                 2x                                             2x                                  
import { ReactElement, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, ButtonStyle } from "client/components/Button";
import {
  PostCloseGroupErrorMessage,
  submitCloseGroup,
} from "client/views/group/groupThunks";
import { useAppDispatch } from "client/utils/hooks";
import { ErrorMessage } from "client/components/ErrorMessage";
import { ButtonGroup } from "client/components/ButtonGroup";
 
interface Props {
  username: string;
  groupCode: string;
}
 
export const GroupCreatorActions = ({ groupCode }: Props): ReactElement => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
 
  const [loading, setLoading] = useState<boolean>(false);
  const [showCloseGroupConfirmation, setShowCloseGroupConfirmation] =
    useState<boolean>(false);
  const [serverError, setServerError] =
    useState<PostCloseGroupErrorMessage | null>(null);
 
  const closeGroup = async (): Promise<void> => {
    setLoading(true);
 
    const errorMessage = await dispatch(
      submitCloseGroup({
        groupCode,
      }),
    );
 
    Iif (errorMessage) {
      setServerError(errorMessage);
    } else {
      setServerError(null);
      setShowCloseGroupConfirmation(false);
    }
 
    setLoading(false);
  };
 
  return (
    <>
      <div>
        <Button
          disabled={showCloseGroupConfirmation}
          buttonStyle={ButtonStyle.PRIMARY}
          onClick={() => setShowCloseGroupConfirmation(true)}
        >
          {t("button.closeGroup")}
        </Button>
      </div>
 
      {showCloseGroupConfirmation && (
        <>
          <p>{t("group.closeGroupConfirmation")}</p>
          <ButtonGroup>
            <Button
              buttonStyle={ButtonStyle.SECONDARY}
              onClick={() => {
                setShowCloseGroupConfirmation(false);
                setServerError(null);
              }}
            >
              {t("button.cancel")}
            </Button>
 
            <Button
              disabled={loading}
              buttonStyle={ButtonStyle.PRIMARY}
              onClick={async () => await closeGroup()}
            >
              {t("button.closeGroup")}
            </Button>
          </ButtonGroup>
        </>
      )}
 
      {serverError && (
        <ErrorMessage
          message={t(serverError)}
          closeError={() => setServerError(null)}
        />
      )}
    </>
  );
};