- Optimization and Edgecases

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/production-sublets-manage/production-sublets-manage.component.jsx

@@ -1,6 +1,6 @@
 import { CheckCircleFilled, EyeInvisibleFilled } from "@ant-design/icons";
 import { Button, List, notification, Popover } from "antd";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useCallback } from "react";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB_LINE_SUBLET } from "../../graphql/jobs-lines.queries";
@@ -10,79 +10,86 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
   const [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET);
   const [loading, setLoading] = useState(false);
 
-  const subletCount = useMemo(() => {
-    return {
+  const subletCount = useMemo(
+    () => ({
       total: subletJobLines.filter((s) => !s.sublet_ignored).length,
       outstanding: subletJobLines.filter((s) => !s.sublet_ignored && !s.sublet_completed).length
-    };
-  }, [subletJobLines]);
+    }),
+    [subletJobLines]
+  );
 
-  const handleSubletMark = async (sublet, action) => {
-    setLoading(true);
+  const handleSubletMark = useCallback(
+    async (sublet, action) => {
+      setLoading(true);
 
-    const result = await updateJobLine({
-      variables: {
-        jobId: sublet.jobid,
-        now: new Date(),
-        lineId: sublet.id,
-        line: {
-          sublet_completed: action === "complete" ? !sublet.sublet_completed : false,
-          sublet_ignored: action === "ignore" ? !sublet.sublet_ignored : false
+      const result = await updateJobLine({
+        variables: {
+          jobId: sublet.jobid,
+          now: new Date(),
+          lineId: sublet.id,
+          line: {
+            sublet_completed: action === "complete" ? !sublet.sublet_completed : false,
+            sublet_ignored: action === "ignore" ? !sublet.sublet_ignored : false
+          }
         }
+      });
+
+      if (result.errors) {
+        notification["error"]({
+          message: t("joblines.errors.updating", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      } else {
+        notification["success"]({
+          message: t("joblines.successes.updated")
+        });
       }
-    });
+      setLoading(false);
+    },
+    [updateJobLine, t]
+  );
 
-    if (!!result.errors) {
-      notification["error"]({
-        message: t("joblines.errors.updating", {
-          message: JSON.stringify(result.errors)
-        })
-      });
-    } else {
-      notification["success"]({
-        message: t("joblines.successes.updated")
-      });
-    }
-    setLoading(false);
-  };
-
-  const popContent = (
-    <div style={{ minWidth: "20rem" }}>
-      <List
-        onClick={(e) => e.stopPropagation()}
-        dataSource={subletJobLines}
-        renderItem={(s) => (
-          <List.Item
-            actions={[
-              <Button
-                key="complete"
-                loading={loading}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleSubletMark(s, "complete");
-                }}
-                type={s.sublet_completed ? "primary" : "ghost"}
-              >
-                <CheckCircleFilled color={s.sublet_completed ? "green" : null} />
-              </Button>,
-              <Button
-                key="sublet"
-                loading={loading}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleSubletMark(s, "ignore");
-                }}
-                type={s.sublet_ignored ? "primary" : "ghost"}
-              >
-                <EyeInvisibleFilled color={s.sublet_ignored ? "tomato" : null} />
-              </Button>
-            ]}
-          >
-            <List.Item.Meta title={s.line_desc} />
-          </List.Item>
-        )}
-      />
-    </div>
+  const popContent = useMemo(
+    () => (
+      <div style={{ minWidth: "20rem" }}>
+        <List
+          onClick={(e) => e.stopPropagation()}
+          dataSource={subletJobLines}
+          renderItem={(s) => (
+            <List.Item
+              actions={[
+                <Button
+                  key="complete"
+                  loading={loading}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSubletMark(s, "complete");
+                  }}
+                  type={s.sublet_completed ? "primary" : "ghost"}
+                >
+                  <CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />
+                </Button>,
+                <Button
+                  key="sublet"
+                  loading={loading}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSubletMark(s, "ignore");
+                  }}
+                  type={s.sublet_ignored ? "primary" : "ghost"}
+                >
+                  <EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />
+                </Button>
+              ]}
+            >
+              <List.Item.Meta title={s.line_desc} />
+            </List.Item>
+          )}
+        />
+      </div>
+    ),
+    [subletJobLines, loading, handleSubletMark]
   );
 
   return (
@@ -93,9 +100,9 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
       placement="bottom"
       title={t("production.labels.sublets")}
     >
-      <span style={{ color: subletCount.outstanding > 0 ? "tomato" : "" }}>{`${
-        subletCount.total - subletCount.outstanding
-      } / ${subletCount.total}`}</span>
+      <span
+        style={{ color: subletCount.outstanding > 0 ? "tomato" : undefined }}
+      >{`${subletCount.total - subletCount.outstanding} / ${subletCount.total}`}</span>
     </Popover>
   );
 }