Improvements in performance

components/home/Home.tsx

@@ -1,17 +1,17 @@
-import {FC, useCallback, useEffect, useMemo, useState} from "react";
-import {useLocalStorage} from "../../src/hooks/useLocalStorage";
+import {FC, useMemo, useState} from "react";
 import {GroupBox} from "./Group/Group";
 import {FactorySelect} from "./FactorySelect/FactorySelect";
 import styles from "./Home.module.css"
-import {sortByProperty} from "../../src/utils";
-import {useDetails} from "../../src/hooks/useDetails";
-import {Entity, Group} from "../../src/types";
+import {useFactories} from "../../src/hooks/useFactories";
+import {Entity} from "../../src/types";
 import pako from 'pako';
 import {EntitySpan} from "./EntitySpan/EntitySpan";
 import {useGroups} from "../contexts/GroupProvider";
+import {sortByProperty} from "../../src/utils";
+import {Preferences} from "./Preferences/Preferences";
 
 export const HomeComponent: FC = () => {
-  const details = useDetails()
+  const {factories} = useFactories()
   const {
     groups,
     addGroup,
@@ -24,8 +24,8 @@ export const HomeComponent: FC = () => {
   const [newGroupValue, setNewGroupValue] = useState("New group")
 
   const missingFactories = useMemo<Entity[]>(() => {
-    return details.filter(detail => !doNotSuggest.has(detail.href) && detail.recipe)
-  }, [details, doNotSuggest])
+    return factories.filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
+  }, [factories, doNotSuggest])
 
   const store = () => {
     const string = JSON.stringify(groups)
@@ -40,30 +40,7 @@ export const HomeComponent: FC = () => {
     <main>
       <h1>Factorio Microservices</h1>
       <button onClick={store}>Store</button>
-      <fieldset>
-        <legend>Basic Values</legend>
-        <FactorySelect
-          factories={baseFactories}
-          onSetFactories={setBaseFactories}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Ignored Values</legend>
-        <FactorySelect
-          factories={ignoredFactories}
-          onSetFactories={setIgnoredFactories}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Add new groups</legend>
-        <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
-        <button disabled={!newGroupValue} onClick={() => {
-          addGroup(newGroupValue)
-          setNewGroupValue("New group")
-        }}>
-          Add group &quot;{newGroupValue}&quot;
-        </button>
-      </fieldset>
+      <Preferences />
       <fieldset>
         <legend>Missing factories</legend>
         <div className={styles.missingFactories}>
@@ -87,7 +64,7 @@ export const HomeComponent: FC = () => {
       </fieldset>
       <div className={styles.grid}>
         {
-          groups.map((group, idx) => <GroupBox key={idx} index={idx} />)
+          Object.values(groups).sort(sortByProperty(g => g.name)).map((group) => <GroupBox key={group.name} group={group} />)
         }
       </div>
     </main>