WIP sort gallery images by date for prev/next nav btns

gatsby-node.js

@@ -6,6 +6,7 @@ const iptc = require('node-iptc');
 const Vibrant = require('node-vibrant');
 const chroma = require('chroma-js');
 const chalk = require('chalk');
+const R = require('ramda');
 
 const readFile = util.promisify(fs.readFile);
 
@@ -143,7 +144,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           edges {
             node {
               relativePath,
-              base
+              base,
+              childImageSharp {
+                fields {
+                  imageMeta {
+                    dateTaken
+                  }
+                }
+              }
             }
           }
         }
@@ -156,7 +164,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   }
   // Create pages for each markdown file.
   const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
-  const edges = galleryImages.data.allFile.edges;
+  const edges = R.sort((edge) => 
+    new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge)),
+  galleryImages.data.allFile.edges);
+  
+  console.log(R.map(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken']), edges));
 
   edges.forEach(({ node }, index) => {
     const nextImage = index === edges.length - 1
@@ -165,7 +177,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     const prevImage = index === 0
       ? null
       : edges[index - 1].node.base;
-    console.log('next', nextImage);
 
     createPage({
       path: `photogallery/${node.base}`,

src/components/GalleryImage.js

@@ -17,7 +17,28 @@ const GalleryImage = ({ data, pageContext }) => {
   const image = data.allFile.edges[0].node;
   const ar = getAspectRatio(image);
 
-  console.log(pageContext);
+  React.useEffect(() => {
+    const keyListener = (e) => {
+      switch (e.code) {
+      case 'ArrowRight': {
+        if (pageContext.nextImage) {
+          navigate(`/photogallery/${pageContext.nextImage}/`);
+        }
+        return;
+      }
+      case 'ArrowLeft': {
+        if (pageContext.prevImage) {
+          navigate(`/photogallery/${pageContext.prevImage}/`);
+        }
+        return;
+      }
+      }
+    };
+    document.addEventListener('keydown', keyListener);
+    return () => {
+      document.removeEventListener('keydown', keyListener);
+    };
+  }, [pageContext]);
 
   const name = getName(image);
   const meta = getMeta(image);
@@ -39,6 +60,7 @@ const GalleryImage = ({ data, pageContext }) => {
         style={getVibrantToHelmetSafeBodyStyle(vibrant)}
       />
     </Helmet>
+    <div className="min-h-screen flex flex-col justify-between">
       <nav className="mt-0">
         <button
           className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
@@ -62,7 +84,6 @@ const GalleryImage = ({ data, pageContext }) => {
           to={`/photogallery/${pageContext.nextImage}/`}
         >next</Link>}
       </nav>
-    <div className="min-h-screen flex flex-col justify-center">
       <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
           <GatsbyImage
@@ -110,6 +131,7 @@ const GalleryImage = ({ data, pageContext }) => {
           </div>}
         </div>
       </div>
+      <div></div>
     </div>
   </>);
 };