From d5e2981044d77c326f0e2f7a3b0dfc00b6efee42 Mon Sep 17 00:00:00 2001
From: Urban Hafner <contact@urbanhafner.com>
Date: Wed, 24 Apr 2024 18:06:59 +0200
Subject: [PATCH] Generic MacroClusterRow component

---
 .../components/clustering/MacroClusterRow.jsx |  89 +++++++++++++++
 .../micro-clusters/DisplayMacroClusters.jsx   | 107 ++----------------
 2 files changed, 97 insertions(+), 99 deletions(-)
 create mode 100644 app/javascript/src/admin/components/clustering/MacroClusterRow.jsx

diff --git a/app/javascript/src/admin/components/clustering/MacroClusterRow.jsx b/app/javascript/src/admin/components/clustering/MacroClusterRow.jsx
new file mode 100644
index 000000000..ea7cefeba
--- /dev/null
+++ b/app/javascript/src/admin/components/clustering/MacroClusterRow.jsx
@@ -0,0 +1,89 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import ScrollIntoViewIfNeeded from "react-scroll-into-view-if-needed";
+
+import { DispatchContext, StateContext } from "../../micro-clusters/GenericApp";
+import { EntriesList } from "./EntriesList";
+import { SearchLink } from "./SearchLink";
+import { ASSIGN_TO_MACRO_CLUSTER, UPDATING } from "./actions";
+import { keyDownListener } from "./keyDownListener";
+
+export const MacroClusterRow = ({
+  macroCluster,
+  afterAssign,
+  selected,
+  assignCluster,
+  fields,
+  extraColumn
+}) => {
+  const { activeCluster, updating } = useContext(StateContext);
+  const dispatch = useContext(DispatchContext);
+  const [showInks, setShowInks] = useState(false);
+  const onClick = () => setShowInks(!showInks);
+  const assign = useCallback(() => {
+    dispatch({ type: UPDATING });
+    setTimeout(() => {
+      assignCluster(activeCluster.id, macroCluster.id).then((microCluster) => {
+        dispatch({
+          type: ASSIGN_TO_MACRO_CLUSTER,
+          payload: microCluster
+        });
+        afterAssign(microCluster);
+      });
+    }, 10);
+  }, [activeCluster.id, afterAssign, dispatch, macroCluster.id, assignCluster]);
+  useEffect(() => {
+    if (!selected) return;
+
+    return keyDownListener(({ keyCode }) => {
+      if (keyCode == 65) assign();
+    });
+  }, [macroCluster.id, activeCluster.id, selected, assign]);
+  return (
+    <>
+      <tr className={selected ? "selected" : ""}>
+        <td className="distance" onClick={onClick}>
+          <ScrollIntoViewIfNeeded active={selected}>
+            {macroCluster.distance}
+          </ScrollIntoViewIfNeeded>
+        </td>
+        {fields.map((field) => (
+          <td key={field} onClick={onClick}>
+            {macroCluster[field]}
+          </td>
+        ))}
+        <td onClick={onClick}></td>
+        <td onClick={onClick}>{extraColumn(macroCluster)}</td>
+        <td>
+          <SearchLink e={macroCluster} fields={fields} />
+        </td>
+        <td>
+          <button
+            className="btn btn-secondary"
+            type="submit"
+            disabled={updating}
+            onClick={assign}
+          >
+            Assign
+          </button>
+        </td>
+      </tr>
+      {(showInks || selected) && (
+        <tr>
+          <td colSpan="7">
+            <table className="table macro-cluster-collected-inks">
+              <tbody>
+                <EntriesList
+                  entries={macroCluster.micro_clusters
+                    .map((c) => c.entries)
+                    .flat()}
+                  fields={fields}
+                  extraColumn={extraColumn}
+                />
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
diff --git a/app/javascript/src/admin/micro-clusters/DisplayMacroClusters.jsx b/app/javascript/src/admin/micro-clusters/DisplayMacroClusters.jsx
index 61b1b42c3..7ff82964f 100644
--- a/app/javascript/src/admin/micro-clusters/DisplayMacroClusters.jsx
+++ b/app/javascript/src/admin/micro-clusters/DisplayMacroClusters.jsx
@@ -1,23 +1,18 @@
-import React, { useState, useContext, useEffect } from "react";
-import _ from "lodash";
 import levenshtein from "fast-levenshtein";
-import ScrollIntoViewIfNeeded from "react-scroll-into-view-if-needed";
+import _ from "lodash";
 import { matchSorter } from "match-sorter";
+import React, { useContext, useEffect, useState } from "react";
 
-import { SearchLink } from "../components/clustering/SearchLink";
-import { StateContext, DispatchContext } from "./GenericApp";
+import { MacroClusterRow } from "../components/clustering/MacroClusterRow";
 import {
-  ASSIGN_TO_MACRO_CLUSTER,
   NEXT_MACRO_CLUSTER,
-  PREVIOUS_MACRO_CLUSTER,
-  UPDATING
+  PREVIOUS_MACRO_CLUSTER
 } from "../components/clustering/actions";
 import {
   keyDownListener,
   setInBrandSelector
 } from "../components/clustering/keyDownListener";
-import { useCallback } from "react";
-import { EntriesList } from "../components/clustering/EntriesList";
+import { DispatchContext, StateContext } from "./GenericApp";
 
 export const DisplayMacroClusters = ({ afterAssign, assignCluster }) => {
   const dispatch = useContext(DispatchContext);
@@ -76,6 +71,8 @@ const MacroClusterRows = ({ afterAssign, assignCluster }) => {
         afterAssign={afterAssign}
         assignCluster={assignCluster}
         selected={index == selectedMacroClusterIndex}
+        fields={["brand_name", "line_name", "ink_name"]}
+        extraColumn={extraColumn}
       />
     ));
   const inputRow = (
@@ -167,95 +164,7 @@ const stripped = (str) => {
     .replace(/\s+/i, "");
 };
 
-const MacroClusterRow = ({
-  macroCluster,
-  afterAssign,
-  selected,
-  assignCluster
-}) => {
-  const { activeCluster, updating } = useContext(StateContext);
-  const dispatch = useContext(DispatchContext);
-  const [showInks, setShowInks] = useState(false);
-  const onClick = () => setShowInks(!showInks);
-  const assign = useCallback(() => {
-    dispatch({ type: UPDATING });
-    setTimeout(() => {
-      assignCluster(activeCluster.id, macroCluster.id).then((microCluster) => {
-        dispatch({
-          type: ASSIGN_TO_MACRO_CLUSTER,
-          payload: microCluster
-        });
-        afterAssign(microCluster);
-      });
-    }, 10);
-  }, [activeCluster.id, afterAssign, dispatch, macroCluster.id, assignCluster]);
-  useEffect(() => {
-    if (!selected) return;
-
-    return keyDownListener(({ keyCode }) => {
-      if (keyCode == 65) assign();
-    });
-  }, [macroCluster.id, activeCluster.id, selected, assign]);
-  return (
-    <>
-      <tr className={selected ? "selected" : ""}>
-        <td className="distance" onClick={onClick}>
-          <ScrollIntoViewIfNeeded active={selected}>
-            {macroCluster.distance}
-          </ScrollIntoViewIfNeeded>
-        </td>
-        <td onClick={onClick}>{macroCluster.brand_name}</td>
-        <td onClick={onClick}>{macroCluster.line_name}</td>
-        <td onClick={onClick}>{macroCluster.ink_name}</td>
-        <td onClick={onClick}></td>
-        <td onClick={onClick}>
-          <div
-            style={{
-              backgroundColor: macroCluster.color,
-              height: "45px",
-              width: "45px"
-            }}
-          />
-        </td>
-        <td>
-          <SearchLink
-            e={macroCluster}
-            fields={["brand_name", "line_name", "ink_name"]}
-          />
-        </td>
-        <td>
-          <button
-            className="btn btn-secondary"
-            type="submit"
-            disabled={updating}
-            onClick={assign}
-          >
-            Assign
-          </button>
-        </td>
-      </tr>
-      {(showInks || selected) && (
-        <tr>
-          <td colSpan="7">
-            <table className="table macro-cluster-collected-inks">
-              <tbody>
-                <EntriesList
-                  entries={macroCluster.micro_clusters
-                    .map((c) => c.entries)
-                    .flat()}
-                  fields={["brand_name", "line_name", "ink_name"]}
-                  extraColumn={extraColumn}
-                />
-              </tbody>
-            </table>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-const extraColumn = (ci) => (
+export const extraColumn = (ci) => (
   <div
     style={{
       backgroundColor: ci.color,