Improvements in performance / Better structure

components/home/Home.tsx

@@ -3,7 +3,7 @@ import {GroupBox} from "./Group/Group";
 import {FactorySelect} from "./FactorySelect/FactorySelect";
 import styles from "./Home.module.css"
 import {useFactories} from "../../src/hooks/useFactories";
-import {Entity} from "../../src/types";
+import {EnrichedEntity, Entity} from "../../src/types";
 import pako from 'pako';
 import {EntitySpan} from "./EntitySpan/EntitySpan";
 import {useGroups} from "../contexts/GroupProvider";
@@ -16,15 +16,20 @@ export const HomeComponent: FC = () => {
     groups,
     addGroup,
     doNotSuggest,
-    baseFactories,
-    setBaseFactories,
     ignoredFactories,
     setIgnoredFactories
   } = useGroups()
   const [newGroupValue, setNewGroupValue] = useState("New group")
 
-  const missingFactories = useMemo<Entity[]>(() => {
-    return factories.filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
+  const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
+    return factories
+      .filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
+      .reduce((acc, factory) =>
+          (factory.usedBy?.length ?? 0) >= 3
+            ? [[...acc[0], factory], acc[1]]
+            : [acc[0], [...acc[1], factory]],
+        [[], []] as [EnrichedEntity[], EnrichedEntity[]]
+      )
   }, [factories, doNotSuggest])
 
   const store = () => {
@@ -42,9 +47,9 @@ export const HomeComponent: FC = () => {
       <button onClick={store}>Store</button>
       <Preferences />
       <fieldset>
-        <legend>Missing factories</legend>
+        <legend>Missing export factories</legend>
         <div className={styles.missingFactories}>
-          { missingFactories.map(missing => (
+          { missingExport.map(missing => (
             <EntitySpan
               key={missing.href}
               value={missing}
@@ -56,7 +61,28 @@ export const HomeComponent: FC = () => {
                 event.preventDefault()
                 setIgnoredFactories([...ignoredFactories, missing.href])
               }}
-              leftClickText={"Create a new factory with this item and name"}
+              leftClickText={"Create a new group with this name and item as exported factory"}
+              rightClickText={"Exclude this recipe from suggestions"}
+            />
+          ))}
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Missing mall factories</legend>
+        <div className={styles.missingFactories}>
+          { missingMall.map(missing => (
+            <EntitySpan
+              key={missing.href}
+              value={missing}
+              onClick={() => {
+                addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [], [missing.href])
+                setNewGroupValue("New group")
+              }}
+              onContextMenu={event => {
+                event.preventDefault()
+                setIgnoredFactories([...ignoredFactories, missing.href])
+              }}
+              leftClickText={"Create a new group with this name and item as mall factory"}
               rightClickText={"Exclude this recipe from suggestions"}
             />
           ))}