From 98485bd03413e91ccfc095e29f07a03b166c43e9 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Wed, 1 Sep 2021 06:42:39 +0800
Subject: [PATCH] allow typing phone number with desktop keyboard

---
 app/phone-calls/hooks/use-key-press.ts | 17 +++++++++++++++++
 app/phone-calls/pages/keypad.tsx       | 14 +++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 app/phone-calls/hooks/use-key-press.ts

diff --git a/app/phone-calls/hooks/use-key-press.ts b/app/phone-calls/hooks/use-key-press.ts
new file mode 100644
index 0000000..7ae1823
--- /dev/null
+++ b/app/phone-calls/hooks/use-key-press.ts
@@ -0,0 +1,17 @@
+import { useCallback, useEffect } from "react";
+
+export default function useKeyPress(onKeyPress: (key: string) => void) {
+	const onKeyDown = useCallback(
+		({ key }: KeyboardEvent) => {
+			onKeyPress(key);
+		},
+		[onKeyPress],
+	);
+
+	useEffect(() => {
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, [onKeyDown]);
+}
diff --git a/app/phone-calls/pages/keypad.tsx b/app/phone-calls/pages/keypad.tsx
index 9b0feb7..966828d 100644
--- a/app/phone-calls/pages/keypad.tsx
+++ b/app/phone-calls/pages/keypad.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useRef } from "react";
 import type { BlitzPage } from "blitz";
-import { Link, Routes, useRouter } from "blitz";
+import { Routes, useRouter } from "blitz";
 import { atom, useAtom } from "jotai";
 import { usePress } from "@react-aria/interactions";
 import { Transition } from "@headlessui/react";
@@ -12,6 +12,7 @@ import Layout from "../../core/layouts/layout";
 import Keypad from "../components/keypad";
 import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
 import usePhoneCalls from "../hooks/use-phone-calls";
+import useKeyPress from "../hooks/use-key-press";
 
 const KeypadPage: BlitzPage = () => {
 	useRequireOnboarding();
@@ -22,6 +23,13 @@ const KeypadPage: BlitzPage = () => {
 	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 	const pressDigit = useAtom(pressDigitAtom)[1];
+	useKeyPress((key) => {
+		if (key === "Backspace") {
+			return removeDigit();
+		}
+
+		pressDigit(key);
+	});
 	const longPressDigit = useAtom(longPressDigitAtom)[1];
 	const onZeroPressProps = {
 		onPressStart() {
@@ -119,6 +127,10 @@ const pressDigitAtom = atom(null, (get, set, digit: string) => {
 		return;
 	}
 
+	if ("0123456789+#*".indexOf(digit) === -1) {
+		return;
+	}
+
 	set(phoneNumberAtom, (prevState) => prevState + digit);
 });
 const longPressDigitAtom = atom(null, (get, set, replaceWith: string) => {