New top-level React root: <App />

ts/components/App.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { AppViewType } from '../state/ducks/app';
+import { Inbox } from './Inbox';
+import { Install } from './Install';
+import { StandaloneRegistration } from './StandaloneRegistration';
+import { ThemeType } from '../types/Util';
+
+export type PropsType = {
+  appView: AppViewType;
+  hasInitialLoadCompleted: boolean;
+  theme: ThemeType;
+};
+
+export const App = ({
+  appView,
+  hasInitialLoadCompleted,
+  theme,
+}: PropsType): JSX.Element => {
+  let contents;
+
+  if (appView === AppViewType.Installer) {
+    contents = <Install />;
+  } else if (appView === AppViewType.Standalone) {
+    contents = <StandaloneRegistration />;
+  } else if (appView === AppViewType.Inbox) {
+    contents = <Inbox hasInitialLoadCompleted={hasInitialLoadCompleted} />;
+  }
+
+  return (
+    <div
+      className={classNames({
+        App: true,
+        'light-theme': theme === ThemeType.light,
+        'dark-theme': theme === ThemeType.dark,
+      })}
+    >
+      {contents}
+    </div>
+  );
+};

ts/components/BackboneHost.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react';
+import * as Backbone from 'backbone';
+
+type PropsType = {
+  View: typeof Backbone.View;
+  className?: string;
+};
+
+export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<Backbone.View | undefined>(undefined);
+
+  useEffect(() => {
+    const view = new View({
+      el: hostRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      if (!viewRef || !viewRef.current) {
+        return;
+      }
+
+      viewRef.current.remove();
+      viewRef.current = undefined;
+    };
+  }, [View]);
+
+  return (
+    <div>
+      <div className={className} ref={hostRef} />
+    </div>
+  );
+};

ts/components/Inbox.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react';
+import * as Backbone from 'backbone';
+
+type InboxViewType = Backbone.View & {
+  onEmpty?: () => void;
+};
+
+type InboxViewOptionsType = Backbone.ViewOptions & {
+  initialLoadComplete: boolean;
+  window: typeof window;
+};
+
+export type PropsType = {
+  hasInitialLoadCompleted: boolean;
+};
+
+export const Inbox = ({ hasInitialLoadCompleted }: PropsType): JSX.Element => {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<InboxViewType | undefined>(undefined);
+
+  useEffect(() => {
+    const viewOptions: InboxViewOptionsType = {
+      el: hostRef.current,
+      initialLoadComplete: false,
+      window,
+    };
+    const view = new window.Whisper.InboxView(viewOptions);
+
+    viewRef.current = view;
+
+    return () => {
+      if (!viewRef || !viewRef.current) {
+        return;
+      }
+
+      viewRef.current.remove();
+      viewRef.current = undefined;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (hasInitialLoadCompleted && viewRef.current && viewRef.current.onEmpty) {
+      viewRef.current.onEmpty();
+    }
+  }, [hasInitialLoadCompleted, viewRef]);
+
+  return <div className="inbox index" ref={hostRef} />;
+};

ts/components/Install.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BackboneHost } from './BackboneHost';
+
+export const Install = (): JSX.Element => {
+  return (
+    <BackboneHost
+      className="full-screen-flow"
+      View={window.Whisper.InstallView}
+    />
+  );
+};

ts/components/StandaloneRegistration.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BackboneHost } from './BackboneHost';
+
+export const StandaloneRegistration = (): JSX.Element => {
+  return (
+    <BackboneHost
+      className="full-screen-flow"
+      View={window.Whisper.StandaloneRegistrationView}
+    />
+  );
+};