Load and save

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>