add dual browser functionality

src/App.js

@@ -238,9 +238,6 @@ class App extends Component {
     if (browserFs === null) browserFs = ["", ""]
     if (currentPath === null) currentPath = ["/", "/"]
 
-    browserFs[0] = name
-    currentPath[0] = "/"
-
     sessionStorage.setItem("browserFs", JSON.stringify(browserFs))
     sessionStorage.setItem("currentPath", JSON.stringify(currentPath))
 

src/assets/icons/browserDual.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#3f79ad" d="M0 2v13h15v-13h-15zM13 3h1v1h-1v-1zM7 14h-6v-9h6v9zM14 14h-6v-9h6v9z"></path>
+</svg>

src/assets/icons/browserSingle.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#3f79ad" d="M0 4v11h16v-14h-16v3zM14 2h1v1h-1v-1zM1 4h14v10h-14v-10z"></path>
+</svg>

src/components/fileBrowserMenu.jsx

@@ -2,9 +2,12 @@ import React, { Component } from 'react'
 import { Button, Cross, PopupContainer, PopupTitle } from '../styled'
 import API from '../utils/API'
 import FileBrowser from './fileBrowser'
-import { FileBrowserRemotes, FileBrowsersContainer, FileBrowserWrapper } from './fileBrowser.styled'
+import { BrowserSettingButton, FileBrowserRemotes, FileBrowsersContainer, FileBrowserSettings, FileBrowserWrapper } from './fileBrowser.styled'
 import assert from 'assert'
 
+import BrowserSingle from '../assets/icons/browserSingle.svg'
+import BrowserDual from '../assets/icons/browserDual.svg'
+
 class FileBrowserMenu extends Component {
   constructor() {
     super()
@@ -21,7 +24,8 @@ class FileBrowserMenu extends Component {
       browserFs: ["", ""],
       loading: [false, false],
       errMessage: "",
-      dualBrowser: false
+      dualBrowser: false,
+      activeBrowser: -1
     }
   }
 
@@ -33,6 +37,7 @@ class FileBrowserMenu extends Component {
 
     setTimeout(() => {
       this.getFiles(0, currentPath[0])
+      .catch(() => {})
     }, 50)
   }
 
@@ -111,6 +116,15 @@ class FileBrowserMenu extends Component {
     })
   }
 
+  switchBrowserMode = () => {
+    if (this.state.dualBrowser) return this.setState({ activeBrowser: -1, dualBrowser: false })
+    return this.setState({ activeBrowser: 1, dualBrowser: true })
+  }
+
+  setActiveBrowser = activeBrowser => {
+    if (this.state.dualBrowser) this.setState({ activeBrowser })
+  }
+
   setRemote = (brIndex, remoteName) => {
     let { browserFs, currentPath } = this.state
     browserFs[brIndex] = remoteName
@@ -129,7 +143,7 @@ class FileBrowserMenu extends Component {
   }
 
   render = () => {
-    const { files, currentPath, loading } = this.state
+    const { files, currentPath, loading, dualBrowser, activeBrowser } = this.state
 
     return (
       <PopupContainer>
@@ -137,18 +151,38 @@ class FileBrowserMenu extends Component {
         <Cross onClick={this.props.close}> Close </Cross>
 
         <FileBrowsersContainer>
-          <FileBrowserWrapper>
-            <FileBrowserRemotes>
-              { this.renderRemoteButtons(0) }
-            </FileBrowserRemotes>
+          <FileBrowserRemotes>
+            { this.renderRemoteButtons(0) }
 
+            <FileBrowserSettings>
+              <BrowserSettingButton onClick={this.switchBrowserMode}>
+                <img src={dualBrowser ? BrowserSingle : BrowserDual} alt={dualBrowser ? "single browser" : "dual browser"} width="16" height="16" />
+              </BrowserSettingButton>
+            </FileBrowserSettings>
+          </FileBrowserRemotes>
+
+          <FileBrowserWrapper>
             <FileBrowser
+              setActive={() => this.setActiveBrowser(0)}
               action={(a, p) => this.doAction(0, a, p)}
               files={files[0]}
               updateFiles={path => this.getFiles(0, path)}
               currentPath={currentPath[0]}
               loading={loading[0]}
+              active={activeBrowser === 0}
             />
+            {
+              dualBrowser &&
+              <FileBrowser
+              setActive={() => this.setActiveBrowser(1)}
+                action={(a, p) => this.doAction(1, a, p)}
+                files={files[1]}
+                updateFiles={path => this.getFiles(1, path)}
+                currentPath={currentPath[1]}
+                loading={loading[1]}
+                active={activeBrowser === 1}
+              />
+            }
           </FileBrowserWrapper>
         </FileBrowsersContainer>
       </PopupContainer>