feat(explorer): Added support for file exploring

package.json

@@ -21,31 +21,28 @@
   "license": "ISC",
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@material-ui/core": "^4.5.1",
+    "@material-ui/core": "^4.5.2",
     "@material-ui/icons": "^4.5.1",
     "@types/react-loadable": "^5.5.2",
     "@types/react-resizable": "^1.7.1",
-    "@wasmer/wasm-terminal": "^0.3.2",
-    "@wasmer/wasm-transformer": "^0.3.2",
+    "@wasmer/wasm-terminal": "^0.4.0",
+    "@wasmer/wasm-transformer": "^0.4.0",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.5.2",
     "cross-env": "^6.0.3",
     "css-loader": "^3.2.0",
-    "ethers": "^4.0.38",
+    "ethers": "^4.0.39",
     "inherits": "^2.0.4",
     "material-ui": "^0.20.2",
     "material-ui-dialogs": "^1.3.0",
-    "playos-sdk": "^1.8.0",
     "postcss-modules": "^1.4.1",
     "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-code-input": "^3.8.1",
     "react-dom": "^16.11.0",
-    "react-draggable": "^4.0.3",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.1.1",
-    "react-resizable": "^1.9.0",
     "react-rnd": "^10.1.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
@@ -60,9 +57,10 @@
     "style-loader": "^1.0.0",
     "terminal-in-react": "^4.3.1",
     "ts-loader": "^6.2.1",
+    "use-resize-observer": "^4.0.0",
     "web3": "^1.2.2",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
+    "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
     "whatwg-fetch": "^3.0.0"
   },
@@ -78,11 +76,11 @@
     "@types/react-router": "^5.1.2",
     "@types/react-router-redux": "^5.0.18",
     "@types/react-swipeable-views": "^0.13.0",
-    "@types/web3": "^1.0.20",
+    "@types/web3": "^1.2.2",
     "babel-eslint": "10.0.3",
     "babel-loader": "^8.0.6",
     "documentation": "12.1.2",
-    "eslint": "6.5.1",
+    "eslint": "6.6.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-babel": "5.3.0",
@@ -93,6 +91,7 @@
     "jest": "^24.9.0",
     "node-sass": "^4.13.0",
     "standard-version": "^7.0.0",
-    "typescript": "^3.6.4"
+    "typescript": "^3.6.4",
+    "url-loader": "^2.2.0"
   }
 }

src/js/App.tsx

@@ -24,7 +24,9 @@ export default class App {
             <Provider store={store}>
                 <ConnectedRouter history={history}>
                     <HashRouter>
-                        {/* <Redirect from="/" to="/os/choose" /> */}
+                        <Route exact path="/">
+                            <Redirect exact from="/" to="/os/choose" />
+                        </Route>
                         <Route path="/store" component={LoadableStoreApp} />
                         <Route path="/os" component={DefaultLayout} />
                     </HashRouter>

src/js/InstanceBag.ts

@@ -5,7 +5,7 @@ class InstanceBag {
         store[key] = value;
     }
 
-    static get(key: string) {
+    static get<T>(key: string): T {
         return store[key];
     }
 }

src/js/apps/Explorer/Explorer.scss

@@ -0,0 +1,5 @@
+.files {
+    display: flex;
+    // justify-content: space-evenly;
+    flex-flow: wrap;
+}

src/js/apps/Explorer/Explorer.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import AppHeader from '../../components/molecules/AppHeader';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import FolderIcon from '@material-ui/icons/Folder';
+import ListItemText from '@material-ui/core/ListItemText';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import InstanceBag from '../../InstanceBag';
+import WasmFs from "@wasmer/wasmfs";
+import Folder from './components/Folder';
+import File from './components/File';
+import Dirent from 'memfs/lib/Dirent';
+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('/');
+
+    React.useEffect(() => {
+        const wasmFs = InstanceBag.get<WasmFs>('fs');
+        const filesAndDirectories: any = wasmFs.fs.readdirSync(path, {
+            encoding: "utf8",
+            withFileTypes: true,
+        });
+
+        setFiles(filesAndDirectories);
+    }, [path]);
+
+    function handleFileClick(file: Dirent) {
+        // Directories should just navigate to the next page
+        if (file.isDirectory()) {
+            setPath(`${path}/${file.name}`);
+        }
+    }
+
+    return (
+        <>
+            <AppHeader title="Files" menu={
+                <List>
+                    <ListItem button onClick={() => setLocationsOpen(!isLocationsOpen)}>
+                        <ListItemText primary="Locations" />
+                        {isLocationsOpen ? <ExpandLess /> : <ExpandMore />}
+                    </ListItem>
+                    <Collapse in={isLocationsOpen} unmountOnExit>
+                        <ListItem button onClick={() => setPath('/')}>
+                            <ListItemIcon>
+                                <FolderIcon />
+                            </ListItemIcon>
+                            <ListItemText primary="Main Drive" />
+                        </ListItem>
+                    </Collapse>
+                </List>
+            }>
+                <div className={styles.files}>
+                    {files.map((file) => {
+                        if (file.isDirectory()) {
+                            return <Folder key={file.name.toString()} folder={file} onClick={handleFileClick} />
+                        } else if (file.isFile()) {
+                            return <File key={file.name.toString()} file={file} onClick={handleFileClick} />
+                        }
+                    })}
+                </div>
+            </AppHeader>
+        </>
+    );
+}

src/js/apps/Explorer/components/File/File.scss

@@ -0,0 +1,14 @@
+.file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 25%;
+}
+
+.icon {
+    width: 100%;
+    height: 60%;
+    color: #94a9b3;
+    cursor: pointer;
+
+}

src/js/apps/Explorer/components/File/File.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Dirent from 'memfs/lib/Dirent';
+import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
+const styles = require('./File.scss');
+
+interface Props {
+    file: Dirent;
+    onClick?: (folder: Dirent) => void;
+}
+
+export default function File(props: Props) {
+    return (
+        <div className={styles.file}>
+            <InsertDriveFileOutlinedIcon className={styles.icon} onClick={() => props.onClick(props.file)} />
+            <span>{props.file.name}</span>
+        </div>
+    );
+}

src/js/apps/Explorer/components/File/index.ts

@@ -0,0 +1 @@
+export { default } from './File';

src/js/apps/Explorer/components/FileHeader/FileHeader.scss

@@ -0,0 +1,3 @@
+.appBar {
+    // position: unset;
+}

src/js/apps/Explorer/components/FileHeader/FileHeader.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Typography from '@material-ui/core/Typography';
+import Toolbar from '@material-ui/core/Toolbar';
+const styles = require('./FileHeader.scss');
+
+export default function FileHeader() {
+    return (
+        <AppBar position="static" className={styles.appBar}>
+            <Typography variant="h3" color="inherit">
+                <Toolbar>
+                    Files
+                </Toolbar>
+            </Typography>
+        </AppBar>
+    );
+}

src/js/apps/Explorer/components/FileHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './FileHeader';

src/js/apps/Explorer/components/Folder/Folder.scss

@@ -0,0 +1,13 @@
+.folder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 25%;
+}
+
+.icon {
+    width: 100%;
+    height: 60%;
+    color: #6accf9;
+    cursor: pointer;
+}

src/js/apps/Explorer/components/Folder/Folder.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Dirent from 'memfs/lib/Dirent';
+import FolderIcon from '@material-ui/icons/Folder';
+const styles = require('./Folder.scss');
+
+interface Props {
+    folder: Dirent
+    onClick?: (folder: Dirent) => void;
+}
+
+export default function Folder(props: Props) {
+    return (
+        <div className={styles.folder}>
+            <FolderIcon className={styles.icon} onClick={() => props.onClick(props.folder)}  />
+            <span>{props.folder.name}</span>
+        </div>
+    );
+}

src/js/apps/Explorer/components/Folder/index.ts

@@ -0,0 +1 @@
+export { default } from './Folder';

src/js/apps/Explorer/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import * as Loadable from 'react-loadable';
+
+function Loading() {
+    return (
+        <div>Loading</div>
+    );
+}
+
+const LoadableHomePage = Loadable({
+    loader: () => import('./Explorer'),
+    loading: Loading,
+});
+
+
+export default LoadableHomePage;

src/js/apps/Store/Store.tsx

@@ -16,7 +16,9 @@ function StoreApp() {
                         </ListItem>
                     </List>
                 }
-            />
+            >
+                Hello
+            </AppHeader>
         </div>
     );
 }

src/js/components/molecules/AppHeader/AppHeader.scss

@@ -1,17 +1,47 @@
+$drawer-width: 240px;
+
+.root {
+    display: flex;
+    flex-grow: 1;
+    height: 100%;
+}
+
 .menuButton {
     color: white !important;
 }
 
 .appBar {
-    width: calc(100% - 240px) !important;
-    float: right;
+    position: absolute;
+    background: linear-gradient(-135deg, #17EAD9 0%, #6078EA 100%);
+    color: white;
+    z-index: 9999;
+    // width: calc(100% - #{drawer-width}) !important;
+    // float: right;
+}
+
+.paper {
+    width: $drawer-width;
+    background: white;
+    margin-top: 64px;
+    height: calc(100% - 99px);
+    position: relative;
 }
 
 .drawer {
 
     :global {
         .MuiPaper-root {
-            width: 240px;
+            width: $drawer-width;
         }
     }
 }
+
+.content {
+    flex-grow: 1;
+    background-color: #fafafa;
+    padding: 8px;
+    width: calc(100% - 16px);
+    height: calc(100% - 80px);
+    overflow-y: scroll;
+    margin-top: 64px;
+}

src/js/components/molecules/AppHeader/AppHeader.tsx

@@ -5,30 +5,44 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Drawer from '@material-ui/core/Drawer';
+import Hidden from '@material-ui/core/Hidden';
 const styles = require('./AppHeader.scss');
 
 interface Props {
     title: string;
     menu: React.ReactElement;
+    children: React.ReactNode;
+    headerBackground?: string;
+    headerTextColor?: string;
 }
 
 function AppHeader(props: Props) {
+    const headerBackground = props.headerBackground || '#2196f3';
+    const headerTextColor = props.headerTextColor || '#fff';
+
     return (
-        <>
-            <AppBar position="static" className={styles.appBar}>
+        <div className={styles.root}>
+            <AppBar position="static" className={styles.appBar} style={{ background: headerBackground }}>
                 <Toolbar>
-                    <IconButton edge="start" aria-label="open drawer" className={styles.menuButton}>
+                    {/* <IconButton edge="start" aria-label="open drawer" className={styles.menuButton}>
                         <MenuIcon />
-                    </IconButton>
-                    <Typography variant="h6" noWrap>
+                    </IconButton> */}
+                    <Typography variant="h6" noWrap style={{ color: headerTextColor }}>
                         {props.title}
                     </Typography>
                 </Toolbar>
             </AppBar>
-            <Drawer variant="persistent" anchor="left" open className={styles.drawer}>
-                {props.menu}
-            </Drawer>
-        </>
+
+            <Hidden smDown implementation="css">
+                <Drawer variant="permanent" open className={styles.drawer} classes={{ paper: styles.paper }}>
+                    {props.menu}
+                </Drawer>
+            </Hidden>
+
+            <main className={styles.content}>
+                {props.children}
+            </main>
+        </div>
     );
 }