Files
bodyshop/client/src/components/bill-delete-button/bill-delete-button.component.jsx
2021-05-06 18:22:04 -07:00

67 lines
1.9 KiB
JavaScript

import { DeleteFilled } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Button, notification, Popconfirm } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { DELETE_BILL } from "../../graphql/bills.queries";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
export default function BillDeleteButton({ bill }) {
const [loading, setLoading] = useState(false);
const { t } = useTranslation();
const [deleteBill] = useMutation(DELETE_BILL);
const handleDelete = async () => {
setLoading(true);
const result = await deleteBill({
variables: { billId: bill.id },
update(cache) {
cache.modify({
fields: {
bills(existingBills, { readField }) {
return existingBills.filter(
(billref) => bill.id !== readField("id", billref)
);
},
search_bills(existingBills, { readField }) {
return existingBills.filter(
(billref) => bill.id !== readField("id", billref)
);
},
},
});
},
});
if (!!!result.errors) {
notification["success"]({ message: t("bills.successes.deleted") });
} else {
notification["error"]({
message: t("bills.errors.deleting", {
error: JSON.stringify(result.errors),
}),
});
}
setLoading(false);
};
return (
<RbacWrapper action="bills:delete" noauth={<></>}>
<Popconfirm
disabled={bill.exported}
onConfirm={handleDelete}
title={t("bills.labels.deleteconfirm")}
>
<Button
disabled={bill.exported}
// onClick={handleDelete}
loading={loading}
>
<DeleteFilled />
</Button>
</Popconfirm>
</RbacWrapper>
);
}