From 8339be1683820e850ff613e5cc8991f5a92598be Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 29 Jul 2020 15:15:55 -0300
Subject: [PATCH] :recycle: create useHideOnBlur hook

---
 client/components/OverlayManager.jsx       | 20 +++++---------------
 client/modules/Mobile/MobileSketchView.jsx |  5 ++---
 client/utils/custom-hooks.js               | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/client/components/OverlayManager.jsx b/client/components/OverlayManager.jsx
index 53025a7e..dd39284e 100644
--- a/client/components/OverlayManager.jsx
+++ b/client/components/OverlayManager.jsx
@@ -5,22 +5,10 @@ import { createPortal } from 'react-dom';
 import Dropdown from './Dropdown';
 
 import { PreferencesIcon } from '../common/icons';
+import { useHideOnBlur } from '../utils/custom-hooks';
+
 
 const OverlayManager = ({ overlay, hideOverlay }) => {
-  const ref = useRef({});
-
-  const handleClickOutside = ({ target }) => {
-    if (ref && ref.current && !ref.current.contains(target)) {
-      hideOverlay();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [ref]);
-
   const headerNavOptions = [
     {
       icon: PreferencesIcon,
@@ -35,9 +23,11 @@ const OverlayManager = ({ overlay, hideOverlay }) => {
     },
   ];
 
+  const setRef = useHideOnBlur(hideOverlay);
+
   const jsx = (
     <React.Fragment>
-      <div ref={(r) => { ref.current = r; }} >
+      <div ref={setRef} >
         {overlay === 'dropdown' && <Dropdown items={headerNavOptions} />}
       </div>
     </React.Fragment>
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index da4e9829..abfbc11f 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-import { connect, useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
@@ -25,7 +24,7 @@ const Content = styled.div`
   margin-top: ${remSize(68)};
 `;
 
-const MobileSketchView = (props) => {
+const MobileSketchView = () => {
   const { files, ide, preferences } = useSelector(state => state);
 
   const htmlFile = useSelector(state => getHTMLFile(state.files));
diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js
index 7e0a7b8f..9cacdd41 100644
--- a/client/utils/custom-hooks.js
+++ b/client/utils/custom-hooks.js
@@ -13,3 +13,21 @@ export const useDidUpdate = (callback, deps) => {
     }
   }, deps);
 };
+
+export const useHideOnBlur = (hideOverlay) => {
+  const ref = useRef({});
+  const setRef = (r) => { ref.current = r; };
+
+  const handleClickOutside = ({ target }) => {
+    if (ref && ref.current && !ref.current.contains(target)) {
+      hideOverlay();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [ref]);
+
+  return setRef;
+};