From 1fb20bcb1fa0b0d4f117fc6929e494d980a07467 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 11 Oct 2021 16:06:40 +0300
Subject: [PATCH] HotbarToggleItem component for pinning entity

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+catalog/catalog-entity-drawer-menu.tsx   | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx b/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
index 082dd2b252..713f2f0d6d 100644
--- a/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
+++ b/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { cssNames } from "../../utils";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
 import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
@@ -70,14 +70,6 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
     }
   }
 
-  addToHotbar(entity: CatalogEntity): void {
-    HotbarStore.getInstance().addToHotbar(entity);
-  }
-
-  removeFromHotbar(item: CatalogEntity): void {
-    HotbarStore.getInstance().removeFromHotbar(item.getId());
-  }
-
   getMenuItems(entity: T): React.ReactChild[] {
     if (!entity) {
       return [];
@@ -102,21 +94,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
       );
     }
 
-    const isAddedEntity = () => HotbarStore.getInstance().isAddedToActive(entity);
-
-    if (!isAddedEntity) {
-      items.push(
-        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(entity) }>
-          <Icon material="push_pin" small tooltip="Add to Hotbar" />
-        </MenuItem>
-      );
-    } else {
-      items.push(
-        <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(entity)}>
-          <Icon material="push_pin" small tooltip="Remove from Hotbar" />
-        </MenuItem>
-      );
-    }
+    items.push(<HotbarToggleItem key="hotbar-toggle" entity={entity}/>);
 
     return items;
   }
@@ -139,3 +117,19 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
     );
   }
 }
+
+function HotbarToggleItem(props: { entity: CatalogEntity }) {
+  const store = HotbarStore.getInstance(false);
+  const add = () => store?.addToHotbar(props.entity);
+  const remove = () => store?.removeFromHotbar(props.entity.getId());
+  const [itemInHotbar, setItemInHotbar] = useState(store?.isAddedToActive(props.entity));
+
+  return (
+    <MenuItem onClick={() => {
+      itemInHotbar ? remove() : add();
+      setItemInHotbar(!itemInHotbar);
+    }}>
+      <Icon material="push_pin" small tooltip={itemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}/>
+    </MenuItem>
+  );
+}