- Lane Checkpoint: In Horizontal mode, all lanes will be the height of the largest lane, this way if you are dragging cards from the bottom of one lane, you do not need to drag to the top of another.

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

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -17,7 +17,7 @@ import ProductionBoardFilters from "../production-board-filters/production-board
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
 import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
-import { createBoardData } from "./production-board-kanban.utils.js";
+import { createBoardData, createFakeBoardData } from "./production-board-kanban.utils.js";
 import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -1,6 +1,6 @@
 import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import _ from "lodash";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -19,22 +19,44 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
+  const client = useApolloClient();
+  const [joblist, setJoblist] = useState([]);
+
   const { refetch, loading, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
     pollInterval: 3600000,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
-  const client = useApolloClient();
-  const [joblist, setJoblist] = useState([]);
+
   const { data: updatedJobs } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
 
+  const { loading: associationSettingsLoading, data: associationSettings } = useQuery(QUERY_KANBAN_SETTINGS, {
+    variables: { email: currentUser.email }
+  });
+
+  const getUpdatedJobData = useCallback(
+    async (jobId) => {
+      await client.query({
+        query: QUERY_EXACT_JOB_IN_PRODUCTION,
+        variables: { id: jobId }
+      });
+    },
+    [client]
+  );
+
+  const getUpdatedJobsData = useCallback(
+    async (jobIds) => {
+      await client.query({
+        query: QUERY_EXACT_JOBS_IN_PRODUCTION,
+        variables: { ids: jobIds }
+      });
+    },
+    [client]
+  );
+
   useEffect(() => {
-    if (!(data && data.jobs)) return;
-    setJoblist(
-      data.jobs.map((j) => {
-        return { id: j.id, updated_at: j.updated_at };
-      })
-    );
+    if (!data?.jobs) return;
+    setJoblist(data.jobs.map((j) => ({ id: j.id, updated_at: j.updated_at })));
   }, [data]);
 
   useEffect(() => {
@@ -46,46 +68,25 @@ export function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
       (a, b) => a.id === b.id && a.updated_at === b.updated_at
     );
 
-    jobDiff.forEach((job) => {
-      getUpdatedJobData(job.id);
-    });
     if (jobDiff.length > 1) {
       getUpdatedJobsData(jobDiff.map((j) => j.id));
     } else if (jobDiff.length === 1) {
-      jobDiff.forEach((job) => {
-        getUpdatedJobData(job.id);
-      });
+      getUpdatedJobData(jobDiff[0].id);
     }
 
     setJoblist(updatedJobs.jobs);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updatedJobs]);
+  }, [updatedJobs, joblist, getUpdatedJobData, getUpdatedJobsData]);
 
-  const getUpdatedJobData = async (jobId) => {
-    client.query({
-      query: QUERY_EXACT_JOB_IN_PRODUCTION,
-      variables: { id: jobId }
-    });
-  };
-  const getUpdatedJobsData = async (jobIds) => {
-    client.query({
-      query: QUERY_EXACT_JOBS_IN_PRODUCTION,
-      variables: { ids: jobIds }
-    });
-  };
-
-  const { loading: associationSettingsLoading, data: associationSettings } = useQuery(QUERY_KANBAN_SETTINGS, {
-    variables: { email: currentUser.email }
-  });
+  const filteredAssociationSettings = useMemo(() => {
+    return associationSettings?.associations[0] || null;
+  }, [associationSettings]);
 
   return (
     <ProductionBoardKanbanComponent
       loading={loading || associationSettingsLoading}
       data={data ? data.jobs : []}
       refetch={refetch}
-      associationSettings={
-        associationSettings && associationSettings.associations[0] ? associationSettings.associations[0] : null
-      }
+      associationSettings={filteredAssociationSettings}
     />
   );
 }

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -1,7 +1,6 @@
 .react-trello-board {
   padding: 5px;
 }
-
 .item .is-dragging {
   box-shadow: 2px 2px grey;
   rotate: 5deg;