From c4e6836ebb8a506583c459a3c4bfeacb58125844 Mon Sep 17 00:00:00 2001
From: Neelesh <neeleshsingh767@gmail.com>
Date: Fri, 4 Sep 2020 22:45:43 +0530
Subject: [PATCH] Fixing add file and add folder to not open at the same time

---
 client/modules/IDE/components/NewFileModal.jsx  | 13 +++++++++++++
 .../modules/IDE/components/NewFolderModal.jsx   | 17 +++++++++++++++++
 client/modules/IDE/reducers/ide.js              | 12 ++++++++++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx
index 791cb0afa0..3cb9904df3 100644
--- a/client/modules/IDE/components/NewFileModal.jsx
+++ b/client/modules/IDE/components/NewFileModal.jsx
@@ -20,10 +20,23 @@ class NewFileModal extends React.Component {
   constructor(props) {
     super(props);
     this.focusOnModal = this.focusOnModal.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
   }
 
   componentDidMount() {
     this.focusOnModal();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.modal)) return;
+
+    this.props.closeNewFileModal();
   }
 
   focusOnModal() {
diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx
index bf897afa86..fce0ba50c2 100644
--- a/client/modules/IDE/components/NewFolderModal.jsx
+++ b/client/modules/IDE/components/NewFolderModal.jsx
@@ -8,8 +8,25 @@ import NewFolderForm from './NewFolderForm';
 import ExitIcon from '../../../images/exit.svg';
 
 class NewFolderModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+
   componentDidMount() {
     this.newFolderModal.focus();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.newFolderModal)) return;
+
+    this.props.closeModal();
   }
 
   render() {
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index db2c31e6b2..91e1080cb7 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/client/modules/IDE/reducers/ide.js
@@ -40,7 +40,11 @@ const ide = (state = initialState, action) => {
     case ActionTypes.CONSOLE_EVENT:
       return Object.assign({}, state, { consoleEvent: action.event });
     case ActionTypes.SHOW_MODAL:
-      return Object.assign({}, state, { modalIsVisible: true, parentId: action.parentId });
+      return Object.assign({}, state, {
+        modalIsVisible: true,
+        parentId: action.parentId,
+        newFolderModalVisible: false
+      });
     case ActionTypes.HIDE_MODAL:
       return Object.assign({}, state, { modalIsVisible: false });
     case ActionTypes.COLLAPSE_SIDEBAR:
@@ -62,7 +66,11 @@ const ide = (state = initialState, action) => {
     case ActionTypes.CLOSE_PROJECT_OPTIONS:
       return Object.assign({}, state, { projectOptionsVisible: false });
     case ActionTypes.SHOW_NEW_FOLDER_MODAL:
-      return Object.assign({}, state, { newFolderModalVisible: true, parentId: action.parentId });
+      return Object.assign({}, state, {
+        newFolderModalVisible: true,
+        parentId: action.parentId,
+        modalIsVisible: false
+      });
     case ActionTypes.CLOSE_NEW_FOLDER_MODAL:
       return Object.assign({}, state, { newFolderModalVisible: false });
     case ActionTypes.SHOW_SHARE_MODAL: