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 | null>(null); const intervalRef = useRef | 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) => {