Move through posters with keyboard \o/

frontend/js/components/list/posters.js

@@ -1,5 +1,6 @@
 import React from "react"
 
+import { Map } from "immutable"
 import fuzzy from "fuzzy";
 import InfiniteScroll from "react-infinite-scroller";
 
@@ -103,7 +104,7 @@ export default class ListPosters extends React.PureComponent {
           hasMore={this.state.hasMore}
           loadMore={this.loadMore}
           selectedImdbId={this.props.selectedImdbId}
-          onClick={this.props.onClick}
+          selectPoster={this.props.onClick}
         />
       </div>
     );
@@ -114,6 +115,47 @@ class Posters extends React.PureComponent {
   constructor(props) {
     super(props);
   }
+
+  move(event) {
+    // Detect which direction to go
+    const keyToDiff = Map({
+      "ArrowRight": 1,
+      "l": 1,
+      "ArrowLeft": -1,
+      "h": -1,
+      "ArrowUp": -6,
+      "k": -6,
+      "ArrowDown": 6,
+      "j": 6,
+    });
+
+    if (! keyToDiff.has(event.key) ) {
+      return;
+    }
+    var diff = keyToDiff.get(event.key);
+
+    // Don't scroll when changing poster
+    event.preventDefault();
+
+    // Get the index of the currently selected item
+    const idx = this.props.elmts.keySeq().findIndex(k => k === this.props.selectedImdbId);
+
+    var newIdx = idx + diff;
+
+    // Handle edge cases
+    if (newIdx > this.props.elmts.size -1) {
+      newIdx = this.props.elmts.size -1;
+    } else if (newIdx < 0) {
+      newIdx = 0;
+    }
+
+    // Get the imdbID of the newly selected item
+    var selectedImdb = Object.keys(this.props.elmts.toJS())[newIdx];
+
+    // Select the movie
+    this.props.selectPoster(selectedImdb);
+  }
+
   render() {
     if (this.props.loading) {
       return (<Loader />);
@@ -128,7 +170,9 @@ class Posters extends React.PureComponent {
     }
 
     return (
-      <div>
+      <div tabIndex="0"
+          onKeyDown={(event) => this.move(event)}
+        >
         <InfiniteScroll
           hasMore={this.props.hasMore}
           loadMore={this.props.loadMore}
@@ -154,7 +198,7 @@ class Posters extends React.PureComponent {
                   data={movie}
                   key={`poster-${imdbId}`}
                   selected={selected}
-                  onClick={() => this.props.onClick(imdbId)}
+                  onClick={() => this.props.selectPoster(imdbId)}
                 />
               </div>
             )