From df5ac3fb4cbfe20a08c4e2c987eb7c3bd93ea675 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 7 Aug 2020 18:48:39 -0300
Subject: [PATCH] :sparkles: make sidebar close on file click

---
 client/components/mobile/Explorer.jsx      |  2 +-
 client/components/mobile/Sidebar.jsx       |  2 --
 client/components/useAsModal.jsx           |  2 --
 client/modules/IDE/components/FileNode.jsx | 15 +++++++++++----
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/components/mobile/Explorer.jsx b/client/components/mobile/Explorer.jsx
index 4e1e902f..40455e24 100644
--- a/client/components/mobile/Explorer.jsx
+++ b/client/components/mobile/Explorer.jsx
@@ -7,7 +7,7 @@ import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 const Explorer = ({ id, canEdit, onPressClose }) => (
   <Sidebar title="Files" onPressClose={onPressClose}>
-    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={onPressClose} />
+    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
   </Sidebar>
 );
 
diff --git a/client/components/mobile/Sidebar.jsx b/client/components/mobile/Sidebar.jsx
index 5e872699..cefd46bd 100644
--- a/client/components/mobile/Sidebar.jsx
+++ b/client/components/mobile/Sidebar.jsx
@@ -20,8 +20,6 @@ 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 &&
diff --git a/client/components/useAsModal.jsx b/client/components/useAsModal.jsx
index ca69fc8d..092550e4 100644
--- a/client/components/useAsModal.jsx
+++ b/client/components/useAsModal.jsx
@@ -15,8 +15,6 @@ const BackgroundOverlay = styled.div`
 export default (Element, hasOverlay = false) => {
   const [visible, toggle, setRef] = useModalBehavior();
 
-  // const Comp = styled(() => Element).attrs({ onPressClose: toggle });
-
   const wrapper = () => (visible &&
     <div>
       {hasOverlay && <BackgroundOverlay />}
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index e7869f26..d0a10ef8 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -108,10 +108,15 @@ export class FileNode extends React.Component {
   handleFileClick = (event) => {
     event.stopPropagation();
     const { isDeleting } = this.state;
-    const { id, setSelectedFile, name } = this.props;
+    const {
+      id, setSelectedFile, name, onClickFile
+    } = this.props;
     if (name !== 'root' && !isDeleting) {
       setSelectedFile(id);
     }
+
+    // debugger; // eslint-disable-line
+    if (onClickFile) { onClickFile(); }
   }
 
   handleFileNameChange = (event) => {
@@ -214,7 +219,7 @@ export class FileNode extends React.Component {
 
   renderChild = childId => (
     <li key={childId}>
-      <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} />
+      <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} onClickFile={this.props.onClickFile} />
     </li>
   )
 
@@ -233,7 +238,7 @@ export class FileNode extends React.Component {
     const isRoot = this.props.name === 'root';
 
     return (
-      <div className={itemClass}>
+      <div className={itemClass} >
         { !isRoot &&
           <div className="file-item__content" onContextMenu={this.toggleFileOptions}>
             <span className="file-item__spacer"></span>
@@ -382,10 +387,12 @@ FileNode.propTypes = {
   hideFolderChildren: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,
   openUploadFileModal: PropTypes.func.isRequired,
-  authenticated: PropTypes.bool.isRequired
+  authenticated: PropTypes.bool.isRequired,
+  onClickFile: PropTypes.func
 };
 
 FileNode.defaultProps = {
+  onClickFile: null,
   parentId: '0',
   isSelectedFile: false,
   isFolderClosed: false,