From 51b48489d82c98b861cae7fa5b8564b1b0b62693 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 31 Oct 2019 16:28:07 +0200
Subject: [PATCH] filters modal added to discover layout

---
 src/routes/Discover/Discover.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 79654f2ab..19b62d204 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -1,14 +1,15 @@
 const React = require('react');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Button, MainNavBar, MetaItem, MetaPreview, Multiselect, PaginateInput } = require('stremio/common');
+const { Modal } = require('stremio-router');
+const { Button, MainNavBar, MetaItem, MetaPreview, Multiselect, PaginateInput, useBinaryState } = require('stremio/common');
 const useDiscover = require('./useDiscover');
 const styles = require('./styles');
 
-// TODO render only 4 pickers and a more button that opens a modal with all pickers
 const Discover = ({ urlParams, queryParams }) => {
     const [selectInputs, paginateInput, metaItems, error] = useDiscover(urlParams, queryParams);
     const [selectedMetaItem, setSelectedMetaItem] = React.useState(null);
+    const [filtersModalOpen, openFiltersModal, closeFiltersModal] = useBinaryState(false);
     const metaItemsOnMouseDownCapture = React.useCallback((event) => {
         event.nativeEvent.buttonBlurPrevented = true;
     }, []);
@@ -24,6 +25,9 @@ const Discover = ({ urlParams, queryParams }) => {
         const metaItem = Array.isArray(metaItems) && metaItems.length > 0 ? metaItems[0] : null;
         setSelectedMetaItem(metaItem);
     }, [metaItems]);
+    React.useEffect(() => {
+        closeFiltersModal();
+    }, [urlParams, queryParams]);
     return (
         <div className={styles['discover-container']}>
             <MainNavBar className={styles['nav-bar']} />
@@ -36,9 +40,9 @@ const Discover = ({ urlParams, queryParams }) => {
                             className={styles['select-input-container']}
                         />
                     ))}
-                    {/* <Button className={styles['filter-container']}>
+                    <Button className={styles['filter-container']} onClick={openFiltersModal}>
                         <Icon className={styles['filter-icon']} icon={'ic_filter'} />
-                    </Button> */}
+                    </Button>
                     <div className={styles['spacing']} />
                     {
                         paginateInput !== null ?
@@ -88,6 +92,14 @@ const Discover = ({ urlParams, queryParams }) => {
                         <div className={styles['meta-preview-container']} />
                 }
             </div>
+            {
+                filtersModalOpen ?
+                    <Modal>
+                        {/* TODO */}
+                    </Modal>
+                    :
+                    null
+            }
         </div>
     );
 };