kandimat/redaktions-app/src/components/DeleteCategoryDialog.tsx
Christoph Lienhard fc8bc6724b
#11 Refactor: Introduce apollo reactive variables for global state
Use it to streamline entangle the delete dialog(s) from the list(s)
2020-12-30 18:26:19 +01:00

61 lines
2.1 KiB
TypeScript

import React from 'react';
import {makeVar, Reference, useMutation, useReactiveVar} from "@apollo/client";
import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
import {useSnackbar} from "notistack";
import {DELETE_CATEGORY, DeleteCategoryResponse, DeleteCategoryVariables} from "../backend/mutations/category";
export const deleteCategoryDialogId = makeVar<string>("");
export const deleteCategoryDialogTitle = makeVar<string>("");
export const deleteCategoryDialogOpen = makeVar<boolean>(false);
export default function DeleteCategoryDialog() {
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"})
deleteCategoryDialogOpen(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(deleteCategoryDialogOpen);
const title = useReactiveVar(deleteCategoryDialogTitle);
const id = useReactiveVar(deleteCategoryDialogId);
const handleConfirmButtonClick = () => {
deleteCategory({
variables: {
id
}
})
}
return (
<DeleteConfirmationDialog
open={open}
type={"Kategorie"}
title={title}
onConfirmButtonClick={handleConfirmButtonClick}
onClose={() => deleteCategoryDialogOpen(false)}
loading={loading}
/>
);
}