feat(Next > Path): Simplify the folder structure of the frontend

app/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     'react/react-in-jsx-scope': 'off', // Next.js magically includes
     'react/jsx-one-expression-per-line': 'off', // too vertical
     'jsx-a11y/anchor-is-valid': 'off', // next/link breaks this rule
+    'react-hooks/exhaustive-deps': 'off', // exhaustive is excessive
   },
   env: {
     jest: true,

app/__tests__/view/[gallery]/all.test.jsx

@@ -5,7 +5,7 @@ const { getByText } = screen
 
 test('0 results', async () => {
   const { render } = await getPage({
-    route: '/view/demo/all?keyword=fake',
+    route: '/demo/all?keyword=fake',
   })
   render()
   const h3 = getByText(/fake results 0 of 6 found/)
@@ -14,7 +14,7 @@ test('0 results', async () => {
 
 test('1 result', async () => {
   const { render } = await getPage({
-    route: '/view/demo/all?keyword=gingerbread',
+    route: '/demo/all?keyword=gingerbread',
   })
   render()
   const h3 = getByText(/gingerbread results 1 of 6 found/)
@@ -23,7 +23,7 @@ test('1 result', async () => {
 
 test('Mixed case', async () => {
   const { render } = await getPage({
-    route: '/view/demo/all?keyword=Gingerbread',
+    route: '/demo/all?keyword=Gingerbread',
   })
   render()
   const h3 = getByText(/Gingerbread results 1 of 6 found/)

app/package.json

@@ -42,7 +42,7 @@
     "jest": "^27.0.6",
     "jest-styled-components": "^7.0.5",
     "next-page-tester": "^0.30.0",
-    "next-test-api-route-handler": "^2.0.2",
+    "next-test-api-route-handler": "^2.3.4",
     "node-fetch": "^2.6.1",
     "react-test-renderer": "^17.0.2",
     "standard-version": "^9.3.1"

app/pages/view/[gallery]/albums.jsx → app/pages/[gallery].jsx

@@ -1,10 +1,10 @@
 import Head from 'next/head'
 import styled, { css } from 'styled-components'
 
-import { get as getAlbums } from '../../../src/lib/albums'
-import { get as getGalleries } from '../../../src/lib/galleries'
+import { get as getAlbums } from '../src/lib/albums'
+import { get as getGalleries } from '../src/lib/galleries'
 
-import Link from '../../../src/components/Link'
+import Link from '../src/components/Link'
 
 export async function getStaticProps({ params: { gallery } }) {
   const { IMAGE_BASE_URL = '/' } = process.env
@@ -60,7 +60,7 @@ const AlbumsPage = ({ gallery, albums }) => {
       key={album.name}
       odd={i % 2 === 0}
     >
-      <Link href={`/view/${gallery}/${album.name}`}><a><img src={album.thumbPath} alt={album.name} /></a></Link>
+      <Link href={`/${gallery}/${album.name}`}><a><img src={album.thumbPath} alt={album.name} /></a></Link>
       <AlbumTitle>{album.h1}</AlbumTitle>
       <AlbumSubTitle>{album.h2}</AlbumSubTitle>
       <AlbumYear>{album.year}</AlbumYear>

app/pages/view/[gallery]/[album].jsx → app/pages/[gallery]/[album].jsx

@@ -1,8 +1,8 @@
 import Head from 'next/head'
 
-import { get as getAlbum } from '../../../src/lib/album'
-import { get as getAlbums } from '../../../src/lib/albums'
-import { get as getGalleries } from '../../../src/lib/galleries'
+import { get as getAlbum } from '../../src/lib/album'
+import { get as getAlbums } from '../../src/lib/albums'
+import { get as getGalleries } from '../../src/lib/galleries'
 
 async function buildStaticPaths() {
   const { galleries } = await getGalleries()

app/pages/view/[gallery]/all.jsx → app/pages/[gallery]/all.jsx

@@ -2,11 +2,11 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 
-import { get as getAlbum } from '../../../src/lib/album'
-import { get as getAlbums } from '../../../src/lib/albums'
-import { get as getGalleries } from '../../../src/lib/galleries'
+import { get as getAlbum } from '../../src/lib/album'
+import { get as getAlbums } from '../../src/lib/albums'
+import { get as getGalleries } from '../../src/lib/galleries'
 
-import Link from '../../../src/components/Link'
+import Link from '../../src/components/Link'
 
 async function buildStaticPaths() {
   const { galleries } = await getGalleries()
@@ -60,7 +60,6 @@ const AllPage = ({ items = [] }) => {
       return null
     }
     return null
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [keyword])
 
   if (!router.isReady) {
@@ -91,7 +90,7 @@ const AllPage = ({ items = [] }) => {
             <b>{item.album}</b>
             {item.content}
             {checkKeyword(keyword) ? <img src={item.thumbPath} alt={item.caption} /> : item.caption}
-            <Link href={`/view/${item.gallery}/${item.album}#select${item.id}`}><a>{item.caption}</a></Link>
+            <Link href={`/${item.gallery}/${item.album}#select${item.id}`}><a>{item.caption}</a></Link>
           </li>
         ))}
       </ul>

app/pages/index.jsx

@@ -18,8 +18,8 @@ export async function getStaticProps() {
 const ListComponent = ({ item }) => (
   <ListItem item={(
     <>
-      <Link href={`/view/${item.gallery}/albums`}><a>{item.gallery}</a></Link>
-      <Link href={`/view/${item.gallery}/all`}><a>Search album</a></Link>
+      <Link href={`/${item.gallery}/albums`}><a>{item.gallery}</a></Link>
+      <Link href={`/${item.gallery}/all`}><a>Search album</a></Link>
     </>
   )}
   />

app/src/lib/__tests__/album.test.js

@@ -5,13 +5,13 @@ describe('Album library', () => {
   describe('getVideoPath', () => {
     test('Just filename', () => {
       const item = { filename: '2016-12-31-01.mp4' }
-      const expectedPath = `/view/video?sources=${item.filename}&w=&h=&gallery=${gallery}`
+      const expectedPath = `/video?sources=${item.filename}&w=&h=&gallery=${gallery}`
       expect(lib.getVideoPath(item, gallery)).toBe(expectedPath)
     })
 
     test('All', () => {
       const item = { filename: '2016-12-31-01.mp4', size: { w: 1, h: 2 } }
-      const expectedPath = `/view/video?sources=${item.filename}&w=${item.size.w}&h=${item.size.h}&gallery=${gallery}`
+      const expectedPath = `/video?sources=${item.filename}&w=${item.size.w}&h=${item.size.h}&gallery=${gallery}`
       expect(lib.getVideoPath(item, gallery)).toBe(expectedPath)
     })
   })
@@ -80,7 +80,7 @@ describe('Album library', () => {
       expect(result.album.items[1].caption).toEqual('Video: Caption') // Video Thumb Caption
       expect(result.album.items[1].photoPath).toEqual('/galleries/demo/media/photos/2016/2016-Video-Filename.jpg') // Photo Path
       expect(result.album.items[1].mediaPath)
-        .toEqual('/view/video?sources=2016-Video-Filename.mov,2016-Video-Filename.avi&w=1280&h=720&gallery=demo') // Video Path
+        .toEqual('/video?sources=2016-Video-Filename.mov,2016-Video-Filename.avi&w=1280&h=720&gallery=demo') // Video Path
       expect(result.album.items[1].reference).toEqual('https://en.wikipedia.org/wiki/Purshia_tridentata') // Wikipedia reference
     })
   })

app/src/lib/album.js

@@ -34,7 +34,7 @@ const getVideoPath = (item, gallery) => {
 
   const filename = (typeof item.filename === 'string') ? item.filename : item.filename.join(',')
   const dimensions = (item.size) ? { width: item.size.w, height: item.size.h } : { width: '', height: '' }
-  return `/view/video?sources=${filename}&w=${dimensions.width}&h=${dimensions.height}&gallery=${gallery}`
+  return `/video?sources=${filename}&w=${dimensions.width}&h=${dimensions.height}&gallery=${gallery}`
 }
 
 function title(item) {

ui/app/containers/GalleryListItem/index.jsx

@@ -8,7 +8,7 @@ import { hostCase } from '../../utils/host';
 
 function GalleriesItem({ item: { name: gallery, host, id } }) {
   const content = [
-    <Link key={`gallery-content-item-${id}`} to={`/view/${host}/${gallery}`}>
+    <Link key={`gallery-content-item-${id}`} to={`/${host}/${gallery}`}>
       {capitalize(gallery)}
     </Link>,
     `(${hostCase(host)})`,