mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup call making

Browse Source
This commit is contained in:
m5r 2021-08-13 23:52:38 +08:00
parent a26babc792
commit 800ff5ab99
2 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/phone-calls/hooks/use-make-call.ts
View File

@ -4,7 +4,12 @@ import { Call, Device, TwilioError } from "@twilio/voice-sdk";
import getToken from "../mutations/get-token"; import getToken from "../mutations/get-token";
export default function useMakeCall(recipient: string) { type Params = {
recipient: string;
onHangUp?: () => void;
};
export default function useMakeCall({ recipient, onHangUp }: Params) {
const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null); const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null);
const [device, setDevice] = useState<Device | null>(null); const [device, setDevice] = useState<Device | null>(null);
const [getTokenMutation] = useMutation(getToken); const [getTokenMutation] = useMutation(getToken);
@ -80,15 +85,10 @@ export default function useMakeCall(recipient: string) {
function hangUp() { function hangUp() {
setState("call_ending"); setState("call_ending");
outgoingConnection?.reject();
if (outgoingConnection) { device?.disconnectAll();
outgoingConnection.reject(); device?.destroy();
} onHangUp?.();
if (device) {
device.disconnectAll();
device.destroy();
}
} }
function onDeviceError(error: TwilioError.TwilioError, call?: Call) { function onDeviceError(error: TwilioError.TwilioError, call?: Call) {

40
app/phone-calls/pages/outgoing-call/[recipient].tsx
View File

@ -10,19 +10,20 @@ import Keypad from "../../components/keypad";
import useMakeCall from "../../hooks/use-make-call"; import useMakeCall from "../../hooks/use-make-call";
const OutgoingCall: BlitzPage = () => { const OutgoingCall: BlitzPage = () => {
const router = useRouter();
const recipient = decodeURIComponent(router.params.recipient);
const call = useMakeCall(recipient);
useEffect(() => {
console.log("call.state", call.state);
if (call.state === "ready") {
call.makeCall();
}
}, [call.state]);
useRequireOnboarding(); useRequireOnboarding();
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); 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 pressDigit = useAtom(pressDigitAtom)[1];
const onDigitPressProps = useMemo( const onDigitPressProps = useMemo(
() => (digit: string) => ({ () => (digit: string) => ({
@ -34,16 +35,13 @@ const OutgoingCall: BlitzPage = () => {
}), }),
[call, pressDigit], [call, pressDigit],
); );
const hangUp = useMemo(
() => () => {
call.hangUp();
setPhoneNumber("");
// return router.replace(Routes.KeypadPage()); useEffect(() => {
return router.push(Routes.KeypadPage()); console.log("call.state", call.state);
}, if (call.state === "ready") {
[call, router, setPhoneNumber], call.makeCall();
); }
}, [call.state]);
return ( return (
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white"> <div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
@ -58,7 +56,7 @@ const OutgoingCall: BlitzPage = () => {
<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}> <Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}>
<button <button
onClick={hangUp} onClick={call.hangUp}
className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full" className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full"
> >
<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" /> <FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />