kandimat/redaktions-app/src/components/DialogChangeCategory.tsx

import React, { useState } from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { DialogActionBar } from "./DialogActionBar";
import { DialogTitleAndDetails } from "./DialogTitleAndDetails";
import { makeVar, useMutation, useQuery, useReactiveVar } from "@apollo/client";
import { useSnackbar } from "notistack";
import {
  BasicCategoryFragment,
  BasicCategoryResponse,
  GET_CATEGORY_BY_ID,
  GetCategoryByIdResponse,
  GetCategoryByIdVariables,
} from "../backend/queries/category";
import {
  ADD_CATEGORY,
  AddCategoryResponse,
  AddCategoryVariables,
  EDIT_CATEGORY,
  EditCategoryResponse,
  EditCategoryVariables,
} from "../backend/mutations/category";

export const dialogChangeCategoryId = makeVar<string>("");
export const dialogChangeCategoryOpen = makeVar<boolean>(false);

export default function DialogChangeCategory(): React.ReactElement {
  const [addMode, setAddMode] = useState(true);
  const [title, setTitle] = useState("");
  const [details, setDetails] = useState("");
  const categoryId = useReactiveVar(dialogChangeCategoryId);
  const open = useReactiveVar(dialogChangeCategoryOpen);
  const { enqueueSnackbar } = useSnackbar();
  useQuery<GetCategoryByIdResponse, GetCategoryByIdVariables>(
    GET_CATEGORY_BY_ID,
    {
      variables: {
        id: categoryId,
      },
      onCompleted: (data) => {
        setAddMode(!data.category && !categoryId);
        setTitle(data.category?.title || "");
        setDetails(data.category?.description || "");
      },
    }
  );
  const [editCategory, { loading: editLoading }] = useMutation<
    EditCategoryResponse,
    EditCategoryVariables
  >(EDIT_CATEGORY, {
    onError: (e) =>
      enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {
        variant: "error",
      }),
    onCompleted: (response) => {
      if (response.updateCategory) {
        enqueueSnackbar("Kategorie erfolgreich geändert.", {
          variant: "success",
        });
        dialogChangeCategoryOpen(false);
      } else {
        enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {
          variant: "error",
        });
      }
    },
  });
  const [addCategory, { loading: addLoading }] = useMutation<
    AddCategoryResponse,
    AddCategoryVariables
  >(ADD_CATEGORY, {
    onError: (e) =>
      enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {
        variant: "error",
      }),
    onCompleted: (response) => {
      if (response.createCategory) {
        enqueueSnackbar("Kategorie erfolgreich hinzugefügt.", {
          variant: "success",
        });
        dialogChangeCategoryOpen(false);
      } else {
        enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {
          variant: "error",
        });
      }
    },
    update: (cache, { data }) => {
      cache.modify({
        fields: {
          allCategories(existingCategories = { nodes: [] }) {
            const newCategoryRef = cache.writeFragment<
              BasicCategoryResponse | undefined
            >({
              data: data?.createCategory?.category,
              fragment: BasicCategoryFragment,
              fragmentName: "BasicCategoryFragment",
            });
            return { nodes: [...existingCategories.nodes, newCategoryRef] };
          },
        },
      });
    },
  });

  const handleConfirmButtonClick = () => {
    if (addMode) {
      addCategory({
        variables: {
          title,
          description: details,
        },
      });
    } else {
      editCategory({
        variables: {
          id: categoryId,
          title: title,
          description: details,
        },
      });
    }
  };

  return (
    <Dialog
      open={open}
      onClose={() => dialogChangeCategoryOpen(false)}
      aria-labelledby="form-dialog-title"
    >
      <DialogTitle id="form-dialog-title">
        {addMode ? "Neue Kategorie erstellen" : "Kategorie bearbeiten"}
      </DialogTitle>
      <DialogContent>
        <DialogTitleAndDetails
          title={title}
          details={details}
          onTitleChange={(newTitle) => setTitle(newTitle)}
          onDetailsChange={(newDetails) => setDetails(newDetails)}
        />
      </DialogContent>
      <DialogActionBar
        onClose={() => dialogChangeCategoryOpen(false)}
        onConfirmButtonClick={handleConfirmButtonClick}
        confirmButtonText={addMode ? "Erstellen" : "Speichern"}
        loading={addMode ? addLoading : editLoading}
      />
    </Dialog>
  );
}