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,
+  group: {
+    inputs,
+    intermediates,
+    factories,
     isExported,
-  name,
+    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}}

components/Home.tsx

@@ -1,22 +1,14 @@
 import {FC, useCallback, useEffect, useMemo, useState} from "react";
 import {useLocalStorage} from "../src/hooks/useLocalStorage";
-import {Group} from "./Group";
+import {GroupBox} from "./Group";
 import {FactorySelect} from "./FactorySelect";
 import styles from "./Home.module.css"
 import {sortByProperty} from "../src/utils";
 import {useDetails} from "../src/hooks/useDetails";
-import {Entity} from "../src/types";
+import {Entity, Group} from "../src/types";
 import pako from 'pako';
 import {EntitySpan} from "./EntitySpan";
 
-interface Group {
-  name: string
-  isExported?: boolean
-  factories: string[]
-  intermediates: string[]
-  inputs: string[]
-}
-
 export const HomeComponent: FC = () => {
   const details = useDetails()
   const [newGroupValue, setNewGroupValue] = useState("New group")
@@ -24,7 +16,7 @@ export const HomeComponent: FC = () => {
   const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
 
   const [groups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
-  const [clientGroups, setClientGroups] = useState<typeof groups>([])
+  const [clientGroups, setClientGroups] = useState<Group[]>([])
 
   const doNotSuggest = useMemo<Set<string>>(() => {
     return new Set([...groups.flatMap(group => [...(group.name.includes('Mall') ? group.intermediates : []), ...group.factories]), ...excludedSuggestions, ...basicValues])
@@ -50,8 +42,8 @@ export const HomeComponent: FC = () => {
     groups.splice(idx, 1)
     return groups
   })
-  const appendGroup = useCallback((name: string) => setGroups(groups => {
-    groups.push({name, factories: [], intermediates: [], inputs: []})
+  const appendGroup = useCallback((name: string, factories: string[] = []) => setGroups(groups => {
+    groups.push({name, factories, intermediates: [], inputs: []})
     groups.sort(sortByProperty(group => group.name))
     return groups
   }), [setGroups])
@@ -114,10 +106,15 @@ export const HomeComponent: FC = () => {
             <EntitySpan
               key={missing.href}
               value={missing}
+              onClick={() => {
+                appendGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
+                setNewGroupValue("New group")
+              }}
               onContextMenu={event => {
                 event.preventDefault()
                 setExcludedSuggestions([...excludedSuggestions, missing.href])
               }}
+              leftClickText={"Create a new factory with this item and name"}
               rightClickText={"Exclude this recipe from suggestions"}
             />
           ))}
@@ -125,13 +122,9 @@ export const HomeComponent: FC = () => {
       </fieldset>
       <div className={styles.grid}>
         {
-          clientGroups.map((group, idx) => <Group
+          clientGroups.map((group, idx) => <GroupBox
             key={idx}
-            outputFactories={group.factories}
-            intermediateFactories={group.intermediates}
-            inputFactories={group.inputs}
-            name={group.name}
-            isExported={group.isExported ?? false}
+            group={group}
             onRemove={() => removeGroup(idx)}
             onRename={(name: string) => renameGroup(idx, name)}
             onSetOutputFactories={uids => setFactories(idx, uids, 'factories')}

src/types.ts

@@ -13,3 +13,11 @@ export interface UnfetchedEntity {
 export interface Entity extends UnfetchedEntity {
   recipe?: Recipe
 }
+
+export interface Group {
+  name: string
+  isExported?: boolean
+  factories: string[]
+  intermediates: string[]
+  inputs: string[]
+}