Update call link edit/add name modals

ts/state/smart/CallLinkAddNameModal.tsx

@@ -0,0 +1,60 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+import React, { memo, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useCallingActions } from '../ducks/calling';
+import { getCallLinkSelector } from '../selectors/calling';
+import * as log from '../../logging/log';
+import { getIntl } from '../selectors/user';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { getCallLinkAddNameModalRoomId } from '../selectors/globalModals';
+import { strictAssert } from '../../util/assert';
+import { isCallLinksCreateEnabled } from '../../util/callLinks';
+import { CallLinkAddNameModal } from '../../components/CallLinkAddNameModal';
+
+export const SmartCallLinkAddNameModal = memo(
+  function SmartCallLinkAddNameModal(): JSX.Element | null {
+    strictAssert(isCallLinksCreateEnabled(), 'Call links creation is disabled');
+
+    const roomId = useSelector(getCallLinkAddNameModalRoomId);
+    strictAssert(roomId, 'Expected roomId to be set');
+
+    const i18n = useSelector(getIntl);
+    const callLinkSelector = useSelector(getCallLinkSelector);
+
+    const { updateCallLinkName } = useCallingActions();
+    const { toggleCallLinkAddNameModal } = useGlobalModalActions();
+
+    const callLink = useMemo(() => {
+      return callLinkSelector(roomId);
+    }, [callLinkSelector, roomId]);
+
+    const handleClose = useCallback(() => {
+      toggleCallLinkAddNameModal(null);
+    }, [toggleCallLinkAddNameModal]);
+
+    const handleUpdateCallLinkName = useCallback(
+      (newName: string) => {
+        updateCallLinkName(roomId, newName);
+      },
+      [roomId, updateCallLinkName]
+    );
+
+    if (!callLink) {
+      log.error(
+        'SmartCallLinkEditModal: No call link found for roomId',
+        roomId
+      );
+      return null;
+    }
+
+    return (
+      <CallLinkAddNameModal
+        i18n={i18n}
+        callLink={callLink}
+        onClose={handleClose}
+        onUpdateCallLinkName={handleUpdateCallLinkName}
+      />
+    );
+  }
+);

ts/state/smart/CallLinkEditModal.tsx

@@ -26,13 +26,13 @@ export const SmartCallLinkEditModal = memo(
     const i18n = useSelector(getIntl);
     const callLinkSelector = useSelector(getCallLinkSelector);
 
+    const { updateCallLinkRestrictions, startCallLinkLobby } =
+      useCallingActions();
     const {
-      updateCallLinkName,
-      updateCallLinkRestrictions,
-      startCallLinkLobby,
-    } = useCallingActions();
-    const { toggleCallLinkEditModal, showShareCallLinkViaSignal } =
-      useGlobalModalActions();
+      toggleCallLinkAddNameModal,
+      toggleCallLinkEditModal,
+      showShareCallLinkViaSignal,
+    } = useGlobalModalActions();
 
     const callLink = useMemo(() => {
       return callLinkSelector(roomId);
@@ -52,12 +52,9 @@ export const SmartCallLinkEditModal = memo(
       drop(copyCallLink(callLinkWebUrl));
     }, [callLink]);
 
-    const handleUpdateCallLinkName = useCallback(
-      (newName: string) => {
-        updateCallLinkName(roomId, newName);
-      },
-      [roomId, updateCallLinkName]
-    );
+    const handleOpenCallLinkAddNameModal = useCallback(() => {
+      toggleCallLinkAddNameModal(roomId);
+    }, [roomId, toggleCallLinkAddNameModal]);
 
     const handleUpdateCallLinkRestrictions = useCallback(
       (newRestrictions: CallLinkRestrictions) => {
@@ -91,7 +88,7 @@ export const SmartCallLinkEditModal = memo(
         callLink={callLink}
         onClose={handleClose}
         onCopyCallLink={handleCopyCallLink}
-        onUpdateCallLinkName={handleUpdateCallLinkName}
+        onOpenCallLinkAddNameModal={handleOpenCallLinkAddNameModal}
         onUpdateCallLinkRestrictions={handleUpdateCallLinkRestrictions}
         onShareCallLinkViaSignal={handleShareCallLinkViaSignal}
         onStartCallLinkLobby={handleStartCallLinkLobby}

ts/state/smart/GlobalModalContainer.tsx

@@ -27,6 +27,11 @@ import { getGlobalModalsState } from '../selectors/globalModals';
 import { SmartEditNicknameAndNoteModal } from './EditNicknameAndNoteModal';
 import { SmartNotePreviewModal } from './NotePreviewModal';
 import { SmartCallLinkEditModal } from './CallLinkEditModal';
+import { SmartCallLinkAddNameModal } from './CallLinkAddNameModal';
+
+function renderCallLinkAddNameModal(): JSX.Element {
+  return <SmartCallLinkAddNameModal />;
+}
 
 function renderCallLinkEditModal(): JSX.Element {
   return <SmartCallLinkEditModal />;
@@ -95,6 +100,7 @@ export const SmartGlobalModalContainer = memo(
     const {
       aboutContactModalContactId,
       addUserToAnotherGroupModalContactId,
+      callLinkAddNameModalRoomId,
       callLinkEditModalRoomId,
       contactModalState,
       deleteMessagesProps,
@@ -174,6 +180,7 @@ export const SmartGlobalModalContainer = memo(
         addUserToAnotherGroupModalContactId={
           addUserToAnotherGroupModalContactId
         }
+        callLinkAddNameModalRoomId={callLinkAddNameModalRoomId}
         callLinkEditModalRoomId={callLinkEditModalRoomId}
         contactModalState={contactModalState}
         editHistoryMessages={editHistoryMessages}
@@ -197,6 +204,7 @@ export const SmartGlobalModalContainer = memo(
         isWhatsNewVisible={isWhatsNewVisible}
         renderAboutContactModal={renderAboutContactModal}
         renderAddUserToAnotherGroup={renderAddUserToAnotherGroup}
+        renderCallLinkAddNameModal={renderCallLinkAddNameModal}
         renderCallLinkEditModal={renderCallLinkEditModal}
         renderContactModal={renderContactModal}
         renderEditHistoryMessagesModal={renderEditHistoryMessagesModal}