Add shuffle button and arrow keys

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@reecelucas/react-use-hotkeys": "^1.3.1",
     "autoprefixer": "^10.2.6",
     "babel-eslint": "^10.1.0",
     "babel-plugin-preval": "^5.0.0",

src/pages/index.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Link, graphql } from 'gatsby';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
-import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
 import { Helmet } from 'react-helmet';
 import { take } from 'ramda';
 import classnames from 'classnames';
+import useHotkeys from '@reecelucas/react-use-hotkeys';
 
+import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
 import { HeroA } from '../components/IndexComponents';
 
 // TODO: better text colors in situations of low contrast
@@ -21,22 +22,44 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
 
 const IndexPage = ({ data: { allFile: { edges } } }) => {
   const [isClient, setIsClient] = React.useState(false);
+  const [imageIndex, setImageIndex] = React.useState(0);
   const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
   const image = React.useMemo(() => {
-    if (!isClient) {
+    console.log('ii', imageIndex);
-      return images[0];
-    }
-    const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
-    const imageIndex = getDifferentRand(images.length, lastThreeImages);
-    localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
     return images[imageIndex];
-  }, [images, isClient]);
+  }, [images, imageIndex]);
-  const vibrant = getVibrant(image);
+
+  const shuffleImage = React.useCallback(() => {
+    const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
+    const index = getDifferentRand(images.length, lastThreeImages);
+    localStorage.setItem('lastHeros', JSON.stringify(take(3, [index, ...lastThreeImages])));
+    setImageIndex(index);
+  }, [images.length]);
+
+  // pick random image on page hydration
   React.useEffect(() => {
     if (!isClient) {
       setIsClient(true);
+      shuffleImage();
     }
-  }, [isClient]);
+  }, [isClient, imageIndex, shuffleImage]);
+
+  useHotkeys('ArrowRight', () => {
+    if (imageIndex === images.length - 1) {
+      setImageIndex(0);
+      return;
+    }
+    setImageIndex(imageIndex + 1);
+  });
+  useHotkeys('ArrowLeft', () => {
+    if (imageIndex === 0) {
+      setImageIndex(images.length - 1);
+      return;
+    }
+    setImageIndex(imageIndex - 1);
+  });
+
+  const vibrant = getVibrant(image);
   return (<>
     <Helmet>
       <title>Chuck Dries</title>
@@ -80,13 +103,25 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
               </ul>
             </div>
           </section>
+          <div>
+            <button
+              className={classnames(
+                'hover:underline inline-block p-3 px-5 m-3 text-lg rounded-md border-2 font-bold font-serif',
+                isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
+              onClick={shuffleImage} 
+              type="button"
+            >
+              Shuffle <span className="relative" style={{top: '2px'}}><ion-icon name="shuffle"></ion-icon></span>
+            </button>
             <Link
               className={classnames(
                 'hover:underline inline-block p-3 px-5 my-3 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
-              isClient && 'text-muted-dark bg-muted-light border-muted-light')} 
+                isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} 
               to="/photogallery"
             >
-            Photography Gallery</Link>
+            Photography Gallery
+            </Link>
+          </div>
         </div>
       </div>
     </main>
@@ -99,7 +134,7 @@ export const query = graphql`
     filter: {
       sourceInstanceName: {eq: "gallery"},
       # images that don't work well
-      base: {nin: ["DSC00340.jpg"]}
+      base: {nin: ["DSC06517.jpg"]}
       childrenImageSharp: {elemMatch: {fluid: {aspectRatio: {gte: 1.4}}}}
       }
   ) {

yarn.lock

@@ -1811,6 +1811,13 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@reecelucas/react-use-hotkeys@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@reecelucas/react-use-hotkeys/-/react-use-hotkeys-1.3.1.tgz#d402853806a6c7880c336f669b40f214a998451f"
+  integrity sha512-TdWJepdTxKuNKfycJK4/6iHjl8PolIZcwtohkXUa3EGvFOAedQJWEKZRGWGSgaSBLHeH6f6JdxuWeyR+wIxA0g==
+  dependencies:
+    shim-keyboard-event-key "^1.0.3"
+
 "@sideway/address@^4.1.0":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -12310,6 +12317,11 @@ shell-quote@1.7.2:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shim-keyboard-event-key@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/shim-keyboard-event-key/-/shim-keyboard-event-key-1.0.3.tgz#9a9441d6b7d1fb25819d86182caf554e821a515c"
+  integrity sha512-PTNRkOxDlZ2+Xz4CbKJJsh/pe1DJdaC+b4HHV02A1aEWNmwh1g9am0ZiU/ktu3uVfQrY3yDHTOVhst3xpLhw2A==
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"