refactor: Migrate Conversation to React

src/page/template/wire-main.htm

@@ -3,68 +3,39 @@
      data-bind="css: mainClasses()"
      data-uie-name="status-webapp"
      data-uie-value="is-loading">
-  <!-- ko stopBinding: true -->
-    <div id="app" class="app">
-      <div id="left-column" class="left-column" data-bind="css: {'left-column--light-theme': !isActivatedAccount()}">
-        <header><h1 class="visually-hidden" data-bind="text: t('accessibility.headings.sidebar')"></h1></header>
-        <!-- ko if: webappLoaded -->
-          <left-sidebar params="listViewModel: $root, selfUser: selfUser"></left-sidebar>
-        <!-- /ko -->
-      </div>
-      <div id="center-column" class="center-column">
-        <main-content params="contentViewModel: $root"></main-content>
-
-        <!-- ko if: state() === State.CONNECTION_REQUESTS -->
-          <h1 class="visually-hidden" data-bind="text: t('accessibility.headings.connectionRequests')"></h1>
+    <!-- ko stopBinding: true -->
+      <div id="app" class="app">
+        <div id="left-column" class="left-column" data-bind="css: {'left-column--light-theme': !isActivatedAccount()}">
+          <header><h1 class="visually-hidden" data-bind="text: t('accessibility.headings.sidebar')"></h1></header>
+          <!-- ko if: webappLoaded -->
+            <left-sidebar params="listViewModel: $root, selfUser: selfUser"></left-sidebar>
+          <!-- /ko -->
+        </div>
 
-          <connect-requests
-            params="
-                actionsViewModel: $root.mainViewModel.actions,
-                userState: $root.userState,
-                teamState: $root.teamState,
-              "
-          ></connect-requests>
-        <!-- /ko -->
-        <!-- ko if: state() === State.CONVERSATION -->
-          <h1 class="visually-hidden" data-bind="text: t('accessibility.headings.conversation')"></h1>
-          #include('content/conversation.htm')
-        <!-- /ko -->
-        <!-- ko if: state() === State.HISTORY_EXPORT -->
-          <h1 class="visually-hidden" data-bind="text: t('accessibility.headings.historyExport')"></h1>
+        <div id="center-column" class="center-column">
+          <center-column params="contentViewModel: $root"></center-column>
 
-          <history-export
-            style="height: 100%;"
-            params="
-              backupRepository: $root.repositories.backup,
-              userState: $root.userState,
-            "
-          ></history-export>
-        <!-- /ko -->
+          #include('modal/legal-hold.htm')
+        </div>
 
-        <group-creation-modal params="
-          conversationRepository: $root.repositories.conversation,
-          searchRepository: $root.repositories.search,
-          teamRepository: $root.repositories.team,
-        "></group-creation-modal>
-        #include('modal/legal-hold.htm')
-        <div class="center-column__overlay"></div>
-      </div>
-      <div id="right-column" class="right-column">
-        #include('panel/conversation-details.htm')
-        #include('panel/conversation-participants.htm')
-        #include('panel/add-participants.htm')
-        #include('panel/group-participant-user.htm')
-        #include('panel/group-participant-service.htm')
-        #include('panel/guest-options.htm')
-        #include('panel/services-options.htm')
-        #include('panel/notifications.htm')
-        #include('panel/participant-devices.htm')
-        #include('panel/timed-messages.htm')
-        #include('panel/message-details.htm')
+        <div id="right-column" class="right-column">
+          #include('panel/conversation-details.htm')
+          #include('panel/conversation-participants.htm')
+          #include('panel/add-participants.htm')
+          #include('panel/group-participant-user.htm')
+          #include('panel/group-participant-service.htm')
+          #include('panel/guest-options.htm')
+          #include('panel/services-options.htm')
+          #include('panel/notifications.htm')
+          #include('panel/participant-devices.htm')
+          #include('panel/timed-messages.htm')
+          #include('panel/message-details.htm')
+        </div>
       </div>
-    </div>
-    #include('modals.htm')
+
+      #include('modals.htm')
     <!-- /ko -->
+
     <app-lock-container params="clientRepository: $root.content.repositories.client"></app-lock-container>
     <warnings-container></warnings-container>
     <calling-overlay-container params="

src/script/components/ConnectRequests/index.tsx

@@ -17,34 +17,40 @@
  *
  */
 
-import {FC, useEffect, useRef} from 'react';
+import {FC, useContext, useEffect, useRef} from 'react';
 import {container} from 'tsyringe';
 
 import Avatar, {AVATAR_SIZE} from 'Components/Avatar';
 import ClassifiedBar from 'Components/input/ClassifiedBar';
 
-import {registerReactComponent, useKoSubscribableChildren} from 'Util/ComponentUtil';
+import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 
 import {TeamState} from '../../team/TeamState';
 import {UserState} from '../../user/UserState';
 import {User} from '../../entity/User';
-import {ActionsViewModel} from '../../view_model/ActionsViewModel';
+import {RootContext} from '../../page/RootProvider';
 
 interface ConnectRequestsProps {
-  readonly actionsViewModel: ActionsViewModel;
   readonly userState: UserState;
   readonly teamState: TeamState;
 }
 
 const ConnectRequests: FC<ConnectRequestsProps> = ({
-  actionsViewModel,
   userState = container.resolve(UserState),
   teamState = container.resolve(TeamState),
 }) => {
   const connectRequestsRefEnd = useRef<HTMLDivElement | null>(null);
   const temporaryConnectRequestsCount = useRef<number>(0);
 
+  const contentViewModel = useContext(RootContext);
+
+  if (!contentViewModel) {
+    return null;
+  }
+
+  const actionsViewModel = contentViewModel.mainViewModel.actions;
+
   const {classifiedDomains} = useKoSubscribableChildren(teamState, ['classifiedDomains']);
   const {connectRequests} = useKoSubscribableChildren(userState, ['connectRequests']);
 
@@ -137,5 +143,3 @@ const ConnectRequests: FC<ConnectRequestsProps> = ({
 };
 
 export default ConnectRequests;
-
-registerReactComponent('connect-requests', ConnectRequests);