Linting

2022-08-18 09:20:00 +02:00
parent 92b762bbd2
commit de95f57b18
60 changed files with 3450 additions and 994 deletions
--- a/components/home/EntityIcon/EntityIcon.module.css
+++ b/components/home/EntityIcon/EntityIcon.module.css
@@ -1,5 +1,5 @@
 .span {
-    background: #DDD;
+    background: #ddd;
    font-size: 2em;
    border: 1px solid white;
    display: inline-block;
--- a/components/home/EntityIcon/EntityIcon.tsx
+++ b/components/home/EntityIcon/EntityIcon.tsx
@@ -1,18 +1,18 @@
-import {FC, HTMLProps, useMemo} from "react"
-import {Entity} from "../../../src/types"
-import {useFactories} from "../../../src/hooks/useFactories"
+import { FC, HTMLProps, useMemo } from 'react'
+import { Entity } from '../../../src/types'
+import { useFactories } from '../../../src/hooks/useFactories'
 import styles from './EntityIcon.module.css'
-import cx from "classnames";
+import cx from 'classnames'

 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
-  value: Entity|string
+  value: Entity | string
  amount?: number
 }

-export const EntityIcon: FC<Props> = ({className, value, amount, ...rest}) => {
-  const {findFactory} = useFactories()
+export const EntityIcon: FC<Props> = ({ className, value, amount, ...rest }) => {
+  const { findFactory } = useFactories()
  const entity = useMemo<Entity>(() => {
-    return typeof value === "object"
+    return typeof value === 'object'
      ? value
      : value === '/Time'
        ? {
@@ -29,9 +29,15 @@ export const EntityIcon: FC<Props> = ({className, value, amount, ...rest}) => {
        }
  }, [findFactory, value])

-  return <span {...rest} className={cx(className, styles.span)} title={entity.name}>
-    {/* eslint-disable-next-line @next/next/no-img-element */}
-    <img className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
-    {amount !== undefined && <span className={styles.amount}>{amount}</span>}
-  </span>
+  return (
+    <span {...rest} className={cx(className, styles.span)} title={entity.name}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)}
+        src={`https://wiki.factorio.com${entity.image}`}
+        alt={entity.name}
+      />
+      {amount !== undefined && <span className={styles.amount}>{amount}</span>}
+    </span>
+  )
 }
--- a/components/home/EntitySpan/EntitySpan.tsx
+++ b/components/home/EntitySpan/EntitySpan.tsx
@@ -1,25 +1,33 @@
-import {FC, HTMLProps, memo, useMemo} from "react"
-import {EnrichedEntity, Entity} from "../../../src/types"
-import {useFactories} from "../../../src/hooks/useFactories"
+import { FC, HTMLProps, memo, useMemo } from 'react'
+import { EnrichedEntity } from '../../../src/types'
+import { useFactories } from '../../../src/hooks/useFactories'
 import styles from './EntitySpan.module.css'
-import {RecipeSpan} from "../Recipe/Recipe";
-import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
-import cx from 'classnames';
-import {EntityIcon} from "../EntityIcon/EntityIcon";
+import { RecipeSpan } from '../Recipe/Recipe'
+import { LeftClickIcon } from '../LeftClickIcon/LeftClickIcon'
+import cx from 'classnames'
+import { EntityIcon } from '../EntityIcon/EntityIcon'

 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
-  value: EnrichedEntity|string
-  state?: 'base'|'produced'|'unknown'
+  value: EnrichedEntity | string
+  state?: 'base' | 'produced' | 'unknown'
  leftClickText?: string
  rightClickText?: string
  simpleStyle?: boolean
  className?: string
 }

-const EntitySpanUnmemo: FC<Props> = ({className, value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
-  const {findFactory} = useFactories()
+const EntitySpanUnmemo: FC<Props> = ({
+  className,
+  value,
+  state,
+  leftClickText,
+  rightClickText,
+  simpleStyle,
+  ...rest
+}) => {
+  const { findFactory } = useFactories()
  const entity = useMemo<EnrichedEntity>(() => {
-    return typeof value === "object"
+    return typeof value === 'object'
      ? value
      : findFactory(value) ?? {
        usedBy: [],
@@ -30,34 +38,52 @@ const EntitySpanUnmemo: FC<Props> = ({className, value, state, leftClickText, ri
      }
  }, [findFactory, value])

-  return <span className={cx(className, simpleStyle ? styles.spanSimple : styles.span)} {...rest}>
-    {/* eslint-disable-next-line @next/next/no-img-element */}
-    <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
-    <span className={styles[state ?? 'unknown']}>{entity.name}</span>
-    <div className={styles.tooltip}>
-      {entity.recipe && (
-        <>
-          <div className={styles.strong}>Recipe</div>
-          <RecipeSpan recipe={entity.recipe}/>
-        </>
-      )}
-      {entity.usedBy?.length ? (
-        <>
-          <div className={styles.strong}>Used By</div>
-          <div className={styles.usedBy}>
-            {entity.usedBy.map(used => <EntityIcon value={used} key={used.name}/>)}
-          </div>
-        </>
-      ) : null}
-      {(leftClickText || rightClickText) && (
-        <>
-          <div className={styles.strong}>Actions</div>
-          {leftClickText && <div><LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn}/> {leftClickText}</div>}
-          {rightClickText && <div><LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn}/> {rightClickText}</div>}
-        </>
-      )}
-    </div>
-  </span>
+  return (
+    <span className={cx(className, simpleStyle ? styles.spanSimple : styles.span)} {...rest}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        className={styles.img}
+        src={`https://wiki.factorio.com${entity.image}`}
+        alt={entity.name}
+      />
+      <span className={styles[state ?? 'unknown']}>{entity.name}</span>
+      <div className={styles.tooltip}>
+        {entity.recipe && (
+          <>
+            <div className={styles.strong}>Recipe</div>
+            <RecipeSpan recipe={entity.recipe} />
+          </>
+        )}
+        {entity.usedBy?.length ? (
+          <>
+            <div className={styles.strong}>Used By</div>
+            <div className={styles.usedBy}>
+              {entity.usedBy.map(used => (
+                <EntityIcon value={used} key={used.name} />
+              ))}
+            </div>
+          </>
+        ) : null}
+        {(leftClickText || rightClickText) && (
+          <>
+            <div className={styles.strong}>Actions</div>
+            {leftClickText && (
+              <div>
+                <LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn} />{' '}
+                {leftClickText}
+              </div>
+            )}
+            {rightClickText && (
+              <div>
+                <LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn} />{' '}
+                {rightClickText}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </span>
+  )
 }

 export const EntitySpan = memo(EntitySpanUnmemo)
--- a/components/home/FactorySelect/FactorySelect.module.css
+++ b/components/home/FactorySelect/FactorySelect.module.css
@@ -4,8 +4,7 @@
    }

    .select :global(.factory-select__multi-value),
-    .select :global(.factory-select__menu)
-    {
+    .select :global(.factory-select__menu) {
        background-color: #444;
    }

@@ -18,6 +17,6 @@
    }

    .select :global(.factory-select__multi-value__label) {
-        color: #DDDDDD;
+        color: #dddddd;
    }
 }
--- a/components/home/FactorySelect/FactorySelect.tsx
+++ b/components/home/FactorySelect/FactorySelect.tsx
@@ -1,9 +1,9 @@
-import {FC, memo, useEffect, useMemo, useState} from "react";
-import Select from "react-select";
-import {isNonNullable} from "../../../src/utils";
-import details from "../../../res/details.json";
-import styles from "./FactorySelect.module.css";
-import {EntitySpan} from "../EntitySpan/EntitySpan";
+import { FC, memo, useMemo } from 'react'
+import Select from 'react-select'
+import { isNonNullable } from '../../../src/utils'
+import details from '../../../res/details.json'
+import styles from './FactorySelect.module.css'
+import { EntitySpan } from '../EntitySpan/EntitySpan'

 interface Props {
  id: string
@@ -16,33 +16,37 @@ const options = details.map(detail => ({
  value: detail.href
 }))

-const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
+const FactorySelectBase: FC<Props> = ({ id, factories, onSetFactories }) => {
  const state = useMemo<typeof options>(() => {
    return factories
      .map(factory => options.find(option => option.value === factory))
      .filter(isNonNullable)
  }, [factories])

-  return <Select
-    id={id}
-    instanceId={id}
-    value={state}
-    components={{
-      MultiValueLabel: ({data, innerProps}) => (
-        <EntitySpan {...innerProps} value={data.value} simpleStyle={true}/>
-      ),
-      Option: ({innerProps, data}) => (
-        <div {...innerProps} className={styles.option}><EntitySpan value={data.value} simpleStyle={true}/></div>
-      )
-    }}
-    isMulti
-    options={options as never}
-    onChange={e => {
-      onSetFactories(e.map(s => s?.value))
-    }}
-    className={styles.select}
-    classNamePrefix={"factory-select"}
-  />
+  return (
+    <Select
+      id={id}
+      instanceId={id}
+      value={state}
+      components={{
+        MultiValueLabel: ({ data, innerProps }) => (
+          <EntitySpan {...innerProps} value={data.value} simpleStyle={true} />
+        ),
+        Option: ({ innerProps, data }) => (
+          <div {...innerProps} className={styles.option}>
+            <EntitySpan value={data.value} simpleStyle={true} />
+          </div>
+        )
+      }}
+      isMulti
+      options={options as never}
+      onChange={e => {
+        onSetFactories(e.map(s => s?.value))
+      }}
+      className={styles.select}
+      classNamePrefix={'factory-select'}
+    />
+  )
 }

 export const FactorySelect = memo(FactorySelectBase)
--- a/components/home/GroupBox/GroupBox.tsx
+++ b/components/home/GroupBox/GroupBox.tsx
@@ -1,14 +1,14 @@
-import {FC, memo, useCallback, useMemo, useState} from "react";
-import {FactorySelect} from "../FactorySelect/FactorySelect";
-import {useFactories} from "../../../src/hooks/useFactories";
-import {EnrichedEntity, Group} from "../../../src/types";
-import styles from "./GroupBox.module.css"
-import {EntitySpan} from "../EntitySpan/EntitySpan";
-import {useGroups} from "../../contexts/GroupProvider";
-import {calculateInputs} from "../../../src/calculateInputs";
-import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
-import Link from "next/link";
-import {useRouter} from "next/router";
+import { FC, memo, useCallback, useMemo, useState } from 'react'
+import { FactorySelect } from '../FactorySelect/FactorySelect'
+import { useFactories } from '../../../src/hooks/useFactories'
+import { EnrichedEntity, Group } from '../../../src/types'
+import styles from './GroupBox.module.css'
+import { EntitySpan } from '../EntitySpan/EntitySpan'
+import { useGroups } from '../../contexts/GroupProvider'
+import { calculateInputs } from '../../../src/calculateInputs'
+import { fixedEncodeURIComponent, uniquify } from '../../../src/utils'
+import Link from 'next/link'
+import { useRouter } from 'next/router'

 interface Props {
  group: Group
@@ -16,7 +16,7 @@ interface Props {

 const GroupBoxBase: FC<Props> = ({ group }) => {
  const router = useRouter()
-  const {factories, findFactory} = useFactories()
+  const { factories, findFactory } = useFactories()
  const {
    doNotSuggest,
    setFactories,
@@ -28,24 +28,14 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
    removeGroup,
    getInputType
  } = useGroups()
-  const {
-    name,
-    exports,
-    malls
-  } = group
+  const { name, exports, malls } = group

  const [isDeleteConfirm, setDeleteConfirm] = useState(false)

  const [inputs, intermediates] = useMemo(() => {
    const allProducingFactories = [...exports, ...malls]
-    return calculateInputs(
-      allProducingFactories,
-      ignoredFactories,
-      baseFactories,
-      exportedFactories,
-      findFactory
-    )
-  }, [exports, malls, ignoredFactories, baseFactories, findFactory, exportedFactories])
+    return calculateInputs(allProducingFactories, baseFactories, exportedFactories, findFactory)
+  }, [exports, malls, baseFactories, findFactory, exportedFactories])

  const [suggestionsExport, suggestionMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
    const selectedValues = uniquify([...exports, ...malls])
@@ -58,110 +48,142 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
        const prerequisites = Object.keys(factory.recipe.prerequisites ?? {})
        return prerequisites.every(pre => availableIngredients.includes(pre))
      })
-      .reduce((acc, factory) =>
-        (factory.usedBy?.length ?? 0) >= 3
-          ? [[...acc[0], factory], acc[1]]
-          : [acc[0], [...acc[1], factory]],
+      .reduce(
+        (acc, factory) =>
+          (factory.usedBy?.length ?? 0) >= 3
+            ? [[...acc[0], factory], acc[1]]
+            : [acc[0], [...acc[1], factory]],
        [[], []] as [EnrichedEntity[], EnrichedEntity[]]
      )
  }, [exports, malls, intermediates, inputs, factories, doNotSuggest])

-  const addFactory = useCallback((uid: string, type: Parameters<typeof setFactories>[2]) => {
-    setFactories(name, [...group[type], uid], type)
-  }, [group, name, setFactories])
+  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])
+  const setExportFactories = useCallback(
+    (exportFactories: string[]) => setFactories(name, exportFactories, 'exports'),
+    [setFactories, name]
+  )
+  const setMallFactories = useCallback(
+    (mallFactories: string[]) => setFactories(name, mallFactories, 'malls'),
+    [setFactories, name]
+  )

-  return <div className={styles.root}>
-    <h3
-      contentEditable={true}
-      suppressContentEditableWarning={true}
-      onBlur={event => {
-        event.currentTarget.innerText = event.currentTarget.innerText.trim()
-        renameGroup(name, event.currentTarget.innerText);
-      }}
-    >
-      {name}
-    </h3>
-    <Link href={{pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`, query: router.query}}>👁</Link>
-    <button
-      className={styles.quit}
-      onBlur={() => setDeleteConfirm(false)}
-      onClick={() => !isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name)} style={{display: 'block'}}
-    >
-      {isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
-    </button>
-    <h4>Exported Factories</h4>
-    <FactorySelect
-      id={name+"-exports"}
-      factories={exports}
-      onSetFactories={setExportFactories}
-    />
-    <h4>Mall Factories</h4>
-    <FactorySelect
-      id={name+"-malls"}
-      factories={malls}
-      onSetFactories={setMallFactories}
-    />
-    { inputs.length ? <>
-      <h4>Input Factories ({inputs.length})</h4>
-      <div className={styles.flex}>
-        { inputs.map(input => <EntitySpan
-          key={input}
-          value={input}
-          state={getInputType(input)}
-          onContextMenu={event => {
-            event.preventDefault()
-            setIgnoredFactories([...ignoredFactories, input])
-          }}
-          rightClickText={"Exclude this recipe from suggestions"}
-        />) }
-      </div>
-    </> : null }
-    { intermediates.length ? <>
-      <h4>Intermediate Factories ({intermediates.length})</h4>
-      <div className={styles.flex}>
-        { intermediates.map(intermediate => <EntitySpan
-          key={intermediate}
-          value={intermediate}
-          state={getInputType(intermediate)}
-        />) }
-      </div>
-    </> : null }
-    { suggestionsExport.length ? <>
-      <h4>Suggestions (Export)</h4>
-      <div className={styles.flex}>
-        { suggestionsExport.map(suggestion => <EntitySpan
-          key={suggestion.href}
-          value={suggestion}
-          onClick={() => addFactory(suggestion.href, 'exports')}
-          onContextMenu={event => {
-            event.preventDefault()
-            setIgnoredFactories([...ignoredFactories, suggestion.href])
-          }}
-          leftClickText={"Add to exported factories"}
-          rightClickText={"Exclude this recipe from suggestions"}
-        />) }
-      </div>
-    </> : null }
-    { suggestionMall.length ? <>
-      <h4>Suggestions (Mall)</h4>
-      <div className={styles.flex}>
-        { suggestionMall.map(suggestion => <EntitySpan
-          key={suggestion.href}
-          value={suggestion}
-          onClick={() => addFactory(suggestion.href, 'malls')}
-          onContextMenu={event => {
-            event.preventDefault()
-            setIgnoredFactories([...ignoredFactories, suggestion.href])
-          }}
-          leftClickText={"Add to mall factories"}
-          rightClickText={"Exclude this recipe from suggestions"}
-        />) }
-      </div>
-    </> : null }
-  </div>
+  return (
+    <div className={styles.root}>
+      <h3
+        contentEditable={true}
+        suppressContentEditableWarning={true}
+        onBlur={event => {
+          event.currentTarget.innerText = event.currentTarget.innerText.trim()
+          renameGroup(name, event.currentTarget.innerText)
+        }}
+      >
+        {name}
+      </h3>
+      <Link
+        href={{
+          pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`,
+          query: router.query
+        }}
+      >
+        👁
+      </Link>
+      <button
+        className={styles.quit}
+        onBlur={() => setDeleteConfirm(false)}
+        onClick={() => (!isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name))}
+        style={{ display: 'block' }}
+      >
+        {isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
+      </button>
+      <h4>Exported Factories</h4>
+      <FactorySelect
+        id={name + '-exports'}
+        factories={exports}
+        onSetFactories={setExportFactories}
+      />
+      <h4>Mall Factories</h4>
+      <FactorySelect id={name + '-malls'} factories={malls} onSetFactories={setMallFactories} />
+      {inputs.length ? (
+        <>
+          <h4>Input Factories ({inputs.length})</h4>
+          <div className={styles.flex}>
+            {inputs.map(input => (
+              <EntitySpan
+                key={input}
+                value={input}
+                state={getInputType(input)}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  setIgnoredFactories([...ignoredFactories, input])
+                }}
+                rightClickText={'Exclude this recipe from suggestions'}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+      {intermediates.length ? (
+        <>
+          <h4>Intermediate Factories ({intermediates.length})</h4>
+          <div className={styles.flex}>
+            {intermediates.map(intermediate => (
+              <EntitySpan
+                key={intermediate}
+                value={intermediate}
+                state={getInputType(intermediate)}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+      {suggestionsExport.length ? (
+        <>
+          <h4>Suggestions (Export)</h4>
+          <div className={styles.flex}>
+            {suggestionsExport.map(suggestion => (
+              <EntitySpan
+                key={suggestion.href}
+                value={suggestion}
+                onClick={() => addFactory(suggestion.href, 'exports')}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  setIgnoredFactories([...ignoredFactories, suggestion.href])
+                }}
+                leftClickText={'Add to exported factories'}
+                rightClickText={'Exclude this recipe from suggestions'}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+      {suggestionMall.length ? (
+        <>
+          <h4>Suggestions (Mall)</h4>
+          <div className={styles.flex}>
+            {suggestionMall.map(suggestion => (
+              <EntitySpan
+                key={suggestion.href}
+                value={suggestion}
+                onClick={() => addFactory(suggestion.href, 'malls')}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  setIgnoredFactories([...ignoredFactories, suggestion.href])
+                }}
+                leftClickText={'Add to mall factories'}
+                rightClickText={'Exclude this recipe from suggestions'}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
 }

 export const GroupBox = memo(GroupBoxBase)
--- a/components/home/Home.tsx
+++ b/components/home/Home.tsx
@@ -1,18 +1,18 @@
-import {FC, useMemo, useRef, useState} from "react";
-import {GroupBox} from "./GroupBox/GroupBox";
-import styles from "./Home.module.css"
-import {useFactories} from "../../src/hooks/useFactories";
-import {EnrichedEntity} from "../../src/types";
-import {EntitySpan} from "./EntitySpan/EntitySpan";
-import {useGroups} from "../contexts/GroupProvider";
-import {Preferences} from "./Preferences/Preferences";
-import {download, streamToArrayBuffer} from "../../src/download";
-import Link from "next/link";
-import {useRouter} from "next/router";
+import { FC, useMemo, useRef, useState } from 'react'
+import { GroupBox } from './GroupBox/GroupBox'
+import styles from './Home.module.css'
+import { useFactories } from '../../src/hooks/useFactories'
+import { EnrichedEntity } from '../../src/types'
+import { EntitySpan } from './EntitySpan/EntitySpan'
+import { useGroups } from '../contexts/GroupProvider'
+import { Preferences } from './Preferences/Preferences'
+import { download, streamToArrayBuffer } from '../../src/download'
+import Link from 'next/link'
+import { useRouter } from 'next/router'

 export const Home: FC = () => {
  const router = useRouter()
-  const {factories} = useFactories()
+  const { factories } = useFactories()
  const {
    groups,
    addGroup,
@@ -23,13 +23,14 @@ export const Home: FC = () => {
    store,
    load
  } = useGroups()
-  const [newGroupValue, setNewGroupValue] = useState("New group")
+  const [newGroupValue, setNewGroupValue] = useState('New group')
  const inputRef = useRef<HTMLInputElement>(null)

  const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
    return factories
      .filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
-      .reduce((acc, factory) =>
+      .reduce(
+        (acc, factory) =>
          (factory.usedBy?.length ?? 0) >= 3
            ? [[...acc[0], factory], acc[1]]
            : [acc[0], [...acc[1], factory]],
@@ -40,49 +41,66 @@ export const Home: FC = () => {
  return (
    <main>
      <h1>Factorio Microservices</h1>
-      <button onClick={() => {
-        download('factorio-microservices.bin', store());
-      }}>Store</button>
-      <button onClick={async () => {
-        const res = await fetch( '/api/submit', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({groups, ignored: ignoredFactories, base: baseFactories})
-        })
-        if (res.ok) {
-          const { uuid } = await res.json()
-          if (uuid) await router.push({query: {...router.query, id: uuid}})
-        }
-      }}>Upload</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
-        }
-      }}/>
-      <Link href={{pathname: '/visualize', query: router.query}}>Visualize</Link>
+      <button
+        onClick={() => {
+          download('factorio-microservices.bin', store())
+        }}
+      >
+        Store
+      </button>
+      <button
+        onClick={async () => {
+          const res = await fetch('/api/submit', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ groups, ignored: ignoredFactories, base: baseFactories })
+          })
+          if (res.ok) {
+            const { uuid } = await res.json()
+            if (uuid) await router.push({ query: { ...router.query, id: uuid } })
+          }
+        }}
+      >
+        Upload
+      </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
+          }
+        }}
+      />
+      <Link href={{ pathname: '/visualize', query: router.query }}>Visualize</Link>
      <Preferences />
      <fieldset>
        <legend>Missing export factories</legend>
        <div className={styles.missingFactories}>
-          { missingExport.map(missing => (
+          {missingExport.map(missing => (
            <EntitySpan
              key={missing.href}
              value={missing}
              onClick={() => {
-                addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
-                setNewGroupValue("New group")
+                addGroup(newGroupValue !== 'New group' ? newGroupValue : missing.name, [
+                  missing.href
+                ])
+                setNewGroupValue('New group')
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
-              leftClickText={"Create a new group with this name and item as exported factory"}
-              rightClickText={"Exclude this recipe from suggestions"}
+              leftClickText={'Create a new group with this name and item as exported factory'}
+              rightClickText={'Exclude this recipe from suggestions'}
            />
          ))}
        </div>
@@ -90,31 +108,34 @@ export const Home: FC = () => {
      <fieldset>
        <legend>Missing mall factories</legend>
        <div className={styles.missingFactories}>
-          { missingMall.map(missing => (
+          {missingMall.map(missing => (
            <EntitySpan
              key={missing.href}
              value={missing}
              onClick={() => {
-                addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [], [missing.href])
-                setNewGroupValue("New group")
+                addGroup(
+                  newGroupValue !== 'New group' ? newGroupValue : missing.name,
+                  [],
+                  [missing.href]
+                )
+                setNewGroupValue('New group')
              }}
              onContextMenu={event => {
                event.preventDefault()
                setIgnoredFactories([...ignoredFactories, missing.href])
              }}
-              leftClickText={"Create a new group with this name and item as mall factory"}
-              rightClickText={"Exclude this recipe from suggestions"}
+              leftClickText={'Create a new group with this name and item as mall factory'}
+              rightClickText={'Exclude this recipe from suggestions'}
            />
          ))}
        </div>
      </fieldset>
      <div className={styles.grid}>
-        {
-          Object
-            .values(groups)
-            .sort((a, b) => a.name.localeCompare(b.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>
  )
--- a/components/home/LeftClickIcon/LeftClickIcon.tsx
+++ b/components/home/LeftClickIcon/LeftClickIcon.tsx
@@ -1,4 +1,4 @@
-import {FC} from "react";
+import { FC } from 'react'

 interface Props {
  className?: string
@@ -6,11 +6,25 @@ interface Props {
  classClick?: string
 }

-export const LeftClickIcon: FC<Props> = ({className, classBody, classClick}) => {
+export const LeftClickIcon: FC<Props> = ({ className, classBody, classClick }) => {
  return (
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" className={className}>
-        <path className={classBody} d="M51.552,8.117v32.554l-3.095,0.009c-9.203,0.027-17.447,0.297-24.509,0.803l-0.291,0.021  c-0.026,1.733-0.036,3.521-0.036,5.378c0,24.854,1.527,45,26.379,45c24.854,0,26.379-20.146,26.379-45  C76.379,22.563,74.903,8.701,51.552,8.117z" />
-        <path className={classClick} id="click" d="M48.448,37.577V8.117C27.971,8.629,24.313,19.354,23.727,38.388C29.914,37.945,38.002,37.607,48.448,37.577z" />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      version='1.1'
+      x='0px'
+      y='0px'
+      viewBox='0 0 100 100'
+      className={className}
+    >
+      <path
+        className={classBody}
+        d='M51.552,8.117v32.554l-3.095,0.009c-9.203,0.027-17.447,0.297-24.509,0.803l-0.291,0.021  c-0.026,1.733-0.036,3.521-0.036,5.378c0,24.854,1.527,45,26.379,45c24.854,0,26.379-20.146,26.379-45  C76.379,22.563,74.903,8.701,51.552,8.117z'
+      />
+      <path
+        className={classClick}
+        id='click'
+        d='M48.448,37.577V8.117C27.971,8.629,24.313,19.354,23.727,38.388C29.914,37.945,38.002,37.607,48.448,37.577z'
+      />
    </svg>
  )
 }
--- a/components/home/Preferences/Preferences.tsx
+++ b/components/home/Preferences/Preferences.tsx
@@ -1,42 +1,42 @@
-import {FC, useState} from "react";
-import {FactorySelect} from "../FactorySelect/FactorySelect";
-import {useGroups} from "../../contexts/GroupProvider";
+import { FC, useState } from 'react'
+import { FactorySelect } from '../FactorySelect/FactorySelect'
+import { useGroups } from '../../contexts/GroupProvider'

 export const Preferences: FC = () => {
-  const {
-    addGroup,
-    baseFactories,
-    setBaseFactories,
-    ignoredFactories,
-    setIgnoredFactories
-  } = useGroups()
-  const [newGroupValue, setNewGroupValue] = useState("New group")
-  return <>
-    <fieldset>
-      <legend>Basic Values</legend>
-      <FactorySelect
-        id={'baseFactoriesSelect'}
-        factories={baseFactories}
-        onSetFactories={setBaseFactories}
-      />
-    </fieldset>
-    <fieldset>
-      <legend>Ignored Values</legend>
-      <FactorySelect
-        id={'ignoredFactoriesSelect'}
-        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>
-  </>
+  const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
+    useGroups()
+  const [newGroupValue, setNewGroupValue] = useState('New group')
+  return (
+    <>
+      <fieldset>
+        <legend>Basic Values</legend>
+        <FactorySelect
+          id={'baseFactoriesSelect'}
+          factories={baseFactories}
+          onSetFactories={setBaseFactories}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Ignored Values</legend>
+        <FactorySelect
+          id={'ignoredFactoriesSelect'}
+          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>
+    </>
+  )
 }
--- a/components/home/Recipe/Recipe.tsx
+++ b/components/home/Recipe/Recipe.tsx
@@ -1,24 +1,29 @@
-import {FC} from "react"
-import {Recipe} from "../../../src/types"
-import {EntityIcon} from "../EntityIcon/EntityIcon";
+import { FC } from 'react'
+import { Recipe } from '../../../src/types'
+import { EntityIcon } from '../EntityIcon/EntityIcon'
 import styles from './Recipe.module.css'

 interface Props {
  recipe: Recipe
 }

-export const RecipeSpan: FC<Props> = ({recipe}) => {
-  const toEntityIcon = ([key, amount]: [string, number]) => <EntityIcon key={key} value={key} amount={amount} />
-  const joinByPlus = (elems: JSX.Element[]) => elems.reduce((acc, curr) => {
-    if (acc.length) {
-      return [...acc, '+', curr]
-    } else {
-      return [curr]
-    }
-  }, [] as (JSX.Element|string)[])
-  const before = Object.entries({...recipe.prerequisites}).map(toEntityIcon)
-  const after = Object.entries({...recipe.output}).map(toEntityIcon)
-  return <span className={styles.recipe}>
-    {joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
-  </span>
+export const RecipeSpan: FC<Props> = ({ recipe }) => {
+  const toEntityIcon = ([key, amount]: [string, number]) => (
+    <EntityIcon key={key} value={key} amount={amount} />
+  )
+  const joinByPlus = (elems: JSX.Element[]) =>
+    elems.reduce((acc, curr) => {
+      if (acc.length) {
+        return [...acc, '+', curr]
+      } else {
+        return [curr]
+      }
+    }, [] as (JSX.Element | string)[])
+  const before = Object.entries({ ...recipe.prerequisites }).map(toEntityIcon)
+  const after = Object.entries({ ...recipe.output }).map(toEntityIcon)
+  return (
+    <span className={styles.recipe}>
+      {joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
+    </span>
+  )
 }