feat(Galleries): React or API access galleries the Next way

danactive · Jun 6, 2021 · 6bd2df1 · 6bd2df1
1 parent 78d0990
commit 6bd2df1
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 10 deletions.
diff --git a/api/server/plugins/walk/lib/index.js b/api/server/plugins/walk/lib/index.js
@@ -1,5 +1,5 @@
 const routes = require('../../../lib/routes');
-const files = require('../../../../../app/src/lib/filesystem');
+const files = require('../../../../../app/src/lib/filesystems');
 const validation = require('../../../lib/validation');
 
 const routeWalkPath = {

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
     semi: [2, 'never'], // remove semicolons
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off', // Next.js magically includes
+    'react/jsx-one-expression-per-line': 'off', // too vertical
   },
   env: {
     jest: true,

diff --git a/app/__tests__/__snapshots__/snapshot.jsx.snap b/app/__tests__/__snapshots__/snapshot.jsx.snap
@@ -5,6 +5,7 @@ exports[`renders homepage unchanged 1`] = `
   className="container"
 >
   <main>
+    <h1 />
     <h1
       className="title"
     >

diff --git a/app/jest.config.js b/app/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
     '!**/node_modules/**',
   ],
   setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+  testEnvironment: 'jsdom',
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '!**/__fixtures__/**'],
   testPathIgnorePatterns: ['/node_modules/', '/.next/'],
   transform: {

diff --git a/.../admin/filesystem/__tests__/index.test.js → ...admin/filesystems/__tests__/index.test.js b/.../admin/filesystem/__tests__/index.test.js → ...admin/filesystems/__tests__/index.test.js
diff --git a/app/pages/api/admin/filesystem/index.js → app/pages/api/admin/filesystems/index.js b/app/pages/api/admin/filesystem/index.js → app/pages/api/admin/filesystems/index.js
@@ -1,4 +1,4 @@
-import local from '../../../../src/lib/filesystem'
+import local from '../../../../src/lib/filesystems'
 
 const errorSchema = (message) => ({ files: [], error: { message } })
 

diff --git a/app/pages/api/galleries/__tests__/index.test.js b/app/pages/api/galleries/__tests__/index.test.js
@@ -25,6 +25,7 @@ describe('Galleries API', () => {
         const result = await response.json()
 
         expect(response.status).toBe(405)
+        expect(result.error.message.toLowerCase()).toContain('not allowed')
 
         expect(result.galleries.length).toBe(0)
         expect(result.galleries.includes('demo')).toBeFalsy()

diff --git a/app/pages/api/galleries/index.js b/app/pages/api/galleries/index.js
@@ -1,14 +1,12 @@
 import local from '../../../src/lib/galleries'
 
-const errorSchema = (message) => ({ galleries: [], error: { message } })
-
 export default async function handler({ method }, res) {
   switch (method) {
     case 'GET': {
-      const out = await local.get(errorSchema)
+      const out = await local.get(true)
       return res.status(out.status).json(out.body)
     }
     default:
-      return res.status(405).json(errorSchema(`Method ${method} Not Allowed`))
+      return res.status(405).json(local.errorSchema(`Method ${method} Not Allowed`))
   }
 }
diff --git a/app/pages/index.jsx b/app/pages/index.jsx
@@ -1,14 +1,23 @@
 import Head from 'next/head'
+
 import styles from './index.module.css'
+import { get as getGalleries } from '../src/lib/galleries'
+
+export async function getStaticProps() {
+  return {
+    props: await getGalleries(),
+  }
+}
 
-const Home = () => (
+const Home = ({ galleries }) => (
   <div className={styles.container}>
     <Head>
       <title>Create Next App</title>
       <link rel="icon" href="/favicon.ico" />
     </Head>
 
     <main>
+      <h1>Galleries {JSON.stringify(galleries)}</h1>
       <h1 className={styles.title}>
         Welcome to
         {' '}

diff --git a/app/src/lib/filesystem.js → app/src/lib/filesystems.js b/app/src/lib/filesystem.js → app/src/lib/filesystems.js
diff --git a/app/src/lib/galleries.js b/app/src/lib/galleries.js
@@ -2,19 +2,40 @@ const fsCallback = require('fs')
 
 const fs = fsCallback.promises
 
-async function get(errorSchema = (msg) => msg) {
+const errorSchema = (message) => {
+  const out = { galleries: [] }
+  if (!message) return out
+  return { ...out, error: { message } }
+}
+
+/**
+ * Get Galleries from local filesystem
+ * @param {boolean} returnEnvelope will enable a return value with HTTP status code and body
+ * @returns {Promise} galleries
+ */
+async function get(returnEnvelope = false) {
   try {
     const hasPrefix = (content) => content.isDirectory()
     const namesOnly = (content) => content.name
 
     const contents = await fs.readdir('../public/galleries', { withFileTypes: true })
+    const galleries = contents.filter(hasPrefix).map(namesOnly)
 
-    return { body: { galleries: contents.filter(hasPrefix).map(namesOnly) }, status: 200 }
+    if (returnEnvelope) {
+      return { body: { galleries }, status: 200 }
+    }
+
+    return { galleries }
   } catch (e) {
-    return { body: errorSchema('No galleries are found'), status: 404 }
+    if (returnEnvelope) {
+      return { body: errorSchema('No galleries are found'), status: 404 }
+    }
+
+    return errorSchema()
   }
 }
 
 module.exports = {
   get,
+  errorSchema,
 }