Load and save

components/home/FactorySelect/FactorySelect.tsx

@@ -24,7 +24,6 @@ const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
       .filter(isNonNullable))
   }, [factories])
 
-  console.log("fddsdfd")
   return <Select
     id={id}
     value={state}

components/home/Group/Group.tsx

@@ -1,4 +1,4 @@
-import {FC, memo, useCallback, useEffect, useMemo} from "react";
+import {FC, memo, useCallback, useEffect, useMemo, useState} from "react";
 import {FactorySelect} from "../FactorySelect/FactorySelect";
 import {useFactories} from "../../../src/hooks/useFactories";
 import {EnrichedEntity, Entity, Group} from "../../../src/types";
@@ -12,7 +12,6 @@ interface Props {
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
   const {factories, findFactory} = useFactories()
-  console.log("group")
   const {
     doNotSuggest,
     setFactories,
@@ -30,6 +29,8 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     malls
   } = group
 
+  const [isDeleteConfirm, setDeleteConfirm] = useState(false)
+
   const [inputs, intermediates] = useMemo<[string[], string[]]>(() => {
     const allProducingFactories = [...exports, ...malls]
     const prducingSet = new Set(allProducingFactories)
@@ -75,9 +76,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       )
   }, [exports, malls, intermediates, inputs, factories, doNotSuggest])
 
-  const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
+  const addFactory = useCallback((uid: string, type: Parameters<typeof setFactories>[2]) => {
     setFactories(name, [...group[type], uid], type)
-  }
+  }, [group, name, setFactories])
 
   const setExportFactories = useCallback((factories: string[]) => setFactories(name, factories, 'exports'), [setFactories, name])
   const setMallFactories = useCallback((factories: string[]) => setFactories(name, factories, 'malls'), [setFactories, name])
@@ -93,7 +94,13 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     >
       {name}
     </h3>
-    <button className={styles.quit} onClick={() => removeGroup(name)} style={{display: 'block'}}>X</button>
+    <button
+      className={styles.quit}
+      onBlur={() => setDeleteConfirm(false)}
+      onClick={() => !isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name)} style={{display: 'block'}}
+    >
+      {isDeleteConfirm ? 'Delete Group?' : 'X'}
+    </button>
     <h4>Exported Factories</h4>
     <FactorySelect
       id={name+"-exports"}

components/home/Home.tsx

@@ -1,14 +1,13 @@
-import {FC, useMemo, useState} from "react";
+import {FC, useMemo, useRef, useState} from "react";
 import {GroupBox} from "./Group/Group";
-import {FactorySelect} from "./FactorySelect/FactorySelect";
 import styles from "./Home.module.css"
 import {useFactories} from "../../src/hooks/useFactories";
-import {EnrichedEntity, Entity} from "../../src/types";
-import pako from 'pako';
+import {EnrichedEntity} from "../../src/types";
 import {EntitySpan} from "./EntitySpan/EntitySpan";
 import {useGroups} from "../contexts/GroupProvider";
-import {sortByProperty} from "../../src/utils";
 import {Preferences} from "./Preferences/Preferences";
+import {download, streamToArrayBuffer} from "../../src/download";
+import Link from "next/link";
 
 export const HomeComponent: FC = () => {
   const {factories} = useFactories()
@@ -17,9 +16,12 @@ export const HomeComponent: FC = () => {
     addGroup,
     doNotSuggest,
     ignoredFactories,
-    setIgnoredFactories
+    setIgnoredFactories,
+    store,
+    load
   } = useGroups()
   const [newGroupValue, setNewGroupValue] = useState("New group")
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
     return factories
@@ -32,19 +34,20 @@ export const HomeComponent: FC = () => {
       )
   }, [factories, doNotSuggest])
 
-  const store = () => {
-    const string = JSON.stringify(groups)
-    const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
-    const atob = (str: string) => Buffer.from(str, 'base64')
-    const compressed = btoa(pako.deflate(string))
-    console.log(string.length, compressed.length)
-    const uncompressed = pako.inflate(atob(compressed), {to: "string"})
-  }
-
   return (
     <main>
       <h1>Factorio Microservices</h1>
-      <button onClick={store}>Store</button>
+      <button onClick={() => {
+        download('factorio-microservices.bin', store());
+      }}>Store</button>
+      <input type={"file"} multiple={false} ref={inputRef} onChange={async evt => {
+        const stream = evt.currentTarget.files?.[0].stream() as globalThis.ReadableStream<Uint8Array>|undefined
+        if (stream) {
+          const array = await streamToArrayBuffer(stream)
+          load(array)
+          if (inputRef.current) inputRef.current.value = null as unknown as string
+        }
+      }}/>
       <Preferences />
       <fieldset>
         <legend>Missing export factories</legend>
@@ -90,7 +93,10 @@ export const HomeComponent: FC = () => {
       </fieldset>
       <div className={styles.grid}>
         {
-          Object.values(groups).sort(sortByProperty(g => g.name)).map((group) => <GroupBox key={group.name} group={group} />)
+          Object
+            .values(groups)
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((group) => <GroupBox key={group.name} group={group} />)
         }
       </div>
     </main>