Load and save

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"}