From 29260cafaa6cc2b8e2091feeeac94daa695e237a Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 25 Oct 2019 12:22:06 +0300
Subject: [PATCH] open/close AddonPrompt fixed

---
 src/routes/Addons/AddonPrompt/AddonPrompt.js | 6 +++---
 src/routes/Addons/Addons.js                  | 8 ++++----
 src/routes/Addons/useSelectedAddon.js        | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/Addons/AddonPrompt/AddonPrompt.js b/src/routes/Addons/AddonPrompt/AddonPrompt.js
index da722eb87..34938be38 100644
--- a/src/routes/Addons/AddonPrompt/AddonPrompt.js
+++ b/src/routes/Addons/AddonPrompt/AddonPrompt.js
@@ -6,7 +6,7 @@ const { useRouteFocused } = require('stremio-router');
 const { Button } = require('stremio/common');
 const styles = require('./styles');
 
-const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel }) => {
+const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel, onClick }) => {
     const focusable = useRouteFocused();
     React.useEffect(() => {
         const onKeyUp = (event) => {
@@ -22,7 +22,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
         };
     }, [cancel, focusable]);
     return (
-        <div className={classnames(className, styles['addon-prompt-container'])}>
+        <div className={classnames(className, styles['addon-prompt-container'])} onClick={onClick}>
             <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
                 <Icon className={styles['icon']} icon={'ic_x'} />
             </Button>
@@ -104,7 +104,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
                 }
             </div>
             <div className={styles['buttons-container']}>
-                <Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'cancel'} onClick={cancel}>
+                <Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={cancel}>
                     <div className={styles['label']}>Cancel</div>
                 </Button>
                 <Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'}>
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 93a1630dc..576147ea0 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -14,7 +14,7 @@ const Addons = ({ urlParams, queryParams }) => {
         setQuery(event.currentTarget.value);
     }, []);
     const [addons, dropdowns] = useAddons(urlParams, queryParams);
-    const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
+    const [selectedAddon, clearSelectedAddon, setSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
     const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.clearSelectedAddonPrevented) {
             clearSelectedAddon();
@@ -53,15 +53,15 @@ const Addons = ({ urlParams, queryParams }) => {
                                 (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
                             ))
                             .map((addon, index) => (
-                                <Addon {...addon.manifest} key={index} className={styles['addon']} />
+                                <Addon {...addon.manifest} key={index} className={styles['addon']} toggle={() => setSelectedAddon(addon)} />
                             ))
                     }
                 </div>
                 {
                     selectedAddon !== null ?
                         <Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
-                            <div className={styles['addon-prompt-container']} onClick={addonPromptOnClick}>
-                                <AddonPrompt {...selectedAddon} className={styles['addon-prompt']} cancel={clearSelectedAddon} />
+                            <div className={styles['addon-prompt-container']}>
+                                <AddonPrompt {...selectedAddon.manifest} transportUrl={selectedAddon.transportUrl} official={selectedAddon.flags.official} className={styles['addon-prompt']} cancel={clearSelectedAddon} onClick={addonPromptOnClick} />
                             </div>
                         </Modal>
                         :
diff --git a/src/routes/Addons/useSelectedAddon.js b/src/routes/Addons/useSelectedAddon.js
index e770cc5b8..c0937277d 100644
--- a/src/routes/Addons/useSelectedAddon.js
+++ b/src/routes/Addons/useSelectedAddon.js
@@ -30,7 +30,7 @@ const useSelectedAddon = (transportUrl) => {
             setAddon(null);
         }
     }, [active, locationHash]);
-    return [addon, clear];
+    return [addon, clear, setAddon];
 };
 
 module.exports = useSelectedAddon;