commit 1170c32a8bb5681a38e5141f34256cf97e7ba6e8
author simon <tran.simon2@gmail.com> Mon Oct 31 14:51:31 2022 -0400
committer simon <tran.simon2@gmail.com> Tue Nov 01 11:56:50 2022 -0400
tree d2b89e547a726ccb930d473850057b4d7c1ce167
parent b62c6783fce9ce89857c3f34da7cafdb9f323a51

Add routing for call page

Enable buttons to start a call.
Improve ConversationListItem context menu layout.
Move calling buttons from `Button.tsx` to `CallButtons.tsx`.
Add CallProvider

GitLab: #78
Change-Id: I921aa11383bf39fae18e59b01afb00dc66b0d5e6

client/src/components/Button.tsx

diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 2325ecb..9264355 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -15,7 +15,7 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { QuestionMark } from '@mui/icons-material';
+import { QuestionMark, RadioButtonChecked, RadioButtonUnchecked } from '@mui/icons-material';
 import { Box, ClickAwayListener, IconButton, IconButtonProps, Popper, SvgIconProps } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import EmojiPicker, { IEmojiData } from 'emoji-picker-react';
@@ -26,32 +26,22 @@
   Arrow3Icon,
   ArrowIcon,
   AudioCallIcon,
-  CallEndIcon,
   CameraIcon,
   CameraInBubbleIcon,
   CancelIcon,
-  ChatBubbleIcon,
   CrossedEyeIcon,
   CrossIcon,
   EmojiIcon,
-  ExtensionIcon,
   EyeIcon,
   FolderIcon,
-  FullscreenIcon,
-  GroupAddIcon,
   InfoIcon,
   ListIcon,
-  MicroIcon,
   MicroInBubbleIcon,
   PaperClipIcon,
   PenIcon,
   PeopleWithPlusSignIcon,
-  RecordingIcon,
   SaltireIcon,
-  ScreenShareIcon,
   VideoCallIcon,
-  VideoCameraIcon,
-  VolumeIcon,
 } from './SvgIcon';
 import CustomTooltip from './Tooltip';
 
@@ -157,81 +147,27 @@
   },
 }));
 
-export const CallingChatButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="chat" sx={{ color: 'white' }}>
-      <ChatBubbleIcon />
-    </IconButton>
-  );
+export type ToggleIconButtonProps = IconButtonProps & {
+  selected: boolean;
+  toggle: () => void;
+  IconOn?: ComponentType<SvgIconProps>;
+  IconOff?: ComponentType<SvgIconProps>;
 };
-
-export const CallingEndButton = (props: IconButtonProps) => {
+export const ToggleIconButton = ({
+  IconOn = RadioButtonChecked,
+  IconOff = RadioButtonUnchecked,
+  selected,
+  toggle,
+  ...props
+}: ToggleIconButtonProps) => {
   return (
-    <IconButton {...props} aria-label="end call" sx={{ color: 'white', backgroundColor: 'red' }}>
-      <CallEndIcon />
-    </IconButton>
-  );
-};
-
-export const CallingExtensionButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="extensions" sx={{ color: 'white' }}>
-      <ExtensionIcon />
-    </IconButton>
-  );
-};
-
-export const CallingFullscreenButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="fullscreen" sx={{ color: 'white' }}>
-      <FullscreenIcon />
-    </IconButton>
-  );
-};
-
-export const CallingGroupButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="group options" sx={{ color: 'white' }}>
-      <GroupAddIcon />
-    </IconButton>
-  );
-};
-
-export const CallingMicButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="microphone options" sx={{ color: 'white' }}>
-      <MicroIcon />
-    </IconButton>
-  );
-};
-
-export const CallingRecordButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="recording options" sx={{ color: 'white' }}>
-      <RecordingIcon />
-    </IconButton>
-  );
-};
-
-export const CallingScreenShareButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="screen share" sx={{ color: 'white' }}>
-      <ScreenShareIcon />
-    </IconButton>
-  );
-};
-
-export const CallingVideoCameraButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="camera options" sx={{ color: 'white' }}>
-      <VideoCameraIcon />
-    </IconButton>
-  );
-};
-export const CallingVolumeButton = (props: IconButtonProps) => {
-  return (
-    <IconButton {...props} aria-label="volume options" sx={{ color: 'white' }}>
-      <VolumeIcon />
+    <IconButton
+      {...props}
+      onClick={() => {
+        toggle();
+      }}
+    >
+      {selected ? <IconOn /> : <IconOff />}
     </IconButton>
   );
 };