Renaming

components/Group.tsx

@@ -1,23 +1,19 @@
 import {FC, useMemo} from "react";
 import {FactorySelect} from "./FactorySelect";
 import {useDetails} from "../src/hooks/useDetails";
-import {Entity} from "../src/types";
+import {Entity, Group} from "../src/types";
 import styles from "./Group.module.css"
 import {EntitySpan} from "./EntitySpan";
 
 interface Props {
   onRemove: () => void
   onSetOutputFactories: (uids: string[]) => void
-  outputFactories: string[]
   onSetIntermediateFactories: (uids: string[]) => void
-  intermediateFactories: string[]
   onSetInputFactories: (uids: string[]) => void
-  inputFactories: string[]
   onToggleExported: () => void
-  isExported: boolean
   onRename: (name: string) => void
   onDoIgnore: (name: string) => void
-  name: string
+  group: Group
   sets: {
     doNotSuggest: Set<string>
     basic: Set<string>
@@ -25,18 +21,20 @@ interface Props {
   }
 }
 
-export const Group: FC<Props> = ({
+export const GroupBox: FC<Props> = ({
   onRemove,
   onRename,
   onSetOutputFactories,
-  outputFactories,
   onSetIntermediateFactories,
-  intermediateFactories,
   onSetInputFactories,
-  inputFactories,
   onToggleExported,
-  isExported,
-  name,
+  group: {
+    inputs,
+    intermediates,
+    factories,
+    isExported,
+    name
+  },
   sets: {
     doNotSuggest,
     basic,
@@ -46,18 +44,18 @@ export const Group: FC<Props> = ({
 }) => {
   const details = useDetails()
 
-  const inputs = useMemo<string[]>(() => {
+  const calculatedInputs = useMemo<string[]>(() => {
     const newData: string[] = details
-      .filter(detail => intermediateFactories.includes(detail.href) || outputFactories.includes(detail.href))
+      .filter(detail => intermediates.includes(detail.href) || factories.includes(detail.href))
       .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
     const uniqueInputs = Array.from(new Set(newData))
     return uniqueInputs
-      .filter(input => !intermediateFactories.includes(input) && !outputFactories.includes(input))
-  }, [details, intermediateFactories, outputFactories])
+      .filter(input => !intermediates.includes(input) && !factories.includes(input))
+  }, [details, intermediates, factories])
 
   const suggestions = useMemo<Entity[]>(() => {
-    const availableIngredients = Array.from(new Set([...intermediateFactories, ...outputFactories, ...inputs, ...inputFactories]))
-    const selectedValues = Array.from(new Set([...intermediateFactories, ...outputFactories, ...inputFactories]))
+    const availableIngredients = Array.from(new Set([...intermediates, ...factories, ...calculatedInputs, ...inputs]))
+    const selectedValues = Array.from(new Set([...intermediates, ...factories, ...inputs]))
     return details
       .filter(detail => {
         if (!detail.recipe) return false
@@ -66,14 +64,14 @@ export const Group: FC<Props> = ({
         const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
         return prerequisites.every(pre => availableIngredients.includes(pre))
       })
-  }, [inputFactories, doNotSuggest, details, inputs, intermediateFactories, outputFactories])
+  }, [inputs, doNotSuggest, details, calculatedInputs, intermediates, factories])
 
   const addIntermediateFactory = (uid: string) => {
-    onSetIntermediateFactories([...intermediateFactories, uid])
+    onSetIntermediateFactories([...intermediates, uid])
   }
 
   const addOutputFactory = (uid: string) => {
-    onSetOutputFactories([...outputFactories, uid])
+    onSetOutputFactories([...factories, uid])
   }
 
   return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
@@ -92,17 +90,17 @@ export const Group: FC<Props> = ({
       <input type={"checkbox"} onChange={onToggleExported} checked={isExported} style={{display: 'block'}}/>
       <label>Additional Inputs</label>
       <FactorySelect
-        factories={inputFactories}
+        factories={inputs}
         onSetFactories={onSetInputFactories}
       />
       <label>Intermediate Factories</label>
       <FactorySelect
-        factories={intermediateFactories}
+        factories={intermediates}
         onSetFactories={onSetIntermediateFactories}
       />
       <label>Output Factories</label>
       <FactorySelect
-        factories={outputFactories}
+        factories={factories}
         onSetFactories={onSetOutputFactories}
       />
       <div className={styles.grid}>
@@ -110,7 +108,7 @@ export const Group: FC<Props> = ({
           <h4>Inputs</h4>
           <ul>
             {
-              inputs.map(input => <li key={input}><EntitySpan
+              calculatedInputs.map(input => <li key={input}><EntitySpan
                 value={input}
                 onClick={() => addIntermediateFactory(input)}
                 style={{color: basic.has(input) ? 'darkgreen' : exported.has(input) ? 'orange' : undefined}}