From a04ddfd6272f4433e10e77656226a307197152a6 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 29 Jan 2019 16:32:19 +0200
Subject: [PATCH] metaitem menu api simplified

---
 src/common/MetaItem/MetaItem.js | 19 +++++++++++++------
 src/routes/Board/Board.js       | 26 +++++++++++++-------------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 6c31e77ce..f09650796 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -44,6 +44,12 @@ class MetaItem extends Component {
         }
     }
 
+    menuOptionOnSelect = (event) => {
+        if (typeof this.props.menuOptionOnSelect === 'function') {
+            this.props.menuOptionOnSelect(event);
+        }
+    }
+
     renderProgress() {
         if (this.props.progress <= 0) {
             return null;
@@ -83,7 +89,7 @@ class MetaItem extends Component {
                 <div className={styles['title-bar-container']}>
                     <div className={styles['title']}>{this.props.title}</div>
                     {
-                        this.props.menu.length > 0 ?
+                        this.props.menuOptions.length > 0 ?
                             <Popup className={classnames(styles['menu-popup-container'], this.props.popupClassName)} onOpen={this.onMenuPopupOpen} onClose={this.onMenuPopupClose}>
                                 <Popup.Label>
                                     <Icon
@@ -93,8 +99,8 @@ class MetaItem extends Component {
                                 </Popup.Label>
                                 <Popup.Menu>
                                     <div className={styles['menu-items-container']}>
-                                        {this.props.menu.map(({ label, onSelect }) => (
-                                            <Button key={label} data-meta-item-id={this.props.id} className={styles['menu-item']} onClick={onSelect}>{label}</Button>
+                                        {this.props.menuOptions.map(({ label, type }) => (
+                                            <Button key={type} className={styles['menu-item']} data-meta-item-id={this.props.id} data-menu-option-type={type} onClick={this.menuOptionOnSelect}>{label}</Button>
                                         ))}
                                     </div>
                                 </Popup.Menu>
@@ -129,6 +135,7 @@ MetaItem.propTypes = {
     className: PropTypes.string,
     popupClassName: PropTypes.string,
     onClick: PropTypes.func,
+    menuOptionOnSelect: PropTypes.func,
     id: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
     relativeSize: PropTypes.oneOf(['auto', 'height']).isRequired,
@@ -138,9 +145,9 @@ MetaItem.propTypes = {
     subtitle: PropTypes.string.isRequired,
     progress: PropTypes.number.isRequired,
     released: PropTypes.instanceOf(Date).isRequired,
-    menu: PropTypes.arrayOf(PropTypes.shape({
+    menuOptions: PropTypes.arrayOf(PropTypes.shape({
         label: PropTypes.string.isRequired,
-        onSelect: PropTypes.func.isRequired
+        type: PropTypes.string.isRequired
     })).isRequired
 };
 MetaItem.defaultProps = {
@@ -151,7 +158,7 @@ MetaItem.defaultProps = {
     subtitle: '',
     progress: 0,
     released: new Date(NaN),
-    menu: Object.freeze([])
+    menuOptions: Object.freeze([])
 };
 
 export default MetaItem;
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index a10121189..1354f222d 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -20,21 +20,11 @@ class Board extends PureComponent {
         this.cwMenu = [
             {
                 label: 'Play',
-                onSelect: (event) => {
-                    console.log('Play', {
-                        defaultPrevented: event.isDefaultPrevented(),
-                        propagationStopped: event.isPropagationStopped()
-                    });
-                }
+                type: 'play'
             },
             {
                 label: 'Dismiss',
-                onSelect: (event) => {
-                    console.log('Dismiss', {
-                        defaultPrevented: event.isDefaultPrevented(),
-                        propagationStopped: event.isPropagationStopped()
-                    });
-                }
+                type: 'dismiss'
             }
         ];
     }
@@ -47,6 +37,15 @@ class Board extends PureComponent {
         });
     }
 
+    menuOptionOnSelect = (event) => {
+        console.log('menuOptionOnSelect', {
+            id: event.currentTarget.dataset.metaItemId,
+            type: event.currentTarget.dataset.menuOptionType,
+            defaultPrevented: event.isDefaultPrevented(),
+            propagationStopped: event.isPropagationStopped()
+        });
+    }
+
     render() {
         return (
             <div className={styles['board-container']}>
@@ -57,8 +56,9 @@ class Board extends PureComponent {
                             className={styles['meta-item']}
                             popupClassName={styles['meta-item-popup-container']}
                             relativeSize={'height'}
-                            menu={this.cwMenu}
+                            menuOptions={this.cwMenu}
                             onClick={this.onClick}
+                            menuOptionOnSelect={this.menuOptionOnSelect}
                             {...props}
                         />
                     ))}