Added GroupProvider

components/home/Group/Group.tsx

@@ -4,58 +4,45 @@ import {useDetails} from "../../../src/hooks/useDetails";
 import {Entity, Group} from "../../../src/types";
 import styles from "./Group.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
+import {useGroups} from "../../contexts/GroupProvider";
 
 interface Props {
-  onRemove: () => void
-  onSetOutputFactories: (uids: string[]) => void
-  onSetIntermediateFactories: (uids: string[]) => void
-  onSetInputFactories: (uids: string[]) => void
-  onToggleExported: () => void
-  onRename: (name: string) => void
-  onDoIgnore: (name: string) => void
-  group: Group
-  sets: {
-    doNotSuggest: Set<string>
-    basic: Set<string>
-    exported: Set<string>
-  }
+  index: number
 }
 
-export const GroupBox: FC<Props> = ({
-  onRemove,
-  onRename,
-  onSetOutputFactories,
-  onSetIntermediateFactories,
-  onSetInputFactories,
-  onToggleExported,
-  group: {
+export const GroupBox: FC<Props> = ({ index }) => {
+  const details = useDetails()
+  const {
+    getGroup,
+    doNotSuggest,
+    setFactories,
+    ignoredFactories,
+    setIgnoredFactories,
+    renameGroup,
+    removeGroup,
+    getInputType
+  } = useGroups()
+  const {
+    name,
     inputs,
     intermediates,
-    factories,
-    isExported,
-    name
-  },
-  sets: {
-    doNotSuggest,
-    basic,
-    exported
-  },
-  onDoIgnore
-}) => {
-  const details = useDetails()
+    exports,
+    malls
+  } = getGroup(index)
 
   const calculatedInputs = useMemo<string[]>(() => {
+    const allProducingFactories = [...intermediates, ...exports, ...malls]
     const newData: string[] = details
-      .filter(detail => intermediates.includes(detail.href) || factories.includes(detail.href))
+      .filter(detail => allProducingFactories.includes(detail.href))
       .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
     const uniqueInputs = Array.from(new Set(newData))
     return uniqueInputs
-      .filter(input => !intermediates.includes(input) && !factories.includes(input))
-  }, [details, intermediates, factories])
+      .filter(input => !allProducingFactories.includes(input))
+  }, [details, intermediates, exports, malls])
 
   const suggestions = useMemo<Entity[]>(() => {
-    const availableIngredients = Array.from(new Set([...intermediates, ...factories, ...calculatedInputs, ...inputs]))
-    const selectedValues = Array.from(new Set([...intermediates, ...factories, ...inputs]))
+    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
@@ -64,14 +51,10 @@ export const GroupBox: FC<Props> = ({
         const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
         return prerequisites.every(pre => availableIngredients.includes(pre))
       })
-  }, [inputs, doNotSuggest, details, calculatedInputs, intermediates, factories])
+  }, [doNotSuggest, details, calculatedInputs, inputs, intermediates, exports, malls])
 
-  const addIntermediateFactory = (uid: string) => {
-    onSetIntermediateFactories([...intermediates, uid])
-  }
-
-  const addOutputFactory = (uid: string) => {
-    onSetOutputFactories([...factories, uid])
+  const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
+    setFactories(index, [...intermediates, uid], 'intermediates')
   }
 
   return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
@@ -81,27 +64,31 @@ export const GroupBox: FC<Props> = ({
         suppressContentEditableWarning={true}
         onBlur={event => {
           event.currentTarget.innerText = event.currentTarget.innerText.trim()
-          onRename(event.currentTarget.innerText);
+          renameGroup(index, event.currentTarget.innerText);
         }}
       >
         {name}
       </h3>
-      <button onClick={onRemove} style={{display: 'block'}}>X</button>
-      <input type={"checkbox"} onChange={onToggleExported} checked={isExported} style={{display: 'block'}}/>
+      <button onClick={() => removeGroup(index)} style={{display: 'block'}}>X</button>
       <label>Additional Inputs</label>
       <FactorySelect
         factories={inputs}
-        onSetFactories={onSetInputFactories}
+        onSetFactories={factories => setFactories(index, factories, 'inputs')}
       />
       <label>Intermediate Factories</label>
       <FactorySelect
         factories={intermediates}
-        onSetFactories={onSetIntermediateFactories}
+        onSetFactories={factories => setFactories(index, factories, 'intermediates')}
       />
-      <label>Output Factories</label>
+      <label>Exported Factories</label>
       <FactorySelect
-        factories={factories}
-        onSetFactories={onSetOutputFactories}
+        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>
@@ -110,8 +97,8 @@ export const GroupBox: FC<Props> = ({
             {
               calculatedInputs.map(input => <li key={input}><EntitySpan
                 value={input}
-                onClick={() => addIntermediateFactory(input)}
-                style={{color: basic.has(input) ? 'darkgreen' : exported.has(input) ? 'orange' : undefined}}
+                onClick={() => addFactory(input, 'intermediates')}
+                style={{color: {base: 'darkgreen', produced: 'orange', unknown: undefined}[getInputType(input)]}}
                 leftClickText={"Add to intermediate factories"}
               /></li>)
             }
@@ -123,12 +110,12 @@ export const GroupBox: FC<Props> = ({
             {suggestions.map(suggestion => <li key={suggestion.href}>
               <EntitySpan
                 value={suggestion}
-                onClick={() => addOutputFactory(suggestion.href)}
+                onClick={() => addFactory(suggestion.href, 'exports')}
                 onContextMenu={event => {
                   event.preventDefault()
-                  onDoIgnore(suggestion.href)
+                  setIgnoredFactories([...ignoredFactories, suggestion.href])
                 }}
-                leftClickText={"Add to output factories"}
+                leftClickText={"Add to exported factories"}
                 rightClickText={"Exclude this recipe from suggestions"}
               />
             </li>)}