kandimat/redaktions-app/src/components/DialogDeleteCategory.tsx
2020-12-30 21:13:06 +01:00

62 lines
2.2 KiB
TypeScript

import React from 'react';
import {makeVar, Reference, useMutation, useReactiveVar} from "@apollo/client";
import DialogSimple from "./DialogSimple";
import {useSnackbar} from "notistack";
import {DELETE_CATEGORY, DeleteCategoryResponse, DeleteCategoryVariables} from "../backend/mutations/category";
export const dialogDeleteCategoryId = makeVar<string>("");
export const dialogDeleteCategoryTitle = makeVar<string>("");
export const dialogDeleteCategoryOpen = makeVar<boolean>(false);
export default function DialogDeleteCategory() {
const {enqueueSnackbar} = useSnackbar();
const [deleteCategory, {loading}] = useMutation<DeleteCategoryResponse, DeleteCategoryVariables>(DELETE_CATEGORY, {
onError: (e) => enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {variant: "error"}),
onCompleted: (response) => {
if (response.deleteCategory) {
enqueueSnackbar("Kategorie erfolgreich gelöscht.", {variant: "success"})
dialogDeleteCategoryOpen(false);
} else {
enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {variant: "error"})
}
},
update: (cache, {data}) => {
const idToRemove = data?.deleteCategory?.category.id;
cache.modify({
fields: {
allCategories(existingCategoriesRef: { nodes: Array<Reference> } = {nodes: []}, {readField}) {
console.log("existingCategory: ", existingCategoriesRef)
return {nodes: existingCategoriesRef.nodes.filter(categoryRef => readField('id', categoryRef) !== idToRemove)};
}
}
});
}
});
const open = useReactiveVar(dialogDeleteCategoryOpen);
const title = useReactiveVar(dialogDeleteCategoryTitle);
const id = useReactiveVar(dialogDeleteCategoryId);
const handleConfirmButtonClick = () => {
deleteCategory({
variables: {
id
}
})
}
return (
<DialogSimple
open={open}
title={"Kategorie löschen?"}
description={`Möchtest du die Kategorie "${title}" wirklich löschen?`}
confirmButtonText={"Löschen"}
onConfirmButtonClick={handleConfirmButtonClick}
onClose={() => dialogDeleteCategoryOpen(false)}
loading={loading}
/>
);
}