feat(Next > Today): Determine which photos to display based on local …

…date

next/pages/[gallery].jsx

@@ -78,6 +78,9 @@ function AlbumsPage({ gallery, albums }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div>{searchBox}</div>
+      <h1>Links</h1>
+      <ul><li><Link href={`/${gallery}/all`}>All</Link></li></ul>
+      <ul><li><Link href={`/${gallery}/today`}>Today</Link></li></ul>
       <AlbumSet />
     </div>
   )

next/pages/[gallery]/all.jsx

@@ -11,15 +11,6 @@ import useMemory from '../../src/hooks/useMemory'
 import useSearch from '../../src/hooks/useSearch'
 import SplitViewer from '../../src/components/SplitViewer'
 
-async function buildStaticPaths() {
-  const { galleries } = await getGalleries()
-  const groups = await Promise.all(galleries.map(async (gallery) => {
-    const { albums } = await getAlbums(gallery)
-    return albums.map(({ name: album }) => ({ params: { gallery, album } }))
-  }))
-  return groups.flat()
-}
-
 export async function getStaticProps({ params: { gallery } }) {
   const { albums } = await getAlbums(gallery)
 
@@ -30,7 +21,7 @@ export async function getStaticProps({ params: { gallery } }) {
     corpus: [item.description, item.caption, item.location, item.city, item.search].join(' '),
   }))
   // reverse order for albums in ascending order (oldest on top)
-  const allItems = await albums.reverse().reduce(async (previousPromise, album) => {
+  const allItems = await [...albums].reverse().reduce(async (previousPromise, album) => {
     const prev = await previousPromise
     const { album: { items } } = await getAlbum(gallery, album.name)
     return prev.concat(preparedItems({ albumName: album.name, items }))
@@ -42,9 +33,11 @@ export async function getStaticProps({ params: { gallery } }) {
 }
 
 export async function getStaticPaths() {
-  // Define these albums as allowed, otherwise 404
+  const { galleries } = await getGalleries()
+  // Define these galleries as allowed, otherwise 404
+  const paths = galleries.map((gallery) => ({ params: { gallery } }))
   return {
-    paths: await buildStaticPaths(),
+    paths,
     fallback: false,
   }
 }

next/pages/[gallery]/today.jsx

@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+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 ThumbImg from '../../src/components/ThumbImg'
+
+export async function getStaticProps({ params: { gallery } }) {
+  const { albums } = await getAlbums(gallery)
+
+  // reverse order for albums in ascending order (oldest on top)
+  const allItems = await [...albums].reverse().reduce(async (previousPromise, album) => {
+    const prev = await previousPromise
+    const { album: { items } } = await getAlbum(gallery, album.name)
+    const itemsMatchDate = items.filter((item) => item?.filename?.substring?.(5, 10) === new Date().toLocaleDateString().substring(5, 10))
+    return prev.concat(itemsMatchDate)
+  }, Promise.resolve([]))
+
+  return {
+    props: { items: allItems },
+  }
+}
+
+export async function getStaticPaths() {
+  const { galleries } = await getGalleries()
+  // Define these galleries as allowed, otherwise 404
+  const paths = galleries.map((gallery) => ({ params: { gallery } }))
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+const Wrapper = styled.ul`
+  list-style: none;
+  padding-left: 2px;
+`
+
+function Today({ items }) {
+  return (
+    <Wrapper>
+      {items.map((item) => (
+        <ThumbImg
+          caption={item.caption}
+          key={item.filename}
+          id={`select${item.id}`}
+          src={item.thumbPath}
+        />
+      ))}
+    </Wrapper>
+  )
+}
+
+export default Today

next/pages/index.jsx

@@ -17,13 +17,7 @@ export async function getStaticProps() {
 
 function ListComponent({ item }) {
   return (
-    <ListItem item={(
-      <>
-        <Link href={`/${item.gallery}`}>{item.gallery}</Link>
-        <Link href={`/${item.gallery}/all`}>Search album</Link>
-      </>
-  )}
-    />
+    <ListItem item={<Link href={`/${item.gallery}`}>{item.gallery}</Link>} />
   )
 }