added option to hide scroll bars, and to hide folder tree

src/components/FolderTree/FolderTree.js

@@ -5,7 +5,7 @@ import FolderTreeStorage from ".././FolderTreeStorage"
 const FolderTree = (props) => (
 
     <div className="folder-tree__main">
-        <div className="folder-tree__box">
+        <div className={props.state.showFolderTreeScrollBars ? "folder-tree__box" : "folder-tree__box-hide-scroll-bars"}>
 
             {(env.activeSubscription || !env.commercialMode) ? <FolderTreeStorage type={"mongo"}/> : undefined}
             {env.s3Enabled ? <FolderTreeStorage type={"s3"}/> : undefined}

src/components/FolderTree/index.js

@@ -5,14 +5,41 @@ class FolderTreeContrainer extends React.Component {
 
     constructor(props) {
         super(props);
+
+        this.state = {
+            hideFolderTree: false,
+            showFolderTreeScrollBars: false
+        }
     }
 
     componentDidMount = () => {
 
+        //folder-tree__box-hide-scroll-bars
+
+        const hideFolderTree = localStorage.getItem("hide-folder-tree");
+        const showFolderTreeScrollBars = localStorage.getItem("show-folder-tree-scroll-bars")
+
+        //console.log("show folder tree scroll bars");
+
+        if (hideFolderTree) {
+
+            this.setState(() => ({
+                hideFolderTree,
+            }))
+
+        } else {
+
+            this.setState(() => ({
+                showFolderTreeScrollBars
+            }))
+        }
     }
 
     render() {
-        return <FolderTree />
+        
+        if (this.state.hideFolderTree) return <div></div>
+
+        return <FolderTree state={this.state}/>
     }
 }
 

src/components/FolderTreeStorage/index.js

@@ -59,7 +59,19 @@ class FolderTreeStorageContainer extends React.Component {
 
     componentDidMount = () => {
 
-        //this.getFolders();
+        // const hideFolderTree = localStorage.getItem("hide-folder-tree");
+
+        // if (hideFolderTree) {
+
+        //     this.setState(() => ({
+        //         hideFolderTree
+        //     }))
+            
+        // } else {
+        //     this.getFolders();
+        // }
+
+        this.getFolders();
     }
 
     componentDidUpdate = () => {
@@ -98,6 +110,7 @@ class FolderTreeStorageContainer extends React.Component {
     }
 
     render() {
+
         return <FolderTreeStorage arrowClick={this.arrowClick} state={this.state} {...this.props}/>
     }
 }

src/components/LeftSection/LeftSection.js

@@ -60,7 +60,7 @@ class LeftSection extends React.Component {
 						<FolderTree />
 						
 					</div>
-					<div class="utility__buttons">
+					<div class={this.props.state.hideFolderTree ? "utility__buttons utility__buttons_no_border" : "utility__buttons"}>
 						<ul>
 							{/* <li><a href="#"><span><img src="/assets/utility1.svg" alt="utility"/></span> Shared with me</a></li>
 							<li><a href="#"><span><img src="/assets/utility2.svg" alt="utility"/></span> Recent Files</a></li>

src/components/LeftSection/index.js

@@ -19,6 +19,7 @@ class LeftSectionContainer extends React.Component {
 
         this.state = {
             open: false,
+            hideFolderTree: false,
         }
     }
 
@@ -64,6 +65,15 @@ class LeftSectionContainer extends React.Component {
 
     componentDidMount = () => {
         document.addEventListener('mousedown', this.handleClickOutside);
+
+        const hideFolderTree = localStorage.getItem("hide-folder-tree");
+
+        if (hideFolderTree) {
+
+            this.setState(() => ({
+                hideFolderTree
+            }))
+        }
     }
 
     componentWillUnmount = () => {

src/components/SettingsPage/index.js

@@ -53,6 +53,8 @@ class SettingsPageContainer extends React.Component {
             descendingSort: true,
             dropToUpload: true,
             doubleClickFolders: false,
+            hideFolderTree: false,
+            showFolderTreeScrollBars: false
         }
 
         this.uploadReference = React.createRef()
@@ -99,7 +101,9 @@ class SettingsPageContainer extends React.Component {
       const nameMode = window.localStorage.getItem("name-mode");
       const ascMode = window.localStorage.getItem("asc-mode");
       const dropToUpload = window.localStorage.getItem("non_drop-mode");
-      const doubleClickFolders = window.localStorage.getItem("double-click-folders")
+      const doubleClickFolders = window.localStorage.getItem("double-click-folders");
+      const hideFolderTree = window.localStorage.getItem("hide-folder-tree");
+      const showFolderTreeScrollBars = window.localStorage.getItem("show-folder-tree-scroll-bars")
 
       this.setState(() => {
         return {
@@ -109,6 +113,8 @@ class SettingsPageContainer extends React.Component {
           descendingSort: !ascMode,
           dropToUpload: !dropToUpload,
           doubleClickFolders: doubleClickFolders,
+          hideFolderTree: hideFolderTree,
+          showFolderTreeScrollBars
         }
       })
     }
@@ -786,6 +792,44 @@ class SettingsPageContainer extends React.Component {
     })
   }
 
+  hideFolderTreeOnChange = () =>{
+
+    if (this.state.hideFolderTree) {
+
+      window.localStorage.removeItem("hide-folder-tree");
+
+    } else {
+
+      console.log("setting hide folder tree to true")
+
+      window.localStorage.setItem("hide-folder-tree", true);
+    }
+    
+    this.setState(() => ({
+      ...this.state,
+      hideFolderTree: !this.state.hideFolderTree
+    }))
+
+  }
+
+  showFolderTreeScrollBarsOnChange = () => {
+
+    if (this.state.showFolderTreeScrollBars) {
+
+      window.localStorage.removeItem("show-folder-tree-scroll-bars");
+
+    } else {
+
+      window.localStorage.setItem("show-folder-tree-scroll-bars", true);
+    }
+
+    this.setState(() => ({
+      ...this.state,
+      showFolderTreeScrollBars: !this.state.showFolderTreeScrollBars
+    }))
+
+  }
+
   render() {
     return (
 
@@ -1259,6 +1303,14 @@ class SettingsPageContainer extends React.Component {
               <input checked={this.state.doubleClickFolders} onChange={this.doubleClickOnChange} type="checkbox" id="test5" />
               <label for="test5">Double Click To Enter Folders On Mobile</label>
             </p>
+            <p>
+              <input checked={this.state.hideFolderTree} onChange={this.hideFolderTreeOnChange} type="checkbox" id="test6" />
+              <label for="test6">Hide Folder Tree</label>
+            </p>
+            <p>
+              <input checked={this.state.showFolderTreeScrollBars} onChange={this.showFolderTreeScrollBarsOnChange} type="checkbox" id="test7" />
+              <label for="test7">Show Folder Tree Scroll Bars</label>
+            </p>
           </div>
         </div>
 

src/styles/components/_Folder-tree.scss

@@ -28,6 +28,22 @@
     // border-radius: 10px;
 }
 
+.folder-tree__box-hide-scroll-bars {
+
+    width: 95%;
+    height: 85%;
+    overflow: scroll;
+
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0px;
+        background: transparent
+    }
+
+}
+
 .folder-tree__storage {
     // width: 100%;
     // height: 55px;

src/styles/components/_LeftSection.scss

@@ -547,4 +547,8 @@
     // height: inherit;
     // /* color: red; */
     // background: #3f85f0;
+}
+
+.utility__buttons_no_border {
+	border: none !important;
 }