Improvements in performance

components/contexts/GroupProvider.tsx

@@ -1,7 +1,6 @@
-import {createContext, FC, useContext, useMemo, useState} from "react";
-import {Group, NewGroup} from "../../src/types";
+import {createContext, FC, useCallback, useContext, useMemo} from "react";
+import {Group} from "../../src/types";
 import {useLocalStorage} from "../../src/hooks/useLocalStorage";
-import {sortByProperty} from "../../src/utils";
 import {ReactNodeLike} from "prop-types";
 
 interface Props {
@@ -17,13 +16,12 @@ interface GroupContextType {
   baseFactories: string[]
   setBaseFactories(factories: string[]): void
 
-  groups: NewGroup[]
+  groups: Record<string, Group>
   addGroup(name: string, exported?: string[], malls?: string[]): void
-  removeGroup(idx: number): void
-  renameGroup(idx: number, newName: string): void
+  removeGroup(name: string): void
+  renameGroup(name: string, newName: string): void
 
-  getGroup(idx: number): NewGroup
-  setFactories(idx: number, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls'): void
+  setFactories(name: string, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls'): void
 
   getInputType(uid: string): 'base'|'produced'|'unknown'
 }
@@ -37,12 +35,11 @@ const defaultValues: GroupContextType = {
   baseFactories: [],
   setBaseFactories() {},
 
-  groups: [],
+  groups: {},
   addGroup() {},
   removeGroup() {},
   renameGroup() {},
 
-  getGroup() {return {name: 'Lorem', inputs: [], intermediates: [], exports: [], malls: []}},
   setFactories() {},
   getInputType() {return 'unknown'}
 }
@@ -53,20 +50,51 @@ export const useGroups = () => useContext(GroupContext)
 export const GroupProvider: FC<Props> = ({children}) => {
   const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
   const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
-  const [oldGroups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
-  const groups = useMemo<NewGroup[]>(() => {
-    return oldGroups.map(groupToNewGroup)
-  }, [oldGroups])
+  const [groups, setGroups] = useLocalStorage<Record<string, Group>>('serviceGroups', {})
 
   const doNotSuggest = useMemo<Set<string>>(() => {
-    return new Set([...groups.flatMap(group => [...group.exports, ...group.malls, ...(group.malls.length ? group.intermediates : [])]), ...excludedSuggestions, ...basicValues])
+    return new Set([...Object.values(groups).flatMap(group => [...group.exports, ...group.malls, ...(group.malls.length ? group.intermediates : [])]), ...excludedSuggestions, ...basicValues])
   }, [basicValues, groups, excludedSuggestions])
 
   const exportedFactories = useMemo<Set<string>>(() => {
-    return new Set([...groups.flatMap(group => [...group.exports])])
+    return new Set([...Object.values(groups).flatMap(group => [...group.exports])])
   }, [groups])
 
-  const value: GroupContextType = {
+  const addGroup = useCallback((name: string, exports: string[] = [], malls: string[] = []) => {
+    if (name in groups) return false
+    setGroups(groups => {
+      groups[name] = { name, inputs: [], intermediates: [], exports, malls }
+      return groups
+    })
+    return true
+  }, [groups, setGroups])
+  const removeGroup = useCallback((name: string) => {
+    setGroups(groups => {
+      delete groups[name]
+      return groups
+    })
+  }, [setGroups])
+  const renameGroup = useCallback((name: string, newName: string) => {
+    setGroups(groups => {
+      groups[newName] = {...groups[name], name: newName}
+      delete groups[name]
+      return groups
+    })
+  }, [setGroups])
+
+  const setFactories = useCallback((name: string, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls') => {
+    setGroups(groups => {
+      groups[name] = {...groups[name], [type]: factories}
+      return groups
+    })
+  }, [setGroups])
+  const getInputType = useCallback((uid: string) => {
+    if (basicValues.includes(uid)) return 'base'
+    else if (exportedFactories.has(uid)) return 'produced'
+    else return 'unknown'
+  }, [basicValues, exportedFactories])
+
+  const value: GroupContextType = useMemo(() => ({
     doNotSuggest,
 
     ignoredFactories: excludedSuggestions,
@@ -76,51 +104,12 @@ export const GroupProvider: FC<Props> = ({children}) => {
     setBaseFactories: setBasicValues,
 
     groups,
-    addGroup(name: string, exports: string[] = [], malls: string[] = []) {
-      setGroups(groups => {
-        groups.push({ name, inputs: [], intermediates: [], exports, malls })
-        return groups.sort(sortByProperty(group => group.name))
-      })
-    },
-    removeGroup(idx: number) {
-      setGroups(groups => {
-        groups.splice(idx, 1)
-        return groups
-      })
-    },
-    renameGroup(idx: number, newName: string) {
-      setGroups(groups => {
-        groups[idx].name = newName
-        return groups.sort(sortByProperty(group => group.name))
-      })
-    },
+    addGroup,
+    removeGroup,
+    renameGroup,
 
-    getGroup(idx: number) {
-      return groups[idx]
-    },
-    setFactories(idx: number, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls') {
-      setGroups(groups => {
-        const group = groupToNewGroup(groups[idx])
-        group[type] = factories
-        groups[idx] = group
-        return groups
-      })
-    },
-    getInputType(uid: string) {
-      if (basicValues.includes(uid)) return 'base'
-      else if (exportedFactories.has(uid)) return 'produced'
-      else return 'unknown'
-    }
-  }
+    setFactories,
+    getInputType
+  }), [addGroup, basicValues, doNotSuggest, excludedSuggestions, getInputType, groups, removeGroup, renameGroup, setBasicValues, setExcludedSuggestions, setFactories])
   return <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
 }
-
-function groupToNewGroup(group: Group): NewGroup {
-  return 'malls' in group ? group : {
-    name: group.name,
-    inputs: group.inputs,
-    intermediates: group.intermediates,
-    exports: group.isExported ? group.factories : [],
-    malls: !group.isExported ? group.factories : []
-  }
-}