diff --git a/next/pages/admin/walk.tsx b/next/pages/admin/walk.tsx index c664f480..b0d11e64 100644 --- 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 & { id: Filesystem['id']; @@ -34,18 +39,21 @@ function WalkPage() { if (!data) return

No filesystem data

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 ( - - {organizeByMedia(data.files).map((item, i) => ( - - {i > 0 && } - - - ))} - + <> + + {fsItems.map((item, i) => ( + + {i > 0 && } + + + ))} + + {hasImages && (
TODO display OrganizeThumbs
)} + ) } diff --git a/next/pages/api/admin/filesystems/__tests__/index.test.ts b/next/pages/api/admin/filesystems/__tests__/index.test.ts index 0684ac44..7601b966 100644 --- 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 index 2df49ee1..8e87fc4e 100644 --- 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 ( - {file.label} + {file.label} ) } diff --git a/next/src/components/Walk/__tests__/ListFile.test.tsx b/next/src/components/Walk/__tests__/ListFile.test.tsx index 781c8b65..7a26a0b9 100644 --- a/next/src/components/Walk/__tests__/ListFile.test.tsx +++ b/next/src/components/Walk/__tests__/ListFile.test.tsx @@ -14,7 +14,7 @@ describe('', () => { const { getByText } = render() 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(', () => { />) 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() + expect(getByText(label).closest('a')?.href).toBe('http://localhost/') + }) }) diff --git a/next/src/lib/filesystems.ts b/next/src/lib/filesystems.ts index fc6c3c0b..cfd8bca8 100644 --- 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 index 52f47895..e879eba0 100644 --- 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: '..',