import type { BlitzPage } from "blitz"; import { Routes, useRouter } from "blitz"; import { useEffect, useMemo } from "react"; import { atom, useAtom } from "jotai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons"; import useRequireOnboarding from "../../../core/hooks/use-require-onboarding"; import Keypad from "../../components/keypad"; import useMakeCall from "../../hooks/use-make-call"; const OutgoingCall: BlitzPage = () => { useRequireOnboarding(); const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); const router = useRouter(); const recipient = decodeURIComponent(router.params.recipient); const onHangUp = useMemo( () => () => { setPhoneNumber(""); // return router.replace(Routes.KeypadPage()); return router.push(Routes.KeypadPage()); }, [router, setPhoneNumber], ); const call = useMakeCall({ recipient, onHangUp }); const pressDigit = useAtom(pressDigitAtom)[1]; const onDigitPressProps = useMemo( () => (digit: string) => ({ onPress() { pressDigit(digit); call.sendDigits(digit); }, }), [call, pressDigit], ); useEffect(() => { console.log("call.state", call.state); if (call.state === "ready") { call.makeCall(); } }, [call.state]); return (
{recipient}
{phoneNumber}
{translateState(call.state)}
); function translateState(state: typeof call.state): string { switch (state) { case "initial": case "ready": return "Connecting..."; case "calling": return "Calling..."; case "call_in_progress": return ""; // TODO display time elapsed case "call_ending": return "Call ending..."; case "call_ended": return "Call ended"; } } }; const phoneNumberAtom = atom(""); const pressDigitAtom = atom(null, (get, set, digit: string) => { if (get(phoneNumberAtom).length > 17) { return; } set(phoneNumberAtom, (prevState) => prevState + digit); }); OutgoingCall.authenticate = { redirectTo: Routes.SignIn() }; export default OutgoingCall;