More features

components/Group.tsx

@@ -12,10 +12,16 @@ interface Props {
   intermediateFactories: string[]
   onSetInputFactories: (uids: string[]) => void
   inputFactories: string[]
+  onToggleExported: () => void
+  isExported: boolean
   onRename: (name: string) => void
   onDoIgnore: (name: string) => void
   name: string
-  doNotSuggest: string[]
+  sets: {
+    doNotSuggest: Set<string>
+    basic: Set<string>
+    exported: Set<string>
+  }
 }
 
 export const Group: FC<Props> = ({
@@ -27,8 +33,14 @@ export const Group: FC<Props> = ({
   intermediateFactories,
   onSetInputFactories,
   inputFactories,
+  onToggleExported,
+  isExported,
   name,
-  doNotSuggest,
+  sets: {
+    doNotSuggest,
+    basic,
+    exported
+  },
   onDoIgnore
 }) => {
   const details = useDetails()
@@ -49,17 +61,9 @@ export const Group: FC<Props> = ({
       .filter(detail => {
         if (!detail.recipe) return false
         if (selectedValues.includes(detail.href)) return false
-        if (doNotSuggest.includes(detail.href)) return false
+        if (doNotSuggest.has(detail.href)) return false
         const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
-        /*if (intermediateFactories.length) {
-          const usesInter = prerequisites.some(pre => outputFactories.includes(pre) || intermediateFactories.includes(pre))
-          if (!usesInter) return false
-        } else {
-          const usesEveryInput = inputs.every(inp => prerequisites.includes(inp))
-          if (!usesEveryInput) return false
-        }*/
         return prerequisites.every(pre => availableIngredients.includes(pre))
-
       })
   }, [inputFactories, doNotSuggest, details, inputs, intermediateFactories, outputFactories])
 
@@ -73,13 +77,18 @@ export const Group: FC<Props> = ({
 
   return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
     <div>
-      <h3 contentEditable={true} onBlur={event => {
-        event.currentTarget.innerText = event.currentTarget.innerText.trim()
-        onRename(event.currentTarget.innerText);
-      }}>
+      <h3
+        contentEditable={true}
+        suppressContentEditableWarning={true}
+        onBlur={event => {
+          event.currentTarget.innerText = event.currentTarget.innerText.trim()
+          onRename(event.currentTarget.innerText);
+        }}
+      >
         {name}
       </h3>
       <button onClick={onRemove} style={{display: 'block'}}>X</button>
+      <input type={"checkbox"} onChange={onToggleExported} checked={isExported} style={{display: 'block'}}/>
       <label>Additional Inputs</label>
       <FactorySelect
         factories={inputFactories}
@@ -99,7 +108,15 @@ export const Group: FC<Props> = ({
         <div>
           <h4>Inputs</h4>
           <ul>
-            {inputs.map(input => <li key={input}><a href={'javascript:void(0)'} onClick={() => addIntermediateFactory(input)}>{input}</a></li>)}
+            {
+              inputs.map(input => <li key={input}><a
+                href={'javascript:void(0)'}
+                onClick={() => addIntermediateFactory(input)}
+                style={{color: basic.has(input) ? 'darkgreen' : exported.has(input) ? 'orange' : undefined}}
+              >
+                {input}
+              </a></li>)
+            }
           </ul>
         </div>
         <div>
@@ -113,6 +130,7 @@ export const Group: FC<Props> = ({
                   event.preventDefault()
                   onDoIgnore(suggestion.href)
                 }}
+                style={{color: basic.has(suggestion.href) ? 'darkgreen' : exported.has(suggestion.href) ? 'orange' : undefined}}
               >
                 {suggestion.name}
               </a>