bind enter events as a submit to Popups

add s as key to submit a reshuffle in shuffled videos

src/pages/RandomPage/RandomPage.test.js

@@ -1,6 +1,8 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 import RandomPage from './RandomPage';
+import {callAPI} from '../../utils/Api';
+import PopupBase from '../../elements/Popups/PopupBase';
 
 describe('<RandomPage/>', function () {
     it('renders without crashing ', function () {
@@ -45,4 +47,20 @@ describe('<RandomPage/>', function () {
 
         expect(wrapper.find('Tag')).toHaveLength(2);
     });
+
+    it('test shortkey press', function () {
+        let events = [];
+        document.addEventListener = jest.fn((event, cb) => {
+            events[event] = cb;
+        });
+
+        shallow(<RandomPage/>);
+
+        callAPIMock({rows: [], tags: []});
+
+        // trigger the keypress event
+        events.keyup({key: 's'});
+
+        expect(callAPI).toBeCalledTimes(1);
+    });
 });

src/pages/RandomPage/RandomPage.tsx

@@ -7,6 +7,7 @@ import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {callAPI} from '../../utils/Api';
 import {TagType} from '../../types/VideoTypes';
 import {VideoTypes} from '../../types/ApiTypes';
+import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
 
 interface state {
     videos: VideoTypes.VideoUnloadedType[];
@@ -29,12 +30,20 @@ class RandomPage extends React.Component<{}, state> {
             videos: [],
             tags: []
         };
+
+        this.keypress = this.keypress.bind(this);
     }
 
     componentDidMount(): void {
+        addKeyHandler(this.keypress);
+
         this.loadShuffledvideos(4);
     }
 
+    componentWillUnmount(): void {
+        removeKeyHandler(this.keypress);
+    }
+
     render(): JSX.Element {
         return (
             <div>
@@ -75,8 +84,6 @@ class RandomPage extends React.Component<{}, state> {
      */
     loadShuffledvideos(nr: number): void {
         callAPI<GetRandomMoviesType>('video.php', {action: 'getRandomMovies', number: nr}, result => {
-            console.log(result);
-
             this.setState({videos: []}); // needed to trigger rerender of main videoview
             this.setState({
                 videos: result.rows,
@@ -84,6 +91,17 @@ class RandomPage extends React.Component<{}, state> {
             });
         });
     }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    private keypress(event: KeyboardEvent): void {
+        // bind s to shuffle
+        if (event.key === 's') {
+            this.loadShuffledvideos(4);
+        }
+    }
 }
 
 export default RandomPage;