fixed: bug duplicate id when map element

client-electron/src/pages/recipes/components/recipe-editor-components/recipe-editor.tsx

@@ -36,23 +36,31 @@ export const RecipeEditor: React.FC<RecipeEditorProps> = ({
 
   const [editorShowState, setEditorShowState] = useState(EditorShowStateEnum.RECIPES_IN_USE)
 
-  const { recipesEnable, recipesDisable } = useMemo<{
-    recipesEnable: ItemMetadata[]
-    recipesDisable: ItemMetadata[]
-  }>(() => {
-    return {
-      recipesEnable: recipes.Recipe01.filter(r => r.isUse).map(x => ({
-        id: x.productCode,
-        name: x.name,
-        lastChange: x.LastChange
-      })),
-      recipesDisable: recipes.Recipe01.filter(r => !r.isUse).map(x => ({
-        id: x.productCode,
-        name: x.name,
-        lastChange: x.LastChange
-      }))
-    }
-  }, [recipes])
+  const { recipesEnable, recipesDisable } = useMemo(
+    () =>
+      recipes.Recipe01.reduce<{ recipesEnable: ItemMetadata[]; recipesDisable: ItemMetadata[] }>(
+        (acc, curr) => {
+          if (curr.isUse) {
+            acc.recipesEnable.push({
+              id: curr.productCode,
+              name: curr.name,
+              lastChange: curr.LastChange
+            })
+            return acc
+          } else {
+            acc.recipesDisable.push({
+              id: curr.productCode,
+              name: curr.name,
+              lastChange: curr.LastChange
+            })
+          }
+
+          return acc
+        },
+        { recipesEnable: [], recipesDisable: [] }
+      ),
+    [recipes.Recipe01]
+  )
 
   const [currentItems, setCurrentItems] = useState<ItemMetadata[]>(recipesEnable)
 
@@ -62,10 +70,8 @@ export const RecipeEditor: React.FC<RecipeEditorProps> = ({
     onSelectFn: id => setSelectedRecipe(id.toString())
   })
 
-  const { selectedMaterial, setSelectedMaterial, selectedRecipe, setSelectedRecipe } = useRecipeDashboard(
+  const { selectedRecipe, setSelectedRecipe } = useRecipeDashboard(
     useShallow(state => ({
-      selectedMaterial: state.selectedMaterial,
-      setSelectedMaterial: state.setSelectedMaterial,
       selectedRecipe: state.selectedRecipe,
       setSelectedRecipe: state.setSelectedRecipe
     }))
@@ -90,15 +96,11 @@ export const RecipeEditor: React.FC<RecipeEditorProps> = ({
         id: x.id,
         name: x.materialName
       }))
-      currentSelectId = selectedMaterial
-      onSelectedFn = id => setSelectedMaterial(Number(id))
     } else if (editorShowState === EditorShowStateEnum.TOPPING_GROUPS) {
       list = recipes.Topping.ToppingGroup.map(x => ({
         id: x.groupID,
         name: x.name
       }))
-      currentSelectId = selectedMaterial
-      onSelectedFn = id => setSelectedMaterial(Number(id))
     } else if (editorShowState === EditorShowStateEnum.TOPPING_LIST) {
       list = recipes.Topping.ToppingList.map(x => ({
         id: x.id,

client-electron/src/pages/recipes/components/recipe-editor-components/recipe-list.tsx

@@ -13,9 +13,9 @@ const RecipeList: React.FC<RecipeListProps> = ({ items, currentSelectId, onSelec
   return (
     <ScrollArea className="h-screen">
       <div className="flex flex-col gap-2 p-4 pt-0">
-        {items.map(item => (
+        {items.map((item, index) => (
           <button
-            key={item.id}
+            key={index}
             className={cn(
               'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
               currentSelectId === item.id && 'bg-muted'