Improvements in performance

components/home/Group/Group.tsx

@@ -1,19 +1,19 @@
-import {FC, useMemo} from "react";
+import {FC, memo, useCallback, useEffect, useMemo} from "react";
 import {FactorySelect} from "../FactorySelect/FactorySelect";
-import {useDetails} from "../../../src/hooks/useDetails";
+import {useFactories} from "../../../src/hooks/useFactories";
 import {Entity, Group} from "../../../src/types";
 import styles from "./Group.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
 import {useGroups} from "../../contexts/GroupProvider";
 
 interface Props {
-  index: number
+  group: Group
 }
 
-export const GroupBox: FC<Props> = ({ index }) => {
-  const details = useDetails()
+const GroupBoxBase: FC<Props> = ({ group }) => {
+  const {factories} = useFactories()
+  console.log("group")
   const {
-    getGroup,
     doNotSuggest,
     setFactories,
     ignoredFactories,
@@ -28,100 +28,104 @@ export const GroupBox: FC<Props> = ({ index }) => {
     intermediates,
     exports,
     malls
-  } = getGroup(index)
+  } = group
 
   const calculatedInputs = useMemo<string[]>(() => {
     const allProducingFactories = [...intermediates, ...exports, ...malls]
-    const newData: string[] = details
-      .filter(detail => allProducingFactories.includes(detail.href))
-      .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
+    const newData: string[] = factories
+      .filter(factory => allProducingFactories.includes(factory.href))
+      .flatMap(factory => Object.keys(factory.recipe?.prerequisites ?? {}))
     const uniqueInputs = Array.from(new Set(newData))
     return uniqueInputs
       .filter(input => !allProducingFactories.includes(input))
-  }, [details, intermediates, exports, malls])
+      .sort((a, b) => a.localeCompare(b))
+  }, [factories, intermediates, exports, malls])
 
   const suggestions = useMemo<Entity[]>(() => {
     const selectedValues = Array.from(new Set([...inputs, ...intermediates, ...exports, ...malls]))
     const availableIngredients = Array.from(new Set([...selectedValues, ...calculatedInputs]))
-    return details
-      .filter(detail => {
-        if (!detail.recipe) return false
-        if (selectedValues.includes(detail.href)) return false
-        if (doNotSuggest.has(detail.href)) return false
-        const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
+    return factories
+      .filter(factory => {
+        if (!factory.recipe) return false
+        if (selectedValues.includes(factory.href)) return false
+        if (doNotSuggest.has(factory.href)) return false
+        const prerequisites = Object.keys(factory.recipe?.prerequisites ?? {})
         return prerequisites.every(pre => availableIngredients.includes(pre))
       })
-  }, [doNotSuggest, details, calculatedInputs, inputs, intermediates, exports, malls])
+  }, [doNotSuggest, factories, calculatedInputs, inputs, intermediates, exports, malls])
 
   const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
-    setFactories(index, [...intermediates, uid], 'intermediates')
+    setFactories(name, [...group[type], uid], type)
   }
 
-  return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
-    <div>
-      <h3
-        contentEditable={true}
-        suppressContentEditableWarning={true}
-        onBlur={event => {
-          event.currentTarget.innerText = event.currentTarget.innerText.trim()
-          renameGroup(index, event.currentTarget.innerText);
-        }}
-      >
-        {name}
-      </h3>
-      <button onClick={() => removeGroup(index)} style={{display: 'block'}}>X</button>
-      <label>Additional Inputs</label>
-      <FactorySelect
-        factories={inputs}
-        onSetFactories={factories => setFactories(index, factories, 'inputs')}
-      />
-      <label>Intermediate Factories</label>
-      <FactorySelect
-        factories={intermediates}
-        onSetFactories={factories => setFactories(index, factories, 'intermediates')}
-      />
-      <label>Exported Factories</label>
-      <FactorySelect
-        factories={exports}
-        onSetFactories={factories => setFactories(index, factories, 'exports')}
-      />
-      <label>Mall Factories</label>
-      <FactorySelect
-        factories={malls}
-        onSetFactories={factories => setFactories(index, factories, 'malls')}
-      />
-      <div className={styles.grid}>
-        <div>
-          <h4>Inputs</h4>
-          <ul>
-            {
-              calculatedInputs.map(input => <li key={input}><EntitySpan
-                value={input}
-                onClick={() => addFactory(input, 'intermediates')}
-                style={{color: {base: 'darkgreen', produced: 'orange', unknown: undefined}[getInputType(input)]}}
-                leftClickText={"Add to intermediate factories"}
-              /></li>)
-            }
-          </ul>
-        </div>
-        <div>
-          <h4>Suggestions</h4>
-          <ul>
-            {suggestions.map(suggestion => <li key={suggestion.href}>
-              <EntitySpan
-                value={suggestion}
-                onClick={() => addFactory(suggestion.href, 'exports')}
-                onContextMenu={event => {
-                  event.preventDefault()
-                  setIgnoredFactories([...ignoredFactories, suggestion.href])
-                }}
-                leftClickText={"Add to exported factories"}
-                rightClickText={"Exclude this recipe from suggestions"}
-              />
-            </li>)}
-          </ul>
-        </div>
-      </div>
+  const setInputFactories = useCallback((factories: string[]) => setFactories(name, factories, 'inputs'), [setFactories, name])
+  const setIntermediateFactories = useCallback((factories: string[]) => setFactories(name, factories, 'intermediates'), [setFactories, name])
+  const setExportFactories = useCallback((factories: string[]) => setFactories(name, factories, 'exports'), [setFactories, name])
+  const setMallFactories = useCallback((factories: string[]) => setFactories(name, factories, 'malls'), [setFactories, name])
+
+  return <div className={styles.root}>
+    <h3
+      contentEditable={true}
+      suppressContentEditableWarning={true}
+      onBlur={event => {
+        event.currentTarget.innerText = event.currentTarget.innerText.trim()
+        renameGroup(name, event.currentTarget.innerText);
+      }}
+    >
+      {name}
+    </h3>
+    <button className={styles.quit} onClick={() => removeGroup(name)} style={{display: 'block'}}>X</button>
+    <label>Additional Inputs</label>
+    <FactorySelect
+      id={name+"-inputs"}
+      factories={inputs}
+      onSetFactories={setInputFactories}
+    />
+    <label>Intermediate Factories</label>
+    <FactorySelect
+      id={name+"-intermediates"}
+      factories={intermediates}
+      onSetFactories={setIntermediateFactories}
+    />
+    <label>Exported Factories</label>
+    <FactorySelect
+      id={name+"-exports"}
+      factories={exports}
+      onSetFactories={setExportFactories}
+    />
+    <label>Mall Factories</label>
+    <FactorySelect
+      id={name+"-malls"}
+      factories={malls}
+      onSetFactories={setMallFactories}
+    />
+      <h4>Inputs</h4>
+      <div className={styles.flex}>
+        { calculatedInputs.map(input => <EntitySpan
+          key={input}
+          value={input}
+          onClick={() => addFactory(input, 'intermediates')}
+          state={getInputType(input)}
+          leftClickText={"Add to intermediate factories"}
+        />) }
     </div>
+    { suggestions.length ? <>
+      <h4>Suggestions</h4>
+      <div className={styles.flex}>
+        { suggestions.map(suggestion => <EntitySpan
+          key={suggestion.href}
+          value={suggestion}
+          onClick={() => addFactory(suggestion.href, 'exports')}
+          onContextMenu={event => {
+            event.preventDefault()
+            setIgnoredFactories([...ignoredFactories, suggestion.href])
+          }}
+          leftClickText={"Add to exported factories"}
+          rightClickText={"Exclude this recipe from suggestions"}
+        />) }
+      </div>
+    </> : null }
   </div>
 }
+
+export const GroupBox = memo(GroupBoxBase)