All files / app/features/messages/groupchats GroupChatSettingsDialog.tsx

70.37% Statements 19/27
20% Branches 1/5
20% Functions 1/5
73.07% Lines 19/26

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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 1101x 1x 1x           1x 1x         1x     1x 1x   1x 1x 1x 1x             1x       161x 161x   161x 161x                                     161x       161x                                                                                                
import { Checkbox, DialogProps, FormControlLabel } from "@material-ui/core";
import Alert from "components/Alert";
import Button from "components/Button";
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
} from "components/Dialog";
import TextField from "components/TextField";
import {
  groupChatKey,
  groupChatMessagesKey,
  groupChatsListKey,
} from "features/queryKeys";
import { Empty } from "google-protobuf/google/protobuf/empty_pb";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { GLOBAL, MESSAGES } from "i18n/namespaces";
import { GroupChat } from "proto/conversations_pb";
import React from "react";
import { useForm } from "react-hook-form";
import { useMutation, useQueryClient } from "react-query";
import { service } from "service";
 
interface GroupChatSettingsData {
  title: string;
  onlyAdminsInvite: boolean;
}
 
export default function GroupChatSettingsDialog({
  groupChat,
  ...props
}: DialogProps & { groupChat: GroupChat.AsObject }) {
  const { t } = useTranslation([GLOBAL, MESSAGES]);
  const { register, handleSubmit } = useForm<GroupChatSettingsData>();
 
  const queryClient = useQueryClient();
  const mutation = useMutation<Empty, RpcError, GroupChatSettingsData>(
    ({ title, onlyAdminsInvite }) =>
      service.conversations.editGroupChat(
        groupChat.groupChatId,
        title,
        onlyAdminsInvite
      ),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(
          groupChatMessagesKey(groupChat.groupChatId)
        );
        queryClient.invalidateQueries(groupChatsListKey);
        queryClient.invalidateQueries(groupChatKey(groupChat.groupChatId));
        Iif (props.onClose) props.onClose({}, "escapeKeyDown");
      },
    }
  );
 
  const onSubmit = handleSubmit((data) => {
    mutation.mutate(data);
  });
 
  return (
    <Dialog {...props} aria-labelledby="group-chat-settings-dialog-title">
      <DialogTitle id="group-chat-settings-dialog-title">
        {t("messages:group_chat_settings_dialog.title")}
      </DialogTitle>
      <DialogContent>
        <form onSubmit={onSubmit}>
          {mutation.error && (
            <Alert severity={"error"}>{mutation.error?.message}</Alert>
          )}
          <TextField
            id="group-chat-settings-chat-title"
            inputRef={register}
            defaultValue={groupChat.title}
            name="title"
            label={t(
              "messages:group_chat_settings_dialog.chat_title.field_label"
            )}
          />
          <FormControlLabel
            control={
              <Checkbox
                name="onlyAdminsInvite"
                inputRef={register}
                defaultChecked={groupChat.onlyAdminsInvite}
              />
            }
            label={t(
              "messages:group_chat_settings_dialog.only_admins_invite.field_label"
            )}
          />
        </form>
      </DialogContent>
      <DialogActions>
        <Button onClick={onSubmit} loading={mutation.isLoading}>
          {t("global:save")}
        </Button>
        <Button
          onClick={() =>
            props.onClose ? props.onClose({}, "escapeKeyDown") : null
          }
        >
          {t("global:cancel")}
        </Button>
      </DialogActions>
    </Dialog>
  );
}