Added GroupProvider

components/home/Home.tsx

@@ -8,60 +8,25 @@ import {useDetails} from "../../src/hooks/useDetails";
 import {Entity, Group} from "../../src/types";
 import pako from 'pako';
 import {EntitySpan} from "./EntitySpan/EntitySpan";
+import {useGroups} from "../contexts/GroupProvider";
 
 export const HomeComponent: FC = () => {
   const details = useDetails()
+  const {
+    groups,
+    addGroup,
+    doNotSuggest,
+    baseFactories,
+    setBaseFactories,
+    ignoredFactories,
+    setIgnoredFactories
+  } = useGroups()
   const [newGroupValue, setNewGroupValue] = useState("New group")
-  const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
-  const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
-
-  const [groups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
-  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])
-  }, [basicValues, groups, excludedSuggestions])
-
-  const basicSet = useMemo<Set<string>>(() => {
-    return new Set(basicValues)
-  }, [basicValues])
-
-  const exportedSet = useMemo<Set<string>>(() => {
-    return new Set(groups
-      .filter(group => group.isExported)
-      .flatMap(group => group.factories)
-    )
-  }, [groups])
 
   const missingFactories = useMemo<Entity[]>(() => {
     return details.filter(detail => !doNotSuggest.has(detail.href) && detail.recipe)
   }, [details, doNotSuggest])
 
-  useEffect(() => setClientGroups(groups), [groups])
-  const removeGroup = (idx: number) => setGroups(groups => {
-    groups.splice(idx, 1)
-    return groups
-  })
-  const appendGroup = useCallback((name: string, factories: string[] = []) => setGroups(groups => {
-    groups.push({name, factories, intermediates: [], inputs: []})
-    groups.sort(sortByProperty(group => group.name))
-    return groups
-  }), [setGroups])
-  const setFactories = useCallback((idx: number, uids: string[], key: 'intermediates'|'factories'|'inputs') => setGroups(groups => {
-    groups[idx][key] = uids
-    return groups
-  }), [setGroups])
-  const renameGroup = useCallback((idx: number, name: string) => setGroups(groups => {
-    groups[idx].name = name
-    groups.sort(sortByProperty(group => group.name))
-    return groups
-  }), [setGroups])
-  const toggleExported = useCallback((idx: number) => setGroups(groups => {
-    groups[idx].isExported = !groups[idx].isExported
-    groups.sort(sortByProperty(group => group.name))
-    return groups
-  }), [setGroups])
-
   const store = () => {
     const string = JSON.stringify(groups)
     const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
@@ -78,22 +43,22 @@ export const HomeComponent: FC = () => {
       <fieldset>
         <legend>Basic Values</legend>
         <FactorySelect
-          factories={basicValues}
-          onSetFactories={setBasicValues}
+          factories={baseFactories}
+          onSetFactories={setBaseFactories}
         />
       </fieldset>
       <fieldset>
         <legend>Ignored Values</legend>
         <FactorySelect
-          factories={excludedSuggestions}
-          onSetFactories={setExcludedSuggestions}
+          factories={ignoredFactories}
+          onSetFactories={setIgnoredFactories}
         />
       </fieldset>
       <fieldset>
         <legend>Add new groups</legend>
         <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
         <button disabled={!newGroupValue} onClick={() => {
-          appendGroup(newGroupValue)
+          addGroup(newGroupValue)
           setNewGroupValue("New group")
         }}>
           Add group &quot;{newGroupValue}&quot;
@@ -107,12 +72,12 @@ export const HomeComponent: FC = () => {
               key={missing.href}
               value={missing}
               onClick={() => {
-                appendGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
+                addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
                 setNewGroupValue("New group")
               }}
               onContextMenu={event => {
                 event.preventDefault()
-                setExcludedSuggestions([...excludedSuggestions, missing.href])
+                setIgnoredFactories([...ignoredFactories, missing.href])
               }}
               leftClickText={"Create a new factory with this item and name"}
               rightClickText={"Exclude this recipe from suggestions"}
@@ -122,18 +87,7 @@ export const HomeComponent: FC = () => {
       </fieldset>
       <div className={styles.grid}>
         {
-          clientGroups.map((group, idx) => <GroupBox
-            key={idx}
-            group={group}
-            onRemove={() => removeGroup(idx)}
-            onRename={(name: string) => renameGroup(idx, name)}
-            onSetOutputFactories={uids => setFactories(idx, uids, 'factories')}
-            onSetIntermediateFactories={uids => setFactories(idx, uids, 'intermediates')}
-            onSetInputFactories={uids => setFactories(idx, uids, 'inputs')}
-            onToggleExported={() => toggleExported(idx)}
-            sets={{doNotSuggest, basic: basicSet, exported: exportedSet}}
-            onDoIgnore={uid => setExcludedSuggestions([...excludedSuggestions, uid])}
-          />)
+          groups.map((group, idx) => <GroupBox key={idx} index={idx} />)
         }
       </div>
     </main>