From b4fc9883e29071e3ce1608f457986eef3f662b80 Mon Sep 17 00:00:00 2001
From: Max Berman <max@bigchaindb.com>
Date: Tue, 14 Jan 2020 13:32:15 +0100
Subject: [PATCH] handle click outside to collapse Network switcher dropdown,
 remove rendering network switcher in case of metamask

---
 .../molecules/NetworkSwitcher.module.scss     |  4 +-
 .../components/molecules/NetworkSwitcher.tsx  | 37 ++++++++++++++-----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/client/src/components/molecules/NetworkSwitcher.module.scss b/client/src/components/molecules/NetworkSwitcher.module.scss
index 0f25406..24c91b5 100644
--- a/client/src/components/molecules/NetworkSwitcher.module.scss
+++ b/client/src/components/molecules/NetworkSwitcher.module.scss
@@ -28,11 +28,11 @@
 .networkList {
     position: absolute;
     border: 1px solid $brand-grey-lighter;
-    padding: 8px;
     border-radius: $border-radius;
     max-width: 200px;
     display: none;
     margin: 0;
+    padding: 0;
     width: 100%;
 }
 
@@ -55,6 +55,7 @@
     cursor: pointer;
     font-size: $font-size-mini;
     text-align: left;
+    padding: 4px;
 }
 
 .networkList li span {
@@ -64,6 +65,7 @@
 .networkList li:hover {
     color: $brand-violet;
     font-size: $font-size-mini;
+    background-color: $brand-grey-lighter;
 }
 
 .networkList li:before {
diff --git a/client/src/components/molecules/NetworkSwitcher.tsx b/client/src/components/molecules/NetworkSwitcher.tsx
index 295c0fa..90f905c 100644
--- a/client/src/components/molecules/NetworkSwitcher.tsx
+++ b/client/src/components/molecules/NetworkSwitcher.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react'
+import React, { useState, useContext, useEffect, useRef } from 'react'
 import { urlq } from '../../utils/utils'
 import { CONNECTIONS } from '../../config'
 import { User } from '../../context'
@@ -21,8 +21,19 @@ export const oceanConfig =
 
 /* NETWORK SWITCHER */
 export function NetworkSwitcher() {
+    const node: any = useRef()
     const [isToggled, setIsToggled] = useState(false)
-    /*    
+
+    useEffect(() => {
+        // Handle click outside to collapse Network switcher dropdown
+        // add listener when mounted
+        document.addEventListener('mousedown', handleTogle)
+        // return function when unmounted
+        return () => {
+            document.removeEventListener('mousedown', handleTogle)
+        }
+    }, [])
+    /*  
     useEffect(() => {
         if (networkUrlParam !== '') {
             switchNetwork(networkUrlParam)
@@ -30,24 +41,30 @@ export function NetworkSwitcher() {
     }, []) 
     */
 
-    const handleTogle = () => {
-        setIsToggled(!isToggled)
+    const handleTogle = (e: any) => {
+        const isClickedInside = node.current.contains(e.target)
+        setIsToggled(isClickedInside)
     }
 
-    const { network } = useContext(User)
+    const { network, isBurner } = useContext(User)
 
-    const switchNetwork = (networkName: string): any =>
+    console.log(isBurner)
+
+    const switchNetwork = (networkName: string): any => {
         // Force page to get refreshed
-        (window.location.href = `${window.location.origin}?network=${networkName}`)
-    //userContext.switchNetwork(networkName, getNetworkConfig(networkName))
+        window.location.href = `${window.location.origin}?network=${networkName}`
+        //userContext.switchNetwork(networkName, getNetworkConfig(networkName))
+        setIsToggled(false) // for the case without force page refresh
+    }
 
-    return (
+    return !isBurner ? null : (
         <div
+            ref={node}
             className={`${styles.networkListWrapper} ${
                 isToggled ? styles.on : ''
             }`}
         >
-            <em onClick={() => handleTogle()}>
+            <em onClick={e => handleTogle(e)}>
                 <span>Change Network</span>
             </em>
             <ul className={styles.networkList}>