Use import syntax and add button to navigate up.

retrixe · Nov 15, 2020 · e30d526 · e30d526
1 parent f75f6c0
commit e30d526
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 43 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -16,16 +16,13 @@ jobs:
       - run:
           name: Checkout the project
           command: git clone https://github.com/retrixe/Area51.git .
-      - run:
-          name: Update Yarn
-          command: 'sudo npm install -g yarn'
       - restore_cache:
           key: dependency-cache-{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: yarn
       - save_cache:
-          key: dependency-cache-{{ checksum "package-lock.json" }}
+          key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:
             - ./.yarn
       - run:

diff --git a/src/client.js b/src/client.js
@@ -1,16 +1,16 @@
+import fs from 'fs'
+import path from 'path'
 import React from 'react'
+import send from 'koa-send'
+import Router from '@koa/router' // eslint-disable-line no-unused-vars
 import Files from './client/files'
 import Login from './client/login'
 import theme from './client/theme'
-const fs = require('fs')
-const path = require('path')
-const send = require('koa-send')
-const Router = require('@koa/router') // eslint-disable-line no-unused-vars
-const ReactDOMServer = require('react-dom/server')
-const { access, readFile } = require('fs').promises
-const { StaticRouter, Switch, Route } = require('react-router-dom')
-const { ServerStyleSheets, ThemeProvider } = require('@material-ui/core/styles')
-const config = require('../config.json')
+import ReactDOMServer from 'react-dom/server'
+import { StaticRouter, Switch, Route } from 'react-router-dom'
+import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles'
+import config from '../config.json'
+const { access, readFile } = fs.promises
 
 // Set NODE_ENV, else Material-UI generates classes in dev mode, causing client and server mismatch.
 if (process.env.NODE_ENV !== 'development') process.env.NODE_ENV = 'production'

diff --git a/src/client/files.js b/src/client/files.js
@@ -43,33 +43,39 @@ const Files = (props) => {
     else if (b.folder && !a.folder) return 1
     else return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1 // They are never equal.
   }
+  const oneUp = path && path !== '/' ? path.substring(0, path.lastIndexOf('/')) || '' : ''
 
   return (
     <Layout>
       {error && <p style={{ color: 'red' }}>{error}</p>}
       {files && (
         <List>
-            {files.sort(sortAlgorithm).map(file => {
-              if (file.file) {
-                return (
-                  <a
-                    style={{ textDecoration: 'none', color: 'black' }}
-                    key={file.name} href={`/api/file/${fileReqPath}${file.name}`}
-                  >
-                    <FileItem name={file.name} icon={<FileIcon />} />
-                  </a>
-                )
-              } else if (file.folder) {
-                return (
-                  <Link
-                    style={{ textDecoration: 'none', color: 'black' }}
-                    key={file.name} to={`/files/${fileReqPath}${file.name}`}
-                  >
-                    <FileItem name={file.name} icon={<FolderIcon />} />
-                  </Link>
-                )
-              } else return <FileItem name={file.name} />
-            })}
+          {path && path !== '/' && (
+            <Link style={{ textDecoration: 'none', color: 'black' }} to={`/files/${oneUp}`}>
+              <FileItem name={'..'} />
+            </Link>
+          )}
+          {files.sort(sortAlgorithm).map(file => {
+            if (file.file) {
+              return (
+                <a
+                  style={{ textDecoration: 'none', color: 'black' }}
+                  key={file.name} href={`/api/file/${fileReqPath}${file.name}`}
+                >
+                  <FileItem name={file.name} icon={<FileIcon />} />
+                </a>
+              )
+            } else if (file.folder) {
+              return (
+                <Link
+                  style={{ textDecoration: 'none', color: 'black' }}
+                  key={file.name} to={`/files/${fileReqPath}${file.name}`}
+                >
+                  <FileItem name={file.name} icon={<FolderIcon />} />
+                </Link>
+              )
+            } else return <FileItem name={file.name} />
+          })}
         </List>
       )}
     </Layout>

diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,12 @@
-const fs = require('fs')
-const Koa = require('koa')
-const path = require('path')
-const send = require('koa-send')
-const crypto = require('crypto')
-const Router = require('@koa/router')
-const bodyParser = require('koa-bodyparser')
-const serveClient = require('./client')
-const config = require('../config.json')
+import fs from 'fs'
+import Koa from 'koa'
+import path from 'path'
+import send from 'koa-send'
+import crypto from 'crypto'
+import Router from '@koa/router'
+import bodyParser from 'koa-bodyparser'
+import serveClient from './client'
+import config from '../config.json'
 
 // Create a Koa server.
 const app = new Koa()