feat(explorer): Use title bar as bread crumbs for current working dir…

…ectory

package.json

@@ -41,6 +41,7 @@
     "react": "^16.11.0",
     "react-code-input": "^3.8.1",
     "react-dom": "^16.11.0",
+    "react-dropzone": "^10.1.10",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.1.1",
     "react-rnd": "^10.1.1",

src/js/apps/Explorer/Explorer.tsx

@@ -16,17 +16,17 @@ import WasmFs from "@wasmer/wasmfs";
 import Folder from './components/Folder';
 import File from './components/File';
 import Dirent from 'memfs/lib/Dirent';
+import { useDropzone } from 'react-dropzone'
 const styles = require('./Explorer.scss');
 
 export default function Explorer() {
     const [isLocationsOpen, setLocationsOpen] = React.useState(true);
     const [files, setFiles] = React.useState<Dirent[]>([]);
-    const [path, setPath] = React.useState('');
+    const [path, setPath] = React.useState('/');
 
     React.useEffect(() => {
         const wasmFs = InstanceBag.get<WasmFs>('fs');
-        const newPath = path === '' ? '/' : path;
-        const filesAndDirectories: any = wasmFs.fs.readdirSync(newPath, {
+        const filesAndDirectories: any = wasmFs.fs.readdirSync(path, {
             encoding: "utf8",
             withFileTypes: true,
         });
@@ -37,24 +37,36 @@ export default function Explorer() {
     function handleFileClick(file: Dirent) {
         // Directories should just navigate to the next page
         if (file.isDirectory()) {
-            setPath(`${path}/${file.name}`);
+            // We have to make the path pretty so we filter out all the empty spaces
+            const splittedPath = path.split('/').filter(p => p);
+            let newPath = `/${splittedPath.join('/')}/${file.name}`;
+
+            // Double // are ugly so we remove them
+            if (newPath.startsWith('//')) {
+                newPath = newPath.slice(1);
+            }
+
+            setPath(newPath);
         }
     }
 
     function handleFolderUpButtonClick() {
         const splittedPath = path.split('/');
         splittedPath.pop();
 
-        const newPath = splittedPath.join('/');
+        let newPath = splittedPath.join('/');
+
+        // Prettify the title bar
+        if (newPath === '') {
+            newPath = '/';
+        }
+
         setPath(newPath);
     }
 
-    const currentPathFolder = path.split('/').pop();
-    const appHeaderTitle = currentPathFolder === '' ? 'Files' : currentPathFolder;
-
     return (
         <>
-            <AppHeader title={appHeaderTitle} toolbar={
+            <AppHeader title={path} toolbar={
                 <>
                     <IconButton>
                         <CreateNewFolderOutlinedIcon className={styles.toolbarButton} />