feat(Next > Walk): Add folder traversal with .. link

danactive · Sep 6, 2023 · 9e92867 · 9e92867
1 parent 8b5bbdf
commit 9e92867
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 27 deletions.
diff --git a/next/pages/admin/walk.tsx b/next/pages/admin/walk.tsx
@@ -1,10 +1,15 @@
-import { List, ListDivider } from '@mui/joy'
+import { List, ListDivider, ListItem } from '@mui/joy'
 import { useRouter } from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
 
 import ListFile from '../../src/components/Walk/ListFile'
 import type { Filesystem, FilesystemBody } from '../../src/lib/filesystems'
-import { isImage, organizeByMedia, parseHash } from '../../src/utils/walk'
+import {
+  addParentDirectoryNav,
+  isImage,
+  organizeByMedia,
+  parseHash,
+} from '../../src/utils/walk'
 
 type ItemFile = Partial<Filesystem> & {
   id: Filesystem['id'];
@@ -34,18 +39,21 @@ function WalkPage() {
   if (!data) return <p>No filesystem data</p>
 
   const itemImages = data.files.filter((file) => isImage(file))
-  // eslint-disable-next-line no-console
-  console.log('itemImages', itemImages)
+  const hasImages = !isLoading && itemImages.length > 0
+  const fsItems = addParentDirectoryNav(organizeByMedia(data.files), pathQs)
 
   return (
-    <List>
-      {organizeByMedia(data.files).map((item, i) => (
-        <Fragment key={item.id}>
-          {i > 0 && <ListDivider />}
-          <ListFile item={item} />
-        </Fragment>
-      ))}
-    </List>
+    <>
+      <List>
+        {fsItems.map((item, i) => (
+          <Fragment key={item.id}>
+            {i > 0 && <ListDivider />}
+            <ListFile item={item} />
+          </Fragment>
+        ))}
+      </List>
+      {hasImages && (<div>TODO display OrganizeThumbs</div>)}
+    </>
   )
 }
 

diff --git a/next/pages/api/admin/filesystems/__tests__/index.test.ts b/next/pages/api/admin/filesystems/__tests__/index.test.ts
@@ -26,13 +26,20 @@ describe('Filesystem API', () => {
       })
     })
 
-    function matchFile(expect: jest.Expect, file: Filesystem) {
+    function matchPFile(expect: jest.Expect, file: Filesystem) {
       expect(file.filename).toEqual('P1160066.JPG')
       expect(file.ext).toEqual('JPG')
       expect(file.mediumType).toEqual('image')
       expect(file.name).toEqual('P1160066')
     }
 
+    function matchJFile(expect: jest.Expect, file: Filesystem) {
+      expect(file.filename).toEqual('jay.js')
+      expect(file.ext).toEqual('js')
+      expect(file.mediumType).toEqual('application')
+      expect(file.name).toEqual('jay')
+    }
+
     test('* GET fixtures has test files', async () => {
       await testApiHandler({
         handler,
@@ -42,7 +49,8 @@ describe('Filesystem API', () => {
 
           expect(response.status).toBe(200)
 
-          matchFile(expect, result.files[2])
+          matchPFile(expect, result.files[1])
+          matchJFile(expect, result.files[0])
           expect(result.files.length).toEqual(3)
         },
         params: { path: 'test/fixtures/walkable' },
@@ -58,7 +66,7 @@ describe('Filesystem API', () => {
 
           expect(response.status).toBe(200)
 
-          matchFile(expect, result.files[0])
+          matchPFile(expect, result.files[0])
           expect(result.files.length).toEqual(1)
         },
         params: { path: 'test/fixtures/walk%20able' },

diff --git a/next/src/components/Walk/ListFile.tsx b/next/src/components/Walk/ListFile.tsx
@@ -5,9 +5,10 @@ import Link from '../Link'
 
 function ListFile({ item: file }: { item: ItemFile }) {
   if (file.mediumType === 'folder') {
+    const href = file.path ? `#path=${file.path}` : ''
     return (
       <ListItem>
-        <Link href={`#path=${file.path}`}>{file.label}</Link>
+        <Link href={href}>{file.label}</Link>
       </ListItem>
     )
   }

diff --git a/next/src/components/Walk/__tests__/ListFile.test.tsx b/next/src/components/Walk/__tests__/ListFile.test.tsx
@@ -14,7 +14,7 @@ describe('<ListFile />', () => {
     const { getByText } = render(<ListFile item={{ ...mockItemFile, label }} />)
     expect(getByText(label)).toBeInTheDocument()
   })
-  test('should render a folder', () => {
+  test('should render a folder with path', () => {
     const path = 'testPath'
     const label = 'Link text'
     const { getByText } = render(<ListFile
@@ -27,4 +27,17 @@ describe('<ListFile />', () => {
     />)
     expect(getByText(label).closest('a')?.href).toBe(`http://localhost/#path=${path}`)
   })
+  test('should render a folder with path', () => {
+    const path = ''
+    const label = 'Link text'
+    const { getByText } = render(<ListFile
+      item={{
+        ...mockItemFile,
+        mediumType: 'folder',
+        path,
+        label,
+      }}
+    />)
+    expect(getByText(label).closest('a')?.href).toBe('http://localhost/')
+  })
 })
diff --git a/next/src/lib/filesystems.ts b/next/src/lib/filesystems.ts
@@ -81,15 +81,7 @@ async function get(
         ext: fileExt,
         name: fileName,
       }
-    }).sort((a, b) => {
-      if (a.name < b.name) {
-        return -1
-      }
-      if (a.name > b.name) {
-        return 1
-      }
-      return 0
-    })
+    }).sort((a, b) => a.name.localeCompare(b.name))
 
     const body = { files: webPaths, destinationPath }
     if (returnEnvelope) {

diff --git a/next/src/utils/walk.ts b/next/src/utils/walk.ts
@@ -20,7 +20,7 @@ export function parseHash(find: 'path', from: string) {
   return found?.[2] ?? null
 }
 
-export function addParentDirectoryNav(itemFiles: ItemFile[], path: string) {
+export function addParentDirectoryNav(itemFiles: ItemFile[], path: string | null) {
   const file: ItemFile = {
     path: 'harddrive',
     filename: '..',