Username Education

Co-authored-by: Jamie Kyle <jamie@signal.org>

ts/state/smart/App.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import type { VerificationTransport } from '../../types/VerificationTransport';
 import { App } from '../../components/App';
@@ -12,18 +12,16 @@ import { SmartCallManager } from './CallManager';
 import { SmartGlobalModalContainer } from './GlobalModalContainer';
 import { SmartLightbox } from './Lightbox';
 import { SmartStoryViewer } from './StoryViewer';
-import type { StateType } from '../reducer';
 import {
-  getIntl,
-  getLocaleMessages,
   getTheme,
   getIsMainWindowMaximized,
   getIsMainWindowFullScreen,
-  getMenuOptions,
 } from '../selectors/user';
 import { hasSelectedStoryData } from '../selectors/stories';
-import { getHideMenuBar } from '../selectors/items';
-import { mapDispatchToProps } from '../actions';
+import type { StateType } from '../reducer';
+import { useAppActions } from '../ducks/app';
+import { useConversationsActions } from '../ducks/conversations';
+import { useStoriesActions } from '../ducks/stories';
 import { ErrorBoundary } from '../../components/ErrorBoundary';
 import { ModalContainer } from '../../components/ModalContainer';
 import { SmartInbox } from './Inbox';
@@ -32,58 +30,58 @@ function renderInbox(): JSX.Element {
   return <SmartInbox />;
 }
 
-const mapStateToProps = (state: StateType) => {
-  const i18n = getIntl(state);
+export function SmartApp(): JSX.Element {
+  const app = useSelector((state: StateType) => state.app);
 
-  return {
-    ...state.app,
-    i18n,
-    localeMessages: getLocaleMessages(state),
-    isMaximized: getIsMainWindowMaximized(state),
-    isFullScreen: getIsMainWindowFullScreen(state),
-    menuOptions: getMenuOptions(state),
-    OS: OS.getName(),
-    osClassName: OS.getClassName(),
-    hideMenuBar: getHideMenuBar(state),
-    renderCallManager: () => (
-      <ModalContainer className="module-calling__modal-container">
-        <SmartCallManager />
-      </ModalContainer>
-    ),
-    renderGlobalModalContainer: () => <SmartGlobalModalContainer />,
-    renderLightbox: () => <SmartLightbox />,
-    hasSelectedStoryData: hasSelectedStoryData(state),
-    renderStoryViewer: (closeView: () => unknown) => (
-      <ErrorBoundary name="App/renderStoryViewer" closeView={closeView}>
-        <SmartStoryViewer />
-      </ErrorBoundary>
-    ),
-    renderInbox,
-    requestVerification: (
-      number: string,
-      captcha: string,
-      transport: VerificationTransport
-    ): Promise<{ sessionId: string }> => {
-      const { server } = window.textsecure;
-      strictAssert(server !== undefined, 'WebAPI not available');
+  const { openInbox } = useAppActions();
 
-      return server.requestVerification(number, captcha, transport);
-    },
-    registerSingleDevice: (
-      number: string,
-      code: string,
-      sessionId: string
-    ): Promise<void> => {
-      return window
-        .getAccountManager()
-        .registerSingleDevice(number, code, sessionId);
-    },
-    theme: getTheme(state),
+  const { scrollToMessage } = useConversationsActions();
 
-    toast: state.toast.toast,
-  };
-};
+  const { viewStory } = useStoriesActions();
 
-const smart = connect(mapStateToProps, mapDispatchToProps);
+  return (
+    <App
+      {...app}
+      isMaximized={useSelector(getIsMainWindowMaximized)}
+      isFullScreen={useSelector(getIsMainWindowFullScreen)}
+      osClassName={OS.getClassName()}
+      renderCallManager={() => (
+        <ModalContainer className="module-calling__modal-container">
+          <SmartCallManager />
+        </ModalContainer>
+      )}
+      renderGlobalModalContainer={() => <SmartGlobalModalContainer />}
+      renderLightbox={() => <SmartLightbox />}
+      hasSelectedStoryData={useSelector(hasSelectedStoryData)}
+      renderStoryViewer={(closeView: () => unknown) => (
+        <ErrorBoundary name="App/renderStoryViewer" closeView={closeView}>
+          <SmartStoryViewer />
+        </ErrorBoundary>
+      )}
+      renderInbox={renderInbox}
+      requestVerification={(
+        number: string,
+        captcha: string,
+        transport: VerificationTransport
+      ): Promise<{ sessionId: string }> => {
+        const { server } = window.textsecure;
+        strictAssert(server !== undefined, 'WebAPI not available');
 
-export const SmartApp = smart(App);
+        return server.requestVerification(number, captcha, transport);
+      }}
+      registerSingleDevice={(
+        number: string,
+        code: string,
+        sessionId: string
+      ): Promise<void> => {
+        return window
+          .getAccountManager()
+          .registerSingleDevice(number, code, sessionId);
+      }}
+      theme={useSelector(getTheme)}
+      openInbox={openInbox}
+      scrollToMessage={scrollToMessage}
+      viewStory={viewStory}
+    />
+  );
+}