File viewer

public/styles.css

@@ -17,13 +17,15 @@
   font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1.1em;
   font-weight: bold;
+  text-orientation: mixed;
+  writing-mode: vertical-rl;
   text-shadow: 0 0 1px #222;
   user-select: none;
 }
 .brand img {
   height: 26px;
   width: 26px;
-  margin-right: 10px;
+  margin-bottom: 10px;
   filter: drop-shadow(0 0 1px #505050);
 }
 

src/File.tsx

@@ -0,0 +1,52 @@
+import HighTable, { DataFrame } from 'hightable'
+import React, { useState } from 'react'
+import type { FileContent } from './files.js'
+import Layout, { Spinner } from './Layout.js'
+
+/**
+ * File viewer page
+ */
+export default function File() {
+  const [error, setError] = useState<Error>()
+
+  // File path from url
+  const path = location.pathname.split('/')
+  const prefix = decodeURI(path.slice(2).join('/'))
+
+  // Filename loaded immediately from url, file contents loaded async
+  const [loading, setLoading] = useState(false)
+  const [content, setContent] = useState<FileContent<void>>()
+
+  const header = ['ID', 'Name', 'Age', 'UUID', 'JSON']
+  const dataframe: DataFrame = {
+    header,
+    numRows: 10000,
+    async rows(start: number, end: number) {
+      const arr = []
+      for (let i = start; i < end; i++) {
+        const uuid = Math.random().toString(16).substring(2)
+        const row = [i + 1, 'Name' + i, 20 + i, uuid]
+        const object = Object.fromEntries(header.map((key, index) => [key, row[index]]))
+        arr.push([...row, object])
+      }
+      return arr
+    },
+  }
+
+  return (
+    <Layout error={error} title={prefix}>
+      <nav className='top-header'>
+        <div className='path'>
+          <a href='/files'>/</a>
+          {prefix && prefix.split('/').map((sub, depth) =>
+            <a href={'/files/' + path.slice(2, depth + 3).join('/')} key={depth}>{sub}/</a>
+          )}
+        </div>
+      </nav>
+
+      <HighTable data={dataframe} />
+
+      {loading && <Spinner className='center' />}
+    </Layout>
+  )
+}

src/render.js

@@ -1,29 +1,8 @@
-import HighTable from 'hightable'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import File from './File.js'
 import Folder from './Folder.js'
 
-const header = ['ID', 'Name', 'Age', 'UUID', 'JSON']
-const data = {
-  header,
-  numRows: 10000,
-  /**
-   * @param {number} start
-   * @param {number} end
-   * @returns {Promise<any[][]>}
-   */
-  async rows(start, end) {
-    const arr = []
-    for (let i = start; i < end; i++) {
-      const uuid = Math.random().toString(16).substring(2)
-      const row = [i + 1, 'Name' + i, 20 + i, uuid]
-      const object = Object.fromEntries(header.map((key, index) => [key, row[index]]))
-      arr.push([...row, object])
-    }
-    return arr
-  },
-}
-
 function render() {
   const app = document.getElementById('app')
   if (!app) throw new Error('missing app element')
@@ -35,7 +14,7 @@ function render() {
     root.render(React.createElement(Folder))
   } else {
     // Render file view
-    root.render(React.createElement(HighTable, { data }))
+    root.render(React.createElement(File))
   }
 
 }

src/serve.js

@@ -42,7 +42,6 @@ function handleRequest(req) {
   if (!req.url) return { status: 400, content: 'bad request' }
   const parsedUrl = url.parse(req.url, true)
   const pathname = parsedUrl.pathname || ''
-  console.log(`request ${req.method} ${pathname}`)
 
   if (pathname === '/' || pathname === '/files') {
     // redirect to /files
@@ -55,7 +54,8 @@ function handleRequest(req) {
     return handleStatic(pathname.slice(7))
   } else if (pathname === '/api/store/list') {
     // serve file list
-    const prefix = parsedUrl.query.prefix?.[0] || ''
+    const prefix = parsedUrl.query.prefix || ''
+    if (Array.isArray(prefix)) return { status: 400, content: 'bad request' }
     return handleListing(prefix)
   } else {
     return { status: 404, content: 'not found' }