Load and save

components/contexts/GroupProvider.tsx

@@ -2,6 +2,7 @@ import {createContext, FC, useCallback, useContext, useMemo} from "react";
 import {Group} from "../../src/types";
 import {useLocalStorage} from "../../src/hooks/useLocalStorage";
 import {ReactNodeLike} from "prop-types";
+import pako from "pako";
 
 interface Props {
   children: ReactNodeLike
@@ -23,8 +24,10 @@ interface GroupContextType {
   renameGroup(name: string, newName: string): void
 
   setFactories(name: string, factories: string[], type: 'exports'|'malls'): void
-
   getInputType(uid: string): 'base'|'produced'|'unknown'
+
+  store(): Uint8Array
+  load(str: Uint8Array): void
 }
 
 const defaultValues: GroupContextType = {
@@ -43,12 +46,21 @@ const defaultValues: GroupContextType = {
   renameGroup() {},
 
   setFactories() {},
-  getInputType() {return 'unknown'}
+  getInputType() {return 'unknown'},
+
+  store() {return new Uint8Array(0)},
+  load() {}
 }
 
 const GroupContext = createContext<GroupContextType>(defaultValues);
 export const useGroups = () => useContext(GroupContext)
 
+interface StoredFile {
+  groups: Record<string, Group>,
+  basicValues: string[],
+  excludedSuggestions: string[]
+}
+
 export const GroupProvider: FC<Props> = ({children}) => {
   const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
   const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
@@ -97,6 +109,25 @@ export const GroupProvider: FC<Props> = ({children}) => {
     else return 'unknown'
   }, [basicValues, exportedFactories])
 
+  const store = useCallback(() => {
+    const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
+    const value: StoredFile = {
+      groups, basicValues, excludedSuggestions
+    }
+    const uncompressed = JSON.stringify(value)
+    return pako.deflate(uncompressed)
+  }, [basicValues, excludedSuggestions, groups])
+
+  const load = useCallback((compressed: Uint8Array) => {
+    const atob = (str: string) => Buffer.from(str, 'base64')
+    const uncompressed = pako.inflate(compressed, {to: "string"})
+    const value: StoredFile = JSON.parse(uncompressed)
+    if (!value.groups || !value.basicValues || !value.excludedSuggestions) return
+    setGroups(value.groups)
+    setBasicValues(value.basicValues)
+    setExcludedSuggestions(value.excludedSuggestions)
+  }, [setBasicValues, setExcludedSuggestions, setGroups])
+
   const value: GroupContextType = useMemo(() => ({
     doNotSuggest,
     exportedFactories,
@@ -113,7 +144,10 @@ export const GroupProvider: FC<Props> = ({children}) => {
     renameGroup,
 
     setFactories,
-    getInputType
+    getInputType,
-  }), [addGroup, basicValues, doNotSuggest, excludedSuggestions, exportedFactories, getInputType, groups, removeGroup, renameGroup, setBasicValues, setExcludedSuggestions, setFactories])
+
+    store,
+    load
+  }), [addGroup, basicValues, doNotSuggest, excludedSuggestions, exportedFactories, getInputType, groups, load, removeGroup, renameGroup, setBasicValues, setExcludedSuggestions, setFactories, store])
   return <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
 }

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 {EnrichedEntity} 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";
+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>

src/download.ts

@@ -0,0 +1,29 @@
+export function download(filename: string, data: Uint8Array) {
+  const tag = document.createElement("a");
+  tag.style.display = "none";
+  document.body.appendChild(tag);
+  const blob = new Blob([data], {type: "octet/stream"}),
+    url = window.URL.createObjectURL(blob);
+  tag.href = url;
+  tag.download = filename;
+  tag.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(tag);
+}
+
+export async function streamToArrayBuffer(stream: ReadableStream<Uint8Array>): Promise<Uint8Array> {
+  let result = new Uint8Array(0);
+  const reader = stream.getReader();
+  while (true) { // eslint-disable-line no-constant-condition
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    const newResult = new Uint8Array(result.length + value.length);
+    newResult.set(result);
+    newResult.set(value, result.length);
+    result = newResult
+  }
+  return result;
+}