import type { BlitzPage } from "blitz"; import { Link, Routes } from "blitz"; import { useRef } from "react"; import { atom, useAtom } from "jotai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons"; import Layout from "../../core/layouts/layout"; import Keypad from "../components/keypad"; import useRequireOnboarding from "../../core/hooks/use-require-onboarding"; const KeypadPage: BlitzPage = () => { useRequireOnboarding(); const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); const pressBackspace = useAtom(pressBackspaceAtom)[1]; const timeoutRef = useRef | null>(null); const pressDigit = useAtom(pressDigitAtom)[1]; const longPressDigit = useAtom(longPressDigitAtom)[1]; const onZeroPressProps = { onPressStart() { pressDigit("0"); timeoutRef.current = setTimeout(() => { longPressDigit("+"); }, 750); }, onPressEnd() { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }, }; const onDigitPressProps = (digit: string) => ({ onPress() { pressDigit(digit); }, }); return (
{phoneNumber}
setPhoneNumber("")} className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full" >
); }; const phoneNumberAtom = atom(""); const pressDigitAtom = atom(null, (get, set, digit: string) => { if (get(phoneNumberAtom).length > 17) { return; } set(phoneNumberAtom, (prevState) => prevState + digit); }); const longPressDigitAtom = atom(null, (get, set, replaceWith: string) => { if (get(phoneNumberAtom).length > 17) { return; } set(phoneNumberAtom, (prevState) => prevState.slice(0, -1) + replaceWith); }); const pressBackspaceAtom = atom(null, (get, set) => { if (get(phoneNumberAtom).length === 0) { return; } set(phoneNumberAtom, (prevState) => prevState.slice(0, -1)); }); KeypadPage.getLayout = (page) => {page}; KeypadPage.authenticate = { redirectTo: Routes.SignIn() }; export default KeypadPage;