feat(Next > Walk): Add list of root local filesystem with traversal

next/pages/admin/walk.jsx

@@ -1,23 +1,26 @@
 import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 
 import GenericList from '../../src/components/GenericList'
 import ListFile from '../../src/components/Walk/ListFile'
 
-import { isImage, organizeByMedia } from '../../src/utils/walk'
+import { isImage, parseHash, organizeByMedia } from '../../src/utils/walk'
 
 function WalkPage() {
+  const { asPath } = useRouter()
   const [data, setData] = useState(null)
   const [isLoading, setLoading] = useState(false)
+  const pathQs = parseHash('path', asPath)
 
   useEffect(() => {
     setLoading(true)
-    fetch('/api/admin/filesystems')
-      .then((res) => res.json())
-      .then((fetchedData) => {
-        setData(fetchedData)
+    fetch(`/api/admin/filesystems?path=${pathQs ?? '/'}`)
+      .then((response) => response.json())
+      .then((result) => {
+        setData(result)
         setLoading(false)
       })
-  }, [])
+  }, [asPath])
 
   if (isLoading) return <p>Loading...</p>
   if (!data) return <p>No filesystem data</p>

next/src/utils/__tests__/walk.test.js

@@ -1,13 +1,13 @@
-import util, { isImage } from '../walk'
-
-const {
+import {
+  isImage,
+  parseHash,
   addParentDirectoryNav,
   associateMedia,
   generateImageFilenames,
   isAnyImageOrVideo,
   mergeMedia,
   getJpgLike,
-} = util
+} from '../walk'
 
 describe('Walk - util', () => {
   describe('isImage', () => {
@@ -24,6 +24,19 @@ describe('Walk - util', () => {
     })
   })
 
+  describe('parseHash', () => {
+    test('find 1', () => {
+      const path = 'dotca'
+      const received = parseHash('path', `http://localhost#path=${path}`)
+      expect(received).toBe(path)
+    })
+
+    test('find 0', () => {
+      const received = parseHash('path', 'http://localhost')
+      expect(received).toBeNull()
+    })
+  })
+
   describe('addParentDirectoryNav', () => {
     const file = {
       filename: '..',

next/src/utils/walk.js

@@ -9,7 +9,8 @@ export function isImage(file) {
 
 export function parseHash(find, from) {
   if (!find || !from) return ''
-  return RegExp(`[#&]${find}(=([^&#]*)|&|#|$)`).exec(from)[2]
+  const found = RegExp(`[#&]${find}(=([^&#]*)|&|#|$)`).exec(from)
+  return found?.[2] ?? null
 }
 
 export function addParentDirectoryNav(itemFiles, path) {