fix(Next > TypeScript): Album transpiles with TS

next/pages/[gallery]/[album].tsx

@@ -1,4 +1,4 @@
-import { get as getAlbum } from '../../src/lib/album'
+import getAlbum from '../../src/lib/album'
 import { get as getAlbums } from '../../src/lib/albums'
 import { get as getGalleries } from '../../src/lib/galleries'
 import { indexKeywords } from '../../src/lib/search'

next/pages/[gallery]/all.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState, useRef } from 'react'
 import styled from 'styled-components'
 
 import config from '../../../config.json'
-import { get as getAlbum } from '../../src/lib/album'
+import getAlbum from '../../src/lib/album'
 import { get as getAlbums } from '../../src/lib/albums'
 import { get as getGalleries } from '../../src/lib/galleries'
 import { indexKeywords } from '../../src/lib/search'
@@ -15,9 +15,9 @@ import useMemory from '../../src/hooks/useMemory'
 import useSearch from '../../src/hooks/useSearch'
 import SplitViewer from '../../src/components/SplitViewer'
 
-import { Items } from '../../src/types/common'
+import { Item } from '../../src/types/common'
 
-interface ServerSideAllItems extends Items {
+interface ServerSideAllItem extends Item {
   album?: string;
   gallery?: string;
   corpus: string;
@@ -66,7 +66,7 @@ export async function getStaticPaths() {
 
 function AllPage(
   { items = [], indexedKeywords }:
-  { items: ServerSideAllItems[]; indexedKeywords: object[] },
+  { items: ServerSideAllItem[]; indexedKeywords: object[] },
 ) {
   const refImageGallery = useRef(null)
   const [memoryIndex, setMemoryIndex] = useState(0)

next/pages/[gallery]/today.tsx

@@ -1,7 +1,7 @@
 import config from '../../../config.json'
 import { get as getGalleries } from '../../src/lib/galleries'
 import { get as getAlbums } from '../../src/lib/albums'
-import { get as getAlbum } from '../../src/lib/album'
+import getAlbum from '../../src/lib/album'
 import { indexKeywords } from '../../src/lib/search'
 
 import AlbumPageComponent from '../../src/components/AlbumPage'

next/pages/api/admin/filesystems/__tests__/index.test.js

@@ -1,7 +1,7 @@
-import fs from 'fs'
 import { testApiHandler } from 'next-test-api-route-handler'
-import path from 'path'
-import { promisify } from 'util'
+import fs from 'node:fs'
+import path from 'node:path'
+import { promisify } from 'node:util'
 
 import handler from '..'
 import utilsFactory from '../../../../../src/lib/utils'

next/pages/api/galleries/[gallery]/albums/[album].ts

@@ -1,4 +1,5 @@
-import local from '../../../../../src/lib/album'
+import get from '../../../../../src/lib/album'
+import { errorSchema } from '../../../../../src/models/album'
 
 export default async function handler(req, res) {
   const {
@@ -8,10 +9,10 @@ export default async function handler(req, res) {
 
   switch (method) {
     case 'GET': {
-      const out = await local.get(gallery, album, true)
+      const out = await get(gallery, album, true)
       return res.status(out.status).json(out.body)
     }
     default:
-      return res.status(405).json(local.errorSchema(`Method ${method} Not Allowed`))
+      return res.status(405).json(errorSchema(`Method ${method} Not Allowed`))
   }
 }

next/src/components/AlbumPage/index.tsx

@@ -8,9 +8,9 @@ import ThumbImg from '../ThumbImg'
 import useSearch from '../../hooks/useSearch'
 import useMemory from '../../hooks/useMemory'
 
-import { Items } from '../../types/common'
+import type { Item } from '../../types/common'
 
-interface ServerSidePhotoItems extends Items {
+interface ServerSidePhotoItem extends Item {
   corpus: string;
 }
 
@@ -21,7 +21,7 @@ const Wrapper = styled.ul`
 
 function AlbumPage(
   { items = [], meta, indexedKeywords }:
-  { items: ServerSidePhotoItems[], meta?: object, indexedKeywords },
+  { items: ServerSidePhotoItem[], meta?: object, indexedKeywords },
 ) {
   const refImageGallery = useRef(null)
   const [memoryIndex, setMemoryIndex] = useState(0)

next/src/components/SlippyMap/options.ts

@@ -3,7 +3,7 @@ import type { Feature, FeatureCollection } from 'geojson'
 
 import config from '../../../../config.json'
 
-import { Items } from '../../types/common'
+import type { Item } from '../../types/common'
 
 interface SelectedFeature extends Feature {
   properties: {
@@ -30,14 +30,14 @@ const validatePoint = (rawCoordinate: [number?, number?]) => {
 }
 
 type ItemWithCoordinate = {
-  coordinates?: Items['coordinates']
+  coordinates?: Item['coordinates']
 }
 
 export function transformSourceOptions(
   { items = [], selected }:
-  { items?: Items[], selected?: ItemWithCoordinate } = {},
+  { items?: Item[], selected?: ItemWithCoordinate } = {},
 ): GeoJSONSourceRaw {
-  const geoJsonFeature = (item: Items): SelectedFeature => {
+  const geoJsonFeature = (item: Item): SelectedFeature => {
     const { latitude, longitude } = validatePoint(item.coordinates)
     const { latitude: selectedLatitude, longitude: selectedLongitude } = validatePoint(selected?.coordinates)
 
@@ -57,7 +57,7 @@ export function transformSourceOptions(
     return point
   }
 
-  const hasGeo = (item: Items) => !validatePoint(item?.coordinates).isInvalidPoint
+  const hasGeo = (item: Item) => !validatePoint(item?.coordinates).isInvalidPoint
   const features = items.filter(hasGeo).map(geoJsonFeature)
 
   const data: FeatureCollection = {

next/src/components/SplitViewer/index.tsx

@@ -10,7 +10,7 @@ import SlippyMap from '../SlippyMap'
 import Video from '../Video'
 
 import { Viewed } from '../../hooks/useMemory'
-import { Items } from '../../types/common'
+import { Item } from '../../types/common'
 
 const Split = styled.section`
   display: grid;
@@ -37,7 +37,7 @@ interface ImageGalleryType {
   renderItem?: (renderItem: ImageGalleryType) => JSX.Element; // eslint-disable-line
 }
 
-const toCarousel = (item: Items) => {
+const toCarousel = (item: Item) => {
   const imageGallery: ImageGalleryType = {
     original: item.photoPath || item.thumbPath,
     thumbnail: item.thumbPath,
@@ -69,7 +69,7 @@ function SplitViewer({
   memoryIndex,
   setMemoryIndex,
 }: {
-  items: Items[];
+  items: Item[];
   refImageGallery: object;
   setViewed: Viewed;
   memoryIndex: number;

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

@@ -1,4 +1,4 @@
-const utilsFactory = require('../utils')
+import utilsFactory from '../utils'
 
 describe('Album library', () => {
   const gallery = 'demo'

next/src/lib/album.ts

@@ -0,0 +1,59 @@
+import camelCase from 'camelcase'
+
+import fsCallback from 'node:fs'
+import { promisify } from 'node:util'
+import xml2js from 'xml2js'
+
+import transformJsonSchema, { type ErrorOptionalMessage, errorSchema } from '../models/album'
+import { Album } from '../types/common'
+
+const fs = fsCallback.promises
+const parseOptions = { explicitArray: false, normalizeTags: true, tagNameProcessors: [(name) => camelCase(name)] }
+const parser = new xml2js.Parser(parseOptions)
+const parseXml = promisify(parser.parseString)
+
+/**
+* Get album XML from local filesystem
+* @param {string} gallery name of gallery
+* @param {string} album name of album
+* @returns {string} album XML
+*/
+async function getXmlFromFilesystem(gallery: string, album: string) {
+  const fileBuffer = await fs.readFile(`../public/galleries/${gallery}/${album}.xml`)
+  return parseXml(fileBuffer)
+}
+
+type Envelope = { body: Album, status: number }
+type ErrorOptionalMessageBody = {
+  body: ErrorOptionalMessage; status: number;
+}
+async function get<T extends boolean = false>(gallery: string, album: string, returnEnvelope?: T): Promise<T extends true ? Envelope : Album>
+/**
+ * Get Album XML from local filesystem
+ * @param {string} gallery name of gallery
+ * @param {string} album name of album
+ * @param {boolean} returnEnvelope will enable a return value with HTTP status code and body
+ * @returns {object} album containing meta and items with keys filename, photoCity, photoLoc, thumbCaption, photoDesc
+ */
+async function get(gallery: string, album: string, returnEnvelope: boolean): Promise<Envelope | Album | ErrorOptionalMessage | ErrorOptionalMessageBody> {
+  try {
+    const xml = await getXmlFromFilesystem(gallery, album)
+    const body = transformJsonSchema(xml)
+
+    if (returnEnvelope) {
+      return { body, status: 200 }
+    }
+
+    return body
+  } catch (e) {
+    const message = 'No album was found'
+    if (returnEnvelope) {
+      return { body: errorSchema(message), status: 404 }
+    }
+
+    return errorSchema(message)
+  }
+}
+
+export { transformJsonSchema }
+export default get

next/src/lib/albums.ts

@@ -1,9 +1,9 @@
-const camelCase = require('camelcase')
-const fsCallback = require('fs')
-const xml2js = require('xml2js')
-const { promisify } = require('util')
+import camelCase from 'camelcase'
+import fsCallback from 'node:fs'
+import { promisify } from 'node:util'
+import xml2js from 'xml2js'
 
-const utilsFactory = require('./utils')
+import utilsFactory from './utils'
 
 type ErrorOptionalMessage = { albums: object[]; error?: { message: string } }
 const errorSchema = (message: string = null): ErrorOptionalMessage => {
@@ -73,9 +73,7 @@ function transformJsonSchema(dirty = { gallery: { album: null } }, gallery = 'de
   return { albums: [transform(dirty.gallery.album)] }
 }
 
-function get<T extends boolean = false>(gallery: string, returnEnvelope?: T): T extends true ? Promise<AlbumBody> : Promise<Albums>;// eslint-disable-line
-// function get(gallery: string, returnEnvelope?: true): Promise<AlbumBody>;
-// function get(gallery: string, returnEnvelope: false): Promise<Albums>;
+async function get<T extends boolean = false>(gallery: string, returnEnvelope?: T): Promise<T extends true ? AlbumBody : Albums>;
 
 /**
  * Get Albums from local filesystem
@@ -89,16 +87,16 @@ async function get(gallery: string, returnEnvelope = false): Promise<Albums | Er
     const body = transformJsonSchema(galleryRaw, gallery)
 
     if (returnEnvelope) {
-      return { body, status: 200 } as AlbumBody
+      return { body, status: 200 }
     }
 
-    return body as Albums
+    return body
   } catch (e) {
     if (returnEnvelope) {
-      return { body: errorSchema('No albums are found'), status: 404 } as ErrorOptionalMessageBody
+      return { body: errorSchema('No albums are found'), status: 404 }
     }
 
-    return errorSchema() as ErrorOptionalMessage
+    return errorSchema()
   }
 }
 const out = {

next/src/lib/exists.js

@@ -1,10 +1,11 @@
-const boom = require('boom')
-const fs = require('fs')
-const path = require('path')
-const { promisify } = require('util')
+import boom from 'boom'
+import fs from 'node:fs'
+import path from 'node:path'
+import { promisify } from 'node:util'
+
+import utilsFactory from './utils'
 
 const getStat = promisify(fs.stat)
-const utilsFactory = require('./utils')
 
 const MODULE_NAME = 'pathExists'
 

next/src/lib/filesystems.js

@@ -1,8 +1,8 @@
-const globCallback = require('glob')
-const path = require('path')
-const { promisify } = require('util')
+import globCallback from 'glob'
+import path from 'node:path'
+import { promisify } from 'node:util'
 
-const utilsFactory = require('./utils')
+import utilsFactory from './utils'
 
 const glob = promisify(globCallback)
 
@@ -58,7 +58,7 @@ async function get(destinationPath = '', returnEnvelope = false) {
   }
 }
 
-module.exports = {
+export default {
   get,
   errorSchema,
 }