完成 IM Web Android 端产品页面开发

src/views/sidepanel-view.jsx

@@ -5,6 +5,17 @@ import ErrorPanel from '../widgets/error-panel.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import SideNavbar from '../widgets/side-navbar.jsx';
 import TopicCommonView from './topic-common-view.jsx';
+import AuthOnboardingView from './auth-onboarding-view.jsx';
+import MessageCenterView from './message-center-view.jsx';
+import DirectMessageView from './direct-message-view.jsx';
+import MessageComposerView, {MESSAGE_COMPOSER_VIEWS} from './message-composer-view.jsx';
+import ContactManagementView, {CONTACT_MANAGEMENT_VIEWS} from './contact-management-view.jsx';
+import GroupManagementView, {GROUP_MANAGEMENT_VIEWS} from './group-management-view.jsx';
+import ContentLibraryView, {CONTENT_LIBRARY_VIEWS} from './content-library-view.jsx';
+import CallExperienceView, {CALL_EXPERIENCE_VIEWS} from './call-experience-view.jsx';
+import WorkplaceCollaborationView, {WORKPLACE_COLLABORATION_VIEWS} from './workplace-collaboration-view.jsx';
+import PersonalSettingsView, {PERSONAL_SETTINGS_VIEWS} from './personal-settings-view.jsx';
+import SecuritySupportView, {SECURITY_SUPPORT_VIEWS} from './security-support-view.jsx';
 
 const AccountSettingsView = React.lazy(_ => import('./account-settings-view.jsx'));
 import ContactsView from './contacts-view.jsx';
@@ -117,7 +128,85 @@ class SidepanelView extends React.PureComponent {
 
   render() {
     const {formatMessage} = this.props.intl;
-    const view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
+    const view = this.props.state || (this.props.myUserId ? 'messages-home' : 'tenant');
+    const chapterOneViews = ['tenant', 'login', 'enterprise-register', 'enterprise-feedback', 'register',
+      'reset', 'identity-check', 'realname', 'realname-verified', 'realname-reminder', 'independent-password'];
+
+    if (chapterOneViews.includes(view)) {
+      return <div id="sidepanel" className="auth-onboarding-panel">
+        <AuthOnboardingView view={view} authenticated={!!this.props.myUserId} />
+      </div>;
+    }
+
+    const chapterTwoViews = ['messages-home', 'messages-offline', 'messages-menu', 'message-actions', 'system-messages'];
+    if (chapterTwoViews.includes(view)) {
+      const fullPage = !this.props.myUserId || view !== 'messages-home';
+      return <div id="sidepanel" className={'message-center-panel' + (fullPage ? ' full-page' : '')}>
+        <MessageCenterView
+          view={view}
+          connected={this.props.connected}
+          chatList={this.props.chatList}
+          myUserId={this.props.myUserId}
+          onTopicSelected={this.props.onTopicSelected} />
+      </div>;
+    }
+
+    const chapterThreeViews = ['chat-inbound-request', 'chat-inbound-message', 'chat-outbound-request',
+      'chat-status', 'chat-friend', 'chat-media', 'chat-blocked', 'chat-deleted', 'chat-standard',
+      'chat-attachments', 'chat-mixed', 'chat-contact-card'];
+    if (chapterThreeViews.includes(view)) {
+      return <div id="sidepanel" className="direct-message-panel">
+        <DirectMessageView view={view} key={view} />
+      </div>;
+    }
+
+    if (MESSAGE_COMPOSER_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="message-composer-panel">
+        <MessageComposerView view={view} key={view} />
+      </div>;
+    }
+
+    if (CONTACT_MANAGEMENT_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="contact-management-panel">
+        <ContactManagementView view={view} key={view} />
+      </div>;
+    }
+
+    if (GROUP_MANAGEMENT_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="group-management-panel">
+        <GroupManagementView view={view} key={view} />
+      </div>;
+    }
+
+    if (CONTENT_LIBRARY_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="content-library-panel">
+        <ContentLibraryView view={view} key={view} />
+      </div>;
+    }
+
+    if (CALL_EXPERIENCE_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="call-experience-panel">
+        <CallExperienceView view={view} key={view} />
+      </div>;
+    }
+
+    if (WORKPLACE_COLLABORATION_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="workplace-collaboration-panel">
+        <WorkplaceCollaborationView view={view} key={view} />
+      </div>;
+    }
+
+    if (PERSONAL_SETTINGS_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="personal-settings-panel">
+        <PersonalSettingsView view={view} key={view} />
+      </div>;
+    }
+
+    if (SECURITY_SUPPORT_VIEWS.includes(view)) {
+      return <div id="sidepanel" className="security-support-panel">
+        <SecuritySupportView view={view} key={view} />
+      </div>;
+    }
 
     let title, avatar, badges;
     if (view == 'contacts') {
@@ -236,12 +325,13 @@ class SidepanelView extends React.PureComponent {
               <AccSecurityView
                 tinode={this.props.tinode}
                 incognitoMode={this.props.incognitoMode}
+                onNavigate={this.props.onNavigate}
                 onUpdateAccountDesc={this.props.onUpdateAccountDesc}
                 onUpdatePassword={this.props.onUpdatePassword}
                 onLogout={this.props.onLogout}
                 onDeleteAccount={this.props.onDeleteAccount}
                 onShowAlert={this.props.onShowAlert}
-                onShowBlocked={this.props.onShowBlocked}
+                onShowBlocked={() => this.props.onNavigate('block-list')}
                 onToggleIncognitoMode={this.props.onToggleIncognitoMode} />
             </Suspense> :