From faaa6d2edbcd88e26c6c7d3d6dd0835ffaa7671b Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 7 Aug 2020 18:32:50 -0300
Subject: [PATCH] :sparkles: make sidebar close via hook toggle

---
 client/components/mobile/Explorer.jsx      | 10 ++++++----
 client/components/mobile/Sidebar.jsx       |  4 +++-
 client/components/useAsModal.jsx           |  6 +++++-
 client/modules/IDE/pages/MobileIDEView.jsx |  8 ++++++--
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/components/mobile/Explorer.jsx b/client/components/mobile/Explorer.jsx
index 6d4965b3..4e1e902f 100644
--- a/client/components/mobile/Explorer.jsx
+++ b/client/components/mobile/Explorer.jsx
@@ -5,18 +5,20 @@ import Sidebar from './Sidebar';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 
-const Explorer = ({ id, canEdit }) => (
-  <Sidebar title="Files">
-    <ConnectedFileNode id={id} canEdit={canEdit} />
+const Explorer = ({ id, canEdit, onPressClose }) => (
+  <Sidebar title="Files" onPressClose={onPressClose}>
+    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={onPressClose} />
   </Sidebar>
 );
 
 Explorer.propTypes = {
   id: PropTypes.number.isRequired,
+  onPressClose: PropTypes.func,
   canEdit: PropTypes.bool
 };
 Explorer.defaultProps = {
-  canEdit: false
+  canEdit: false,
+  onPressClose: () => {}
 };
 
 export default Explorer;
diff --git a/client/components/mobile/Sidebar.jsx b/client/components/mobile/Sidebar.jsx
index 4e2cfda9..5e872699 100644
--- a/client/components/mobile/Sidebar.jsx
+++ b/client/components/mobile/Sidebar.jsx
@@ -20,11 +20,13 @@ const SidebarWrapper = styled.div`
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
 `;
 
+// onClick={() => alert('haha')}
+
 const Sidebar = ({ title, onPressClose, children }) => (
   <SidebarWrapper>
     {title &&
     <Header slim title={title} fixed={false}>
-      <IconButton onPress={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
+      <IconButton onClick={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
     </Header>}
     {children}
   </SidebarWrapper>
diff --git a/client/components/useAsModal.jsx b/client/components/useAsModal.jsx
index a8f4d7d1..ca69fc8d 100644
--- a/client/components/useAsModal.jsx
+++ b/client/components/useAsModal.jsx
@@ -20,7 +20,11 @@ export default (Element, hasOverlay = false) => {
   const wrapper = () => (visible &&
     <div>
       {hasOverlay && <BackgroundOverlay />}
-      <div ref={setRef}> {Element} </div>
+      <div ref={setRef}>
+        { (typeof (Element) === 'function')
+          ? Element(toggle)
+          : Element}
+      </div>
     </div>);
 
   return [toggle, wrapper];
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 2d6fb526..c398f6b0 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -116,8 +116,12 @@ const MobileIDEView = (props) => {
     align="right"
   />);
 
-
-  const [toggleExplorer, Explorer] = useAsModal(<MobileExplorer id={getRootFileID(files)} canEdit={false} />, true);
+  const [toggleExplorer, Explorer] = useAsModal(toggle =>
+    (<MobileExplorer
+      id={getRootFileID(files)}
+      canEdit={false}
+      onPressClose={toggle}
+    />), true);
 
   // toggle sidebar starting opened
   // useEffect(toggleExplorer, []);