Redux state: Allow multiple calls to be stored

ts/components/CallNeedPermissionScreen.tsx

@@ -2,14 +2,21 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useRef, useEffect } from 'react';
-import { CallDetailsType } from '../state/ducks/calling';
 import { LocalizerType } from '../types/Util';
 import { Avatar } from './Avatar';
 import { Intl } from './Intl';
 import { ContactName } from './conversation/ContactName';
+import { ColorType } from '../types/Colors';
 
 interface Props {
-  callDetails: CallDetailsType;
+  conversation: {
+    avatarPath?: string;
+    color?: ColorType;
+    name?: string;
+    phoneNumber?: string;
+    profileName?: string;
+    title: string;
+  };
   i18n: LocalizerType;
   close: () => void;
 }
@@ -17,11 +24,11 @@ interface Props {
 const AUTO_CLOSE_MS = 10000;
 
 export const CallNeedPermissionScreen: React.FC<Props> = ({
-  callDetails,
+  conversation,
   i18n,
   close,
 }) => {
-  const title = callDetails.title || i18n('unknownContact');
+  const title = conversation.title || i18n('unknownContact');
 
   const autoCloseAtRef = useRef<number>(Date.now() + AUTO_CLOSE_MS);
   useEffect(() => {
@@ -32,15 +39,15 @@ export const CallNeedPermissionScreen: React.FC<Props> = ({
   return (
     <div className="module-call-need-permission-screen">
       <Avatar
-        avatarPath={callDetails.avatarPath}
-        color={callDetails.color || 'ultramarine'}
+        avatarPath={conversation.avatarPath}
+        color={conversation.color || 'ultramarine'}
         noteToSelf={false}
         conversationType="direct"
         i18n={i18n}
-        name={callDetails.name}
-        phoneNumber={callDetails.phoneNumber}
-        profileName={callDetails.profileName}
-        title={callDetails.title}
+        name={conversation.name}
+        phoneNumber={conversation.phoneNumber}
+        profileName={conversation.profileName}
+        title={conversation.title}
         size={112}
       />