Added remove from production button to kanban card. BOD-261

client/src/components/production-remove-button/production-remove-button.component.jsx

@@ -1,28 +1,36 @@
-import React from "react";
 import { useMutation } from "@apollo/react-hooks";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { Button, notification } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 
 export default function ProductionRemoveButton({ jobId }) {
   const [removeJobFromProduction] = useMutation(UPDATE_JOB);
   const { t } = useTranslation();
-  const handleRemoveFromProd = () => {
-    logImEXEvent("production_remove_job");
+  const [loading, setLoading] = useState(false);
 
-    removeJobFromProduction({
+  const handleRemoveFromProd = async () => {
+    logImEXEvent("production_remove_job");
+    setLoading(true);
+    const result = await removeJobFromProduction({
       variables: { jobId: jobId, job: { inproduction: false } },
-    }).catch((error) => {
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("production.successes.removed") });
+    } else {
       notification["error"]({
         message: t("production.errors.removing", {
-          error: JSON.stringify(error),
+          error: JSON.stringify(result.errors),
         }),
       });
-    });
+    }
+    setLoading(false);
   };
+
   return (
-    <Button onClick={handleRemoveFromProd} type={"danger"}>
+    <Button loading={loading} onClick={handleRemoveFromProd} type={"danger"}>
       {t("production.actions.remove")}
     </Button>
   );