Pass key as props

package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "coverage": "vitest run --coverage",
+    "coverage": "vitest run --coverage --coverage.include=src",
     "lint": "eslint src",
     "serve": "node src/cli.js",
     "url": "node src/cli.js https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet",

src/components/App.tsx

@@ -5,14 +5,18 @@ import Folder from './Folder.js'
 
 export default function App() {
   const search = new URLSearchParams(location.search)
-  if (!search.has('key') || search.get('key')?.endsWith('/')) {
+  const key = search.get('key') || ''
+  if (Array.isArray(key)) throw new Error('key must be a string')
+
+  if (!key || key.endsWith('/')) {
     // folder view
-    return <Folder />
-  } else if (search.has('row') && search.has('col')) {
+    const prefix = key.replace(/\/$/, '')
+    return <Folder prefix={prefix} />
+  } else if (search.has('col') && search.has('row')) {
     // cell view
     return <Cell />
   } else {
     // file view
-    return <File />
+    return <File file={key} />
   }
 }

src/components/File.tsx

@@ -2,37 +2,39 @@ import React, { useState } from 'react'
 import Layout from './Layout.js'
 import Viewer from './Viewer.js'
 
+interface FileProps {
+  file: string
+}
+
 /**
  * File viewer page
  */
-export default function File() {
+export default function File({ file }: FileProps) {
   const [progress, setProgress] = useState<number>()
   const [error, setError] = useState<Error>()
 
   // File path from url
-  const search = new URLSearchParams(location.search)
-  const key = decodeURIComponent(search.get('key') || '')
-  const path = key.split('/')
-  const shortKey = path.at(-1)
+  const path = file.split('/')
+  const fileName = path.at(-1)
 
-  const isUrl = key.startsWith('http://') || key.startsWith('https://')
+  const isUrl = file.startsWith('http://') || file.startsWith('https://')
 
-  return <Layout progress={progress} error={error} title={shortKey}>
+  return <Layout progress={progress} error={error} title={fileName}>
     <nav className='top-header'>
       <div className='path'>
         {isUrl &&
-          <a href={`/files?key=${key}`}>{key}</a>
+          <a href={`/files?key=${file}`}>{file}</a>
         }
         {!isUrl && <>
           <a href='/files'>/</a>
-          {key && key.split('/').slice(0, -1).map((sub, depth) =>
+          {file && file.split('/').slice(0, -1).map((sub, depth) =>
             <a href={`/files?key=${path.slice(0, depth + 1).join('/')}/`} key={depth}>{sub}/</a>
           )}
-          <a href={`/files?key=${key}`}>{path.at(-1)}</a>
+          <a href={`/files?key=${file}`}>{fileName}</a>
         </>}
       </div>
     </nav>
 
-    <Viewer content={key} setProgress={setProgress} setError={setError} />
+    <Viewer content={file} setProgress={setProgress} setError={setError} />
   </Layout>
 }

src/components/Folder.tsx

@@ -1,23 +1,22 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  FileMetadata, getFileDate, getFileDateShort, getFileSize, listFiles,
-} from '../files.js'
+import { FileMetadata, getFileDate, getFileDateShort, getFileSize, listFiles } from '../files.js'
 import Layout, { Spinner, cn } from './Layout.js'
 
+interface FolderProps {
+  prefix: string
+}
+
 /**
  * Folder browser page
  */
-export default function Folder() {
+export default function Folder({ prefix }: FolderProps) {
   // State to hold file listing
   const [files, setFiles] = useState<FileMetadata[]>()
   const [error, setError] = useState<Error>()
   const listRef = useRef<HTMLUListElement>(null)
 
   // Folder path from url
-  const search = new URLSearchParams(location.search)
-  const prefix = (search.get('key') || '').replace(/\/$/, '')
   const path = prefix.split('/')
-  const shortKey = path.at(-1)
 
   // Fetch files on component mount
   useEffect(() => {
@@ -33,7 +32,7 @@ export default function Folder() {
     return prefix ? `/files?key=${prefix}/${file.key}` : `/files?key=${file.key}`
   }, [prefix])
 
-  return <Layout error={error} title={shortKey}>
+  return <Layout error={error} title={prefix}>
     <nav className='top-header'>
       <div className='path'>
         <a href='/files'>/</a>