Added SSR

components/home/FactorySelect/FactorySelect.tsx

@@ -1,4 +1,4 @@
-import {FC, memo, useEffect, useState} from "react";
+import {FC, memo, useEffect, useMemo, useState} from "react";
 import Select from "react-select";
 import {isNonNullable} from "../../../src/utils";
 import details from "../../../res/details.json";
@@ -17,11 +17,10 @@ const options = details.map(detail => ({
 }))
 
 const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
-  const [state, setState] = useState<typeof options>([])
-  useEffect(() => {
-    setState(factories
+  const state = useMemo<typeof options>(() => {
+    return factories
       .map(factory => options.find(option => option.value === factory))
-      .filter(isNonNullable))
+      .filter(isNonNullable)
   }, [factories])
 
   return <Select
@@ -38,7 +37,6 @@ const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
     isMulti
     options={options as never}
     onChange={e => {
-      setState(e as typeof options)
       onSetFactories(e.map(s => s?.value))
     }}
     className={styles.select}

components/home/GroupBox/GroupBox.tsx

@@ -8,12 +8,14 @@ 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
 }
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
+  const router = useRouter()
   const {factories, findFactory} = useFactories()
   const {
     doNotSuggest,
@@ -82,7 +84,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     >
       {name}
     </h3>
-    <Link href={`./visualize/${fixedEncodeURIComponent(group.name)}`}>👁</Link>
+    <Link href={{pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`, query: router.query}}>👁</Link>
     <button
       className={styles.quit}
       onBlur={() => setDeleteConfirm(false)}

components/home/Home.tsx

@@ -8,8 +8,10 @@ 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 {
     groups,
@@ -42,13 +44,17 @@ export const Home: FC = () => {
         download('factorio-microservices.bin', store());
       }}>Store</button>
       <button onClick={async () => {
-        await fetch( '/api/submit', {
+        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
@@ -58,7 +64,7 @@ export const Home: FC = () => {
           if (inputRef.current) inputRef.current.value = null as unknown as string
         }
       }}/>
-      <Link href={'/visualize'}>Visualize</Link>
+      <Link href={{pathname: '/visualize', query: router.query}}>Visualize</Link>
       <Preferences />
       <fieldset>
         <legend>Missing export factories</legend>