Add endCall function to CallContext
- Add endCall function to send the `CallEnd` message, remove WebRTC
tracks, close WebRTC connection and redirect to the conversation.
- Remove `CallRefuse` websocket message type because it was not being
used.
GitLab: #152
Change-Id: I07a6618549393257c0ef7a4025f80398d05b9c83
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 404bfae..6e77b39 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -18,9 +18,8 @@
import { IconButton, IconButtonProps, PaletteColor } from '@mui/material';
import { styled, Theme } from '@mui/material/styles';
-import React, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
import { CallContext } from '../contexts/CallProvider';
import { ExpandableButton, ExpandableButtonProps, ShapedButtonProps, ToggleIconButton } from './Button';
@@ -98,13 +97,12 @@
};
export const CallingEndButton = (props: ExpandableButtonProps) => {
- const navigate = useNavigate();
+ const { endCall } = useContext(CallContext);
return (
<ColoredCallButton
paletteColor={(theme) => theme.palette.error}
onClick={() => {
- // TODO: Send event to end call
- navigate('/');
+ endCall();
}}
aria-label="call end"
Icon={CallEndIcon}
@@ -264,13 +262,13 @@
// Calling pending/receiving interface
export const CallingCancelButton = (props: IconButtonProps) => {
- const navigate = useNavigate();
+ const { endCall } = useContext(CallContext);
return (
<ColoredCallButton
aria-label="cancel call"
onClick={() => {
- navigate(-1);
+ endCall();
}}
Icon={CallEndIcon}
paletteColor={(theme) => theme.palette.error}
@@ -312,12 +310,12 @@
};
export const CallingRefuseButton = (props: IconButtonProps) => {
- const navigate = useNavigate();
+ const { endCall } = useContext(CallContext);
return (
<ColoredCallButton
aria-label="refuse call"
onClick={() => {
- navigate(-1);
+ endCall();
}}
paletteColor={(theme) => theme.palette.error}
Icon={RoundCloseIcon}