Renaming

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])
@@ -111,13 +103,18 @@ export const HomeComponent: FC = () => {
         <legend>Missing factories</legend>
         <div className={styles.missingFactories}>
           { missingFactories.map(missing => (
-              <EntitySpan
-                key={missing.href}
+            <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')}