From 0e280ceb27b084261c352717b36060a618f08095 Mon Sep 17 00:00:00 2001 From: m5r Date: Sun, 8 Aug 2021 19:46:32 +0800 Subject: [PATCH] wire up some stuff in outgoing call page --- .../pages/outgoing-call/[recipient].tsx | 154 ++++++------------ 1 file changed, 52 insertions(+), 102 deletions(-) diff --git a/app/phone-calls/pages/outgoing-call/[recipient].tsx b/app/phone-calls/pages/outgoing-call/[recipient].tsx index b0ba02c..0df1e62 100644 --- a/app/phone-calls/pages/outgoing-call/[recipient].tsx +++ b/app/phone-calls/pages/outgoing-call/[recipient].tsx @@ -1,22 +1,24 @@ import type { BlitzPage } from "blitz"; import { Routes, useMutation, useRouter } from "blitz"; -import type { FunctionComponent } from "react"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { atom, useAtom } from "jotai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons"; -import { usePress } from "@react-aria/interactions"; import type { TwilioError } from "@twilio/voice-sdk"; import { Device, Call } from "@twilio/voice-sdk"; import getToken from "../../mutations/get-token"; import useRequireOnboarding from "../../../core/hooks/use-require-onboarding"; +import Keypad from "../../components/keypad"; const OutgoingCall: BlitzPage = () => { const router = useRouter(); const recipient = decodeURIComponent(router.params.recipient); + const [outgoingConnection, setOutgoingConnection] = useState(null); const [device, setDevice] = useState(null); const [getTokenMutation] = useMutation(getToken); + const [deviceState, setDeviceState] = useState("initial"); + async function makeCall() { const token = await getTokenMutation(); console.log("token", token); @@ -38,6 +40,10 @@ const OutgoingCall: BlitzPage = () => { }); } + useEffect(() => { + // make call + }); + useEffect(() => { if (!device) { return; @@ -61,109 +67,60 @@ const OutgoingCall: BlitzPage = () => { useRequireOnboarding(); const phoneNumber = useAtom(phoneNumberAtom)[0]; + const pressDigit = useAtom(pressDigitAtom)[1]; + const onDigitPressProps = useMemo( + () => (digit: string) => ({ + onPress() { + pressDigit(digit); + + if (outgoingConnection) { + outgoingConnection.sendDigits(digit); + } + }, + }), + [outgoingConnection, pressDigit], + ); + const hangUp = useMemo( + () => () => { + if (outgoingConnection) { + outgoingConnection.reject(); + } + + if (device) { + device.disconnectAll(); + device.destroy(); + device.unregister(); + } + + // return router.replace(Routes.KeypadPage()); + return router.push(Routes.KeypadPage()); + }, + [device, outgoingConnection, router], + ); return (
+ {recipient} +
+ +
{phoneNumber}
-
- - - - ABC - - - DEF - - - - - GHI - - - JKL - - - MNO - - - - - PQRS - - - TUV - - - WXYZ - - - - - - - - -
- -
-
-
+ +
+ +
+
); }; -const ZeroDigit: FunctionComponent = () => { - const timeoutRef = useRef | null>(null); - const pressDigit = useAtom(pressDigitAtom)[1]; - const longPressDigit = useAtom(longPressDigitAtom)[1]; - const { pressProps } = usePress({ - onPressStart() { - pressDigit("0"); - timeoutRef.current = setTimeout(() => { - longPressDigit("+"); - }, 750); - }, - onPressEnd() { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - }, - }); - - return ( -
- 0 + -
- ); -}; - -const Row: FunctionComponent = ({ children }) => ( -
{children}
-); - -const Digit: FunctionComponent<{ digit: string }> = ({ children, digit }) => { - const pressDigit = useAtom(pressDigitAtom)[1]; - const { pressProps } = usePress({ - onPress() { - pressDigit(digit); - }, - }); - - return ( -
- {digit} - {children} -
- ); -}; - -const DigitLetters: FunctionComponent = ({ children }) =>
{children}
; +type DeviceState = "initial" | ""; const phoneNumberAtom = atom(""); const pressDigitAtom = atom(null, (get, set, digit: string) => { @@ -173,13 +130,6 @@ const pressDigitAtom = atom(null, (get, set, digit: string) => { 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); -}); OutgoingCall.authenticate = { redirectTo: Routes.SignIn() };