From ca730fa5970fd6348b887e2ad75df701484b3ee2 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 29 Jul 2019 18:13:36 +0300
Subject: [PATCH] discover implemented on a working demo stage

---
 src/routes/Discover/Discover.js   |  4 ++--
 src/routes/Discover/PickerMenu.js | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 5bc5c9517..e508d7052 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -6,9 +6,9 @@ const styles = require('./styles');
 
 const Discover = ({ urlParams, queryParams }) => {
     const [pickers, metaItems] = useCatalog(urlParams, queryParams);
-    const [selectedItem, setSelectedItem] = React.useState(null);
+    const [selectedItem, setSelectedItem] = React.useState(metaItems[0]);
     const changeMetaItem = React.useCallback((event) => {
-        const { metaItemId } = event.currentTarget.dataset;
+        const { id: metaItemId } = event.currentTarget.dataset;
         const metaItem = metaItems.find(({ id }) => id === metaItemId);
         setSelectedItem(metaItem);
     }, [metaItems]);
diff --git a/src/routes/Discover/PickerMenu.js b/src/routes/Discover/PickerMenu.js
index bde09a305..9cf3cd971 100644
--- a/src/routes/Discover/PickerMenu.js
+++ b/src/routes/Discover/PickerMenu.js
@@ -6,11 +6,19 @@ const { Input } = require('stremio-navigation');
 const { Popup, useBinaryState } = require('stremio/common');
 const styles = require('./styles');
 
-const PickerMenu = ({ name, value, options, toggle }) => {
+const PickerMenu = ({ name, value, options, onChange }) => {
+    const popupRef = React.useRef();
     const [open, onOpen, onClose] = useBinaryState(false);
     const label = typeof value === 'string' ? value : name;
+    const optionOnClick = React.useCallback((event) => {
+        if (popupRef.current !== null) {
+            popupRef.current.close();
+        }
+
+        onChange(event);
+    }, [onChange]);
     return (
-        <Popup onOpen={onOpen} onClose={onClose}>
+        <Popup ref={popupRef} onOpen={onOpen} onClose={onClose}>
             <Popup.Label>
                 <Input className={classnames(styles['picker-button'], { 'active': open }, 'focusable-with-border')} title={label} type={'button'}>
                     <div className={classnames(styles['picker-label'], { [styles['capitalized']]: name === 'type' })}>{label}</div>
@@ -22,7 +30,7 @@ const PickerMenu = ({ name, value, options, toggle }) => {
                     {
                         Array.isArray(options) ?
                             options.map(({ value, label }) => (
-                                <Input key={value} className={classnames(styles['menu-item-container'], 'focusable-with-border')} title={label} data-name={name} data-value={value} type={'button'} onClick={toggle}>
+                                <Input key={value} className={classnames(styles['menu-item-container'], 'focusable-with-border')} title={label} data-name={name} data-value={value} type={'button'} onClick={optionOnClick}>
                                     <div className={classnames(styles['menu-label'], { [styles['capitalized']]: name === 'type' })}>{label}</div>
                                 </Input>
                             ))
@@ -42,7 +50,7 @@ PickerMenu.propTypes = {
         value: PropTypes.string,
         label: PropTypes.string
     })),
-    toggle: PropTypes.func
+    onChange: PropTypes.func
 };
 
 module.exports = PickerMenu;