New top-level React root: <App />

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} />;
+};