From 40e178d5f37a0a79719d2f5e1eca9928b533d132 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 19 Jun 2021 11:38:16 -0700
Subject: [PATCH] Rewrite keyboard handler to work in SSR
---
package.json | 1 -
src/pages/index.js | 44 ++++++++++++++++++++++++++++----------------
yarn.lock | 12 ------------
3 files changed, 28 insertions(+), 29 deletions(-)
diff --git a/package.json b/package.json
index 44d5e04..d8cf12b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
"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",
diff --git a/src/pages/index.js b/src/pages/index.js
index e79738e..94f0299 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,7 +4,6 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
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';
@@ -44,20 +43,33 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
}
}, [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);
- });
+ React.useEffect(() => {
+ const keyListener = (e) => {
+ switch (e.code) {
+ case 'ArrowRight': {
+ if (imageIndex === images.length - 1) {
+ setImageIndex(0);
+ return;
+ }
+ setImageIndex(imageIndex + 1);
+ return;
+ }
+
+ case 'ArrowLeft': {
+ if (imageIndex === 0) {
+ setImageIndex(images.length - 1);
+ return;
+ }
+ setImageIndex(imageIndex - 1);
+ return;
+ }
+ }
+ };
+ document.addEventListener('keydown', keyListener);
+ return () => {
+ document.removeEventListener('keydown', keyListener);
+ };
+ }, [imageIndex, images.length]);
const vibrant = getVibrant(image);
return (<>
@@ -106,7 +118,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<div>
<button
className={classnames(
- 'hover:underline inline-block p-3 px-5 m-3 text-lg rounded-md border-2 font-bold font-serif',
+ 'hover:underline inline-block p-3 px-5 my-3 mr-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"
diff --git a/yarn.lock b/yarn.lock
index e4c349c..5709c6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1811,13 +1811,6 @@
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"
@@ -12317,11 +12310,6 @@ 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"