feat(user-selection): allow jumping to user by typing id

This allows typing a user id and then pressing enter to jump directly to
a user from the user selection screen (active or inactive).

The use case serving as motivation for this enhancement is scanning a
Code 39 barcode, which is only required to contain the user id and
start-/stop characters. This very short barcode can be 3d-printed on
mate tags and enables users to buy something using only the barcode
scanner. This way, they don't have to touch the screen, which in
combination with a stationary scanner allows for a completely touchless
interface.

Closely related to strichliste#111, but with smaller space required for the
barcode.

src/components/user/views/user/user.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, useHistory } from 'react-router-dom';
 
 import { useFilteredUsers } from '../../../../store';
 import { startLoadingUsers } from '../../../../store/reducers';
@@ -27,6 +27,8 @@ export const User = (props: UserProps) => {
     startLoadingUsers(dispatch);
   }, [props.isActive, dispatch]);
 
+  useAllowJumpingToUserByKeyboard();
+
   return (
     <>
       <ScrollToTop />
@@ -56,3 +58,42 @@ export const User = (props: UserProps) => {
     </>
   );
 };
+
+const useAllowJumpingToUserByKeyboard = () => {
+  const [typedUserId, setTypedUserId] = React.useState('');
+
+  const history = useHistory();
+
+  const keyDownHandler = React.useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        const targetRoute = `/user/${typedUserId}`;
+        setTypedUserId('');
+        history.push(targetRoute);
+        return;
+      }
+
+      if (e.key === 'Backspace') {
+        setTypedUserId(typedUserId.slice(0, -1));
+        return;
+      }
+
+      const isPrintableKey = e.key.length === 1;
+
+      if (!isPrintableKey) {
+        return;
+      }
+
+      setTypedUserId(typedUserId + e.key);
+    },
+    [history, typedUserId]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', keyDownHandler);
+    // Remove event listeners on cleanup
+    return () => {
+      window.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [keyDownHandler, typedUserId]);
+};