Extract place call logic to its own file (#11494)

* Extract place call logic to its own file

* Simplify makeCall by not using useCallback

* lint fix

src/components/views/rooms/RoomHeader.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Body as BodyText, IconButton, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
@@ -37,15 +37,12 @@ import { _t, getCurrentLanguage } from "../../../languageHandler";
 import { Flex } from "../../utils/Flex";
 import { Box } from "../../utils/Box";
 import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus";
-import LegacyCallHandler from "../../../LegacyCallHandler";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { Action } from "../../../dispatcher/actions";
 import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
 import SdkConfig from "../../../SdkConfig";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
+import { placeCall } from "../../../utils/room/placeCall";
 import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import FacePile from "../elements/FacePile";
@@ -94,34 +91,6 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
         return SdkConfig.get("element_call").use_exclusively && groupCallsEnabled;
     }, [groupCallsEnabled]);
 
-    const placeCall = useCallback(
-        async (callType: CallType, platformCallType: typeof voiceCallType) => {
-            switch (platformCallType) {
-                case "legacy_or_jitsi":
-                    await LegacyCallHandler.instance.placeCall(room.roomId, callType);
-                    break;
-                // TODO: Remove the jitsi_or_element_call case and
-                // use the commented code below
-                case "element_call":
-                case "jitsi_or_element_call":
-                    defaultDispatcher.dispatch<ViewRoomPayload>({
-                        action: Action.ViewRoom,
-                        room_id: room.roomId,
-                        view_call: true,
-                        metricsTrigger: undefined,
-                    });
-                    break;
-
-                // case "jitsi_or_element_call":
-                // TODO: Open dropdown menu to choice between
-                // EC and Jitsi. Waiting on Compound's dropdown
-                // component
-                // break;
-            }
-        },
-        [room.roomId],
-    );
-
     const threadNotifications = useRoomThreadNotifications(room);
     const globalNotificationState = useGlobalNotificationState();
 
@@ -193,8 +162,8 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     <IconButton
                         disabled={!!voiceCallDisabledReason}
                         title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}
-                        onClick={async () => {
+                        onClick={() => {
-                            placeCall(CallType.Voice, voiceCallType);
+                            placeCall(room, CallType.Voice, voiceCallType);
                         }}
                     >
                         <VoiceCallIcon />
@@ -204,7 +173,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     disabled={!!videoCallDisabledReason}
                     title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}
                     onClick={() => {
-                        placeCall(CallType.Video, videoCallType);
+                        placeCall(room, CallType.Video, videoCallType);
                     }}
                 >
                     <VideoCallIcon />

src/hooks/room/useRoomCallStatus.ts

@@ -28,7 +28,7 @@ import { _t } from "../../languageHandler";
 import { useRoomMemberCount } from "../useRoomMembers";
 import { ElementCall } from "../../models/Call";
 
-type CallType = "element_call" | "jitsi_or_element_call" | "legacy_or_jitsi";
+export type PlatformCallType = "element_call" | "jitsi_or_element_call" | "legacy_or_jitsi";
 
 const DEFAULT_DISABLED_REASON = null;
 const DEFAULT_CALL_TYPE = "jitsi_or_element_call";
@@ -42,14 +42,14 @@ export const useRoomCallStatus = (
     room: Room,
 ): {
     voiceCallDisabledReason: string | null;
-    voiceCallType: CallType;
+    voiceCallType: PlatformCallType;
     videoCallDisabledReason: string | null;
-    videoCallType: CallType;
+    videoCallType: PlatformCallType;
 } => {
     const [voiceCallDisabledReason, setVoiceCallDisabledReason] = useState<string | null>(DEFAULT_DISABLED_REASON);
     const [videoCallDisabledReason, setVideoCallDisabledReason] = useState<string | null>(DEFAULT_DISABLED_REASON);
-    const [voiceCallType, setVoiceCallType] = useState<CallType>(DEFAULT_CALL_TYPE);
+    const [voiceCallType, setVoiceCallType] = useState<PlatformCallType>(DEFAULT_CALL_TYPE);
-    const [videoCallType, setVideoCallType] = useState<CallType>(DEFAULT_CALL_TYPE);
+    const [videoCallType, setVideoCallType] = useState<PlatformCallType>(DEFAULT_CALL_TYPE);
 
     const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
     const useElementCallExclusively = useMemo(() => {

src/utils/room/placeCall.ts

@@ -0,0 +1,55 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { CallType } from "matrix-js-sdk/src/webrtc/call";
+import { Room } from "matrix-js-sdk/src/matrix";
+
+import LegacyCallHandler from "../../LegacyCallHandler";
+import { PlatformCallType } from "../../hooks/room/useRoomCallStatus";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../../dispatcher/actions";
+
+/**
+ * Helper to place a call in a room that works with all the legacy modes
+ * @param room the room to place the call in
+ * @param callType the type of call
+ * @param platformCallType the platform to pass the call on
+ */
+export const placeCall = async (room: Room, callType: CallType, platformCallType: PlatformCallType): Promise<void> => {
+    switch (platformCallType) {
+        case "legacy_or_jitsi":
+            await LegacyCallHandler.instance.placeCall(room.roomId, callType);
+            break;
+        // TODO: Remove the jitsi_or_element_call case and
+        // use the commented code below
+        case "element_call":
+        case "jitsi_or_element_call":
+            defaultDispatcher.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                room_id: room.roomId,
+                view_call: true,
+                metricsTrigger: undefined,
+            });
+            break;
+
+        // case "jitsi_or_element_call":
+        // TODO: Open dropdown menu to choice between
+        // EC and Jitsi. Waiting on Compound's dropdown
+        // component
+        // break;
+    }
+};