Implemented server routes

components/contexts/GroupProvider.tsx

@@ -1,9 +1,10 @@
-import {createContext, FC, useCallback, useContext, useMemo, useState} from "react";
+import {createContext, FC, useCallback, useContext, useEffect, useMemo, useState} from "react";
 import {Group} from "../../src/types";
-import {useLocalStorage} from "../../src/hooks/useLocalStorage";
 import {ReactNodeLike} from "prop-types";
 import pako from "pako";
 import {Dict} from "../../src/types";
+import {fixedEncodeURIComponent} from "../../src/utils";
+import {GroupRenameBody, GroupSetFactoryArrayBody, SetFactoryArrayBody} from "../../src/types/ApiSchemasFrontend";
 
 interface Props {
   children: ReactNodeLike
@@ -68,9 +69,20 @@ interface StoredFile {
   excludedSuggestions: string[]
 }
 
-export const GroupProvider: FC<Props> = ({children, initial}) => {
-  const [excludedSuggestions, setExcludedSuggestions] = useState<string[]>(initial.ignored)
-  const [basicValues, setBasicValues] = useState<string[]>(initial.base)
+export const postFetchJson = async (url: string, body: Dict<unknown>) => {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(body)
+  })
+  return res.json()
+}
+
+export const GroupProvider: FC<Props> = ({children, id, initial}) => {
+  const [excludedSuggestions, _setExcludedSuggestions] = useState<string[]>(initial.ignored)
+  const [basicValues, _setBasicValues] = useState<string[]>(initial.base)
   const [groups, setGroups] = useState<Dict<Group>>(initial.groups)
 
   const doNotSuggest = useMemo<Set<string>>(() => {
@@ -81,35 +93,85 @@ export const GroupProvider: FC<Props> = ({children, initial}) => {
     return new Set([...Object.values(groups).flatMap(group => [...group.exports])])
   }, [groups])
 
+  const setExcludedSuggestions = useCallback<typeof _setExcludedSuggestions>((val) => {
+    _setExcludedSuggestions(val)
+    postFetchJson(`/api/${fixedEncodeURIComponent(id)}/factories`, {
+      type: 'ignored',
+      factories: val
+    } as SetFactoryArrayBody)
+      .catch(console.error)
+  }, [id])
+
+  const setBasicValues = useCallback<typeof _setBasicValues>((val) => {
+    _setBasicValues(val)
+    postFetchJson(`/api/${fixedEncodeURIComponent(id)}/factories`, {
+      type: 'base',
+      factories: val
+    } as SetFactoryArrayBody)
+      .catch(console.error)
+  }, [id])
+
   const addGroup = useCallback((name: string, exports: string[] = [], malls: string[] = []) => {
+    name = name.replace(/[.$]/g, '')
     if (name in groups) return false
     setGroups(groups => {
       groups[name] = { name, exports, malls }
-      return groups
+      return {...groups}
     })
+    ;(async () => {
+      await postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/add`, {})
+      if (exports.length) {
+        await postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, {
+          type: 'exports',
+          factories: exports
+        } as GroupSetFactoryArrayBody)
+      }
+      if (malls.length) {
+        await postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, {
+          type: 'malls',
+          factories: exports
+        } as GroupSetFactoryArrayBody)
+      }
+    })().catch(console.error)
     return true
-  }, [groups, setGroups])
+  }, [groups, id])
   const removeGroup = useCallback((name: string) => {
+    name = name.replace(/[.$]/g, '')
     setGroups(groups => {
       delete groups[name]
-      return groups
+      console.log(groups[name])
+      return {...groups}
     })
-  }, [setGroups])
+    postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/remove`, {})
+      .catch(console.error)
+  }, [id])
   const renameGroup = useCallback((name: string, newName: string) => {
-    if (name === newName) return
+    name = name.replace(/[.$]/g, '')
+    newName = newName.replace(/[.$]/g, '')
+    if (newName in groups) return
     setGroups(groups => {
       groups[newName] = {...groups[name], name: newName}
       delete groups[name]
-      return groups
+      return {...groups}
     })
-  }, [setGroups])
+    postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/rename`, {
+      newName
+    } as GroupRenameBody)
+      .catch(console.error)
+  }, [groups, id])
 
-  const setFactories = useCallback((name: string, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls') => {
+  const setFactories = useCallback((name: string, factories: string[], type: 'exports'|'malls') => {
+    name = name.replace(/[.$]/g, '')
     setGroups(groups => {
       groups[name] = {...groups[name], [type]: factories}
-      return groups
+      return {...groups}
     })
-  }, [setGroups])
+    postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, {
+      type,
+      factories
+    } as GroupSetFactoryArrayBody)
+      .catch(console.error)
+  }, [id])
   const getInputType = useCallback((uid: string) => {
     if (basicValues.includes(uid)) return 'base'
     else if (exportedFactories.has(uid)) return 'produced'
@@ -133,7 +195,7 @@ export const GroupProvider: FC<Props> = ({children, initial}) => {
     setGroups(value.groups)
     setBasicValues(value.basicValues)
     setExcludedSuggestions(value.excludedSuggestions)
-  }, [setBasicValues, setExcludedSuggestions, setGroups])
+  }, [])
 
   const value: GroupContextType = useMemo(() => ({
     doNotSuggest,

components/home/FactorySelect/FactorySelect.tsx

@@ -25,6 +25,7 @@ const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
 
   return <Select
     id={id}
+    instanceId={id}
     value={state}
     components={{
       MultiValueLabel: ({data, innerProps}) => (