Removes ReactWrapperView

ts/state/smart/GlobalModalContainer.tsx

@@ -1,22 +1,25 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+
+import type { GlobalModalsStateType } from '../ducks/globalModals';
 import type { StateType } from '../reducer';
+import { ErrorModal } from '../../components/ErrorModal';
 import { GlobalModalContainer } from '../../components/GlobalModalContainer';
+import { SmartAddUserToAnotherGroupModal } from './AddUserToAnotherGroupModal';
 import { SmartContactModal } from './ContactModal';
 import { SmartForwardMessageModal } from './ForwardMessageModal';
 import { SmartProfileEditorModal } from './ProfileEditorModal';
 import { SmartSafetyNumberModal } from './SafetyNumberModal';
 import { SmartSendAnywayDialog } from './SendAnywayDialog';
+import { SmartShortcutGuideModal } from './ShortcutGuideModal';
+import { SmartStickerPreviewModal } from './StickerPreviewModal';
 import { SmartStoriesSettingsModal } from './StoriesSettingsModal';
 import { getConversationsStoppingSend } from '../selectors/conversations';
-import { mapDispatchToProps } from '../actions';
-
 import { getIntl, getTheme } from '../selectors/user';
-import { SmartAddUserToAnotherGroupModal } from './AddUserToAnotherGroupModal';
-import { SmartStickerPreviewModal } from './StickerPreviewModal';
+import { useGlobalModalActions } from '../ducks/globalModals';
 
 function renderProfileEditor(): JSX.Element {
   return <SmartProfileEditorModal />;
@@ -38,42 +41,95 @@ function renderSendAnywayDialog(): JSX.Element {
   return <SmartSendAnywayDialog />;
 }
 
-const mapStateToProps = (state: StateType) => {
-  const i18n = getIntl(state);
+function renderShortcutGuideModal(): JSX.Element {
+  return <SmartShortcutGuideModal />;
+}
 
-  const { stickerPackPreviewId } = state.globalModals;
+export function SmartGlobalModalContainer(): JSX.Element {
+  const conversationsStoppingSend = useSelector(getConversationsStoppingSend);
+  const i18n = useSelector(getIntl);
+  const theme = useSelector(getTheme);
 
-  return {
-    ...state.globalModals,
-    hasSafetyNumberChangeModal: getConversationsStoppingSend(state).length > 0,
-    i18n,
-    theme: getTheme(state),
-    renderContactModal,
-    renderForwardMessageModal,
-    renderProfileEditor,
-    renderStoriesSettings,
-    renderStickerPreviewModal: () =>
+  const hasSafetyNumberChangeModal = conversationsStoppingSend.length > 0;
+
+  const {
+    addUserToAnotherGroupModalContactId,
+    isProfileEditorVisible,
+    isSignalConnectionsVisible,
+    isShortcutGuideModalVisible,
+    isStoriesSettingsVisible,
+    isWhatsNewVisible,
+    safetyNumberModalContactId,
+    stickerPackPreviewId,
+  } = useSelector<StateType, GlobalModalsStateType>(
+    state => state.globalModals
+  );
+
+  const {
+    closeErrorModal,
+    hideWhatsNewModal,
+    hideUserNotFoundModal,
+    toggleSignalConnectionsModal,
+  } = useGlobalModalActions();
+
+  const renderAddUserToAnotherGroup = useCallback(() => {
+    return (
+      <SmartAddUserToAnotherGroupModal
+        contactID={String(addUserToAnotherGroupModalContactId)}
+      />
+    );
+  }, [addUserToAnotherGroupModalContactId]);
+
+  const renderSafetyNumber = useCallback(
+    () => (
+      <SmartSafetyNumberModal contactID={String(safetyNumberModalContactId)} />
+    ),
+    [safetyNumberModalContactId]
+  );
+
+  const renderStickerPreviewModal = useCallback(
+    () =>
       stickerPackPreviewId ? (
         <SmartStickerPreviewModal packId={stickerPackPreviewId} />
       ) : null,
-    renderSafetyNumber: () => (
-      <SmartSafetyNumberModal
-        contactID={String(state.globalModals.safetyNumberModalContactId)}
+    [stickerPackPreviewId]
+  );
+
+  const renderErrorModal = useCallback(
+    ({ description, title }: { description?: string; title?: string }) => (
+      <ErrorModal
+        title={title}
+        description={description}
+        i18n={i18n}
+        onClose={closeErrorModal}
       />
     ),
-    renderAddUserToAnotherGroup: () => {
-      return (
-        <SmartAddUserToAnotherGroupModal
-          contactID={String(
-            state.globalModals.addUserToAnotherGroupModalContactId
-          )}
-        />
-      );
-    },
-    renderSendAnywayDialog,
-  };
-};
+    [closeErrorModal, i18n]
+  );
 
-const smart = connect(mapStateToProps, mapDispatchToProps);
-
-export const SmartGlobalModalContainer = smart(GlobalModalContainer);
+  return (
+    <GlobalModalContainer
+      hasSafetyNumberChangeModal={hasSafetyNumberChangeModal}
+      hideUserNotFoundModal={hideUserNotFoundModal}
+      hideWhatsNewModal={hideWhatsNewModal}
+      i18n={i18n}
+      isProfileEditorVisible={isProfileEditorVisible}
+      isShortcutGuideModalVisible={isShortcutGuideModalVisible}
+      isSignalConnectionsVisible={isSignalConnectionsVisible}
+      isStoriesSettingsVisible={isStoriesSettingsVisible}
+      isWhatsNewVisible={isWhatsNewVisible}
+      renderAddUserToAnotherGroup={renderAddUserToAnotherGroup}
+      renderContactModal={renderContactModal}
+      renderErrorModal={renderErrorModal}
+      renderForwardMessageModal={renderForwardMessageModal}
+      renderProfileEditor={renderProfileEditor}
+      renderSafetyNumber={renderSafetyNumber}
+      renderSendAnywayDialog={renderSendAnywayDialog}
+      renderShortcutGuideModal={renderShortcutGuideModal}
+      renderStickerPreviewModal={renderStickerPreviewModal}
+      renderStoriesSettings={renderStoriesSettings}
+      theme={theme}
+      toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+    />
+  );
+}