Redux state: Allow multiple calls to be stored

ts/components/IncomingCallBar.tsx

@@ -6,17 +6,25 @@ import Tooltip from 'react-tooltip-lite';
 import { Avatar } from './Avatar';
 import { ContactName } from './conversation/ContactName';
 import { LocalizerType } from '../types/Util';
-import {
-  AcceptCallType,
-  CallDetailsType,
-  DeclineCallType,
-} from '../state/ducks/calling';
+import { ColorType } from '../types/Colors';
+import { AcceptCallType, DeclineCallType } from '../state/ducks/calling';
 
 export type PropsType = {
   acceptCall: (_: AcceptCallType) => void;
-  callDetails?: CallDetailsType;
   declineCall: (_: DeclineCallType) => void;
   i18n: LocalizerType;
+  call: {
+    isVideoCall: boolean;
+  };
+  conversation: {
+    id: string;
+    avatarPath?: string;
+    color?: ColorType;
+    title: string;
+    name?: string;
+    phoneNumber?: string;
+    profileName?: string;
+  };
 };
 
 type CallButtonProps = {
@@ -54,23 +62,21 @@ const CallButton = ({
 
 export const IncomingCallBar = ({
   acceptCall,
-  callDetails,
   declineCall,
   i18n,
+  call,
+  conversation,
 }: PropsType): JSX.Element | null => {
-  if (!callDetails) {
-    return null;
-  }
-
+  const { isVideoCall } = call;
   const {
+    id: conversationId,
     avatarPath,
-    callId,
     color,
     title,
     name,
     phoneNumber,
     profileName,
-  } = callDetails;
+  } = conversation;
 
   return (
     <div className="module-incoming-call">
@@ -103,21 +109,17 @@ export const IncomingCallBar = ({
             dir="auto"
             className="module-incoming-call__contact--message-text"
           >
-            {i18n(
-              callDetails.isVideoCall
-                ? 'incomingVideoCall'
-                : 'incomingAudioCall'
-            )}
+            {i18n(isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall')}
           </div>
         </div>
       </div>
       <div className="module-incoming-call__actions">
-        {callDetails.isVideoCall ? (
+        {isVideoCall ? (
           <>
             <CallButton
               classSuffix="decline"
               onClick={() => {
-                declineCall({ callId });
+                declineCall({ conversationId });
               }}
               tabIndex={0}
               tooltipContent={i18n('declineCall')}
@@ -125,7 +127,7 @@ export const IncomingCallBar = ({
             <CallButton
               classSuffix="accept-video-as-audio"
               onClick={() => {
-                acceptCall({ callId, asVideoCall: false });
+                acceptCall({ conversationId, asVideoCall: false });
               }}
               tabIndex={0}
               tooltipContent={i18n('acceptCallWithoutVideo')}
@@ -133,7 +135,7 @@ export const IncomingCallBar = ({
             <CallButton
               classSuffix="accept-video"
               onClick={() => {
-                acceptCall({ callId, asVideoCall: true });
+                acceptCall({ conversationId, asVideoCall: true });
               }}
               tabIndex={0}
               tooltipContent={i18n('acceptCall')}
@@ -144,7 +146,7 @@ export const IncomingCallBar = ({
             <CallButton
               classSuffix="decline"
               onClick={() => {
-                declineCall({ callId });
+                declineCall({ conversationId });
               }}
               tabIndex={0}
               tooltipContent={i18n('declineCall')}
@@ -152,7 +154,7 @@ export const IncomingCallBar = ({
             <CallButton
               classSuffix="accept-audio"
               onClick={() => {
-                acceptCall({ callId, asVideoCall: false });
+                acceptCall({ conversationId, asVideoCall: false });
               }}
               tabIndex={0}
               tooltipContent={i18n('acceptCall')}