Navigate between featured sandboxes using left and right arrow keys (codesandbox#1452)

Author: Chiamaka

.all-contributorsrc

@@ -689,7 +689,16 @@
       "contributions": [
         "code"
       ]
-    }
+    },
+    {
+      "login": "chiamaka",
+      "name": "Chiamaka Nwolisa",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/2737103?v=4",
+      "profile": "https://www.chiamaka.xyz/",
+      "contributions": [
+        "code"
+      ]
+    },
   ],
   "repoType": "github"
 }

packages/homepage/src/pages/explore.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import getTemplate from 'common/templates';
 import { protocolAndHost } from 'common/utils/url-generator';
+import { ARROW_LEFT, ARROW_RIGHT } from 'common/utils/keycodes';
 
 import TitleAndMetaTags from '../components/TitleAndMetaTags';
 import PageContainer from '../components/PageContainer';
@@ -44,6 +45,21 @@ export default class Explore extends React.PureComponent {
     // render and server render are not the same. So we force a rerender.
     // eslint-disable-next-line
     this.setState({ renderModal: true });
+
+    document.addEventListener('keyup', ({ keyCode }) => {
+      const { featuredSandboxIndex } = this.state;
+      switch (keyCode) {
+        case ARROW_LEFT:
+          if (featuredSandboxIndex === 0) return;
+          this.navigateToPreviousSandbox();
+          break;
+        case ARROW_RIGHT:
+          if (featuredSandboxIndex === featuredSandboxes.length - 1) return;
+          this.navigateToNextSandbox();
+          break;
+        default:
+      }
+    });
   }
 
   loadSandboxes = () => {
@@ -99,6 +115,18 @@ export default class Explore extends React.PureComponent {
     this.openSandbox(currentIndex + 1);
   };
 
+  navigateToNextSandbox = () => {
+    this.setState(state => ({
+      featuredSandboxIndex: state.featuredSandboxIndex + 1,
+    }));
+  };
+
+  navigateToPreviousSandbox = () => {
+    this.setState(state => ({
+      featuredSandboxIndex: state.featuredSandboxIndex - 1,
+    }));
+  };
+
   getCurrentIndex = () =>
     this.state.selectedSandbox
       ? this.state.sandboxes.findIndex(
@@ -156,11 +184,7 @@ export default class Explore extends React.PureComponent {
               <Dots>
                 <StyledLeftArrow
                   disable={featuredSandboxIndex === 0}
-                  onClick={() =>
-                    this.setState(state => ({
-                      featuredSandboxIndex: state.featuredSandboxIndex - 1,
-                    }))
-                  }
+                  onClick={this.navigateToPreviousSandbox}
                 />
 
                 {featuredSandboxes.map((sandbox, i) => {
@@ -186,11 +210,7 @@ export default class Explore extends React.PureComponent {
                   disable={
                     featuredSandboxIndex === featuredSandboxes.length - 1
                   }
-                  onClick={() =>
-                    this.setState(state => ({
-                      featuredSandboxIndex: state.featuredSandboxIndex + 1,
-                    }))
-                  }
+                  onClick={this.navigateToNextSandbox}
                 />
               </Dots>
             </Navigation>