im_webapp/src/views/sidepanel-view.jsx

import React, { Suspense } from 'react';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';

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';
const CreateAccountView = React.lazy(_ => import('./create-account-view.jsx'));
import AccGeneralView from './acc-general-view.jsx';
import AccNotificationsView from './acc-notifications-view.jsx';
const AccSecurityView = React.lazy(_ => import('./acc-security-view.jsx'));
import AccSupportView from './acc-support-view.jsx';
import LoginView from './login-view.jsx';
import NewTopicView from './new-topic-view.jsx';
const PasswordResetView = React.lazy(_ => import('./password-reset-view.jsx'));
import SettingsView from './settings-view.jsx';
import ValidationView from './validation-view.jsx';
const WallpapersView = React.lazy(_ => import('./wallpapers.jsx'));

// Panel titles for translation.
const messages = defineMessages({
  login: {
    id: 'sidepanel_title_login',
    description: 'Sidepanel title for LoginView.',
    defaultMessage: 'Sign In'
  },
  register: {
    id: 'sidepanel_title_register',
    description: 'Sidepanel title for CreateAccountView.',
    defaultMessage: 'Create Account'
  },
  settings: {
    id: 'sidepanel_title_settings',
    description: 'Sidepanel title for SettingsView.',
    defaultMessage: 'Settings'
  },
  edit: {
    id: 'sidepanel_title_account_settings',
    description: 'Sidepanel title for AccountSettingsView.',
    defaultMessage: 'Account Settings'
  },
  general: {
    id: 'panel_title_general',
    description: 'Title for TopicCommon.',
    defaultMessage: 'General'
  },
  security: {
    id: 'panel_title_security',
    description: 'Title for TopicSecirity and AccSecurity.',
    defaultMessage: 'Security'
  },
  crop: {
    id: 'panel_title_crop',
    description: 'Title for AvatarCropView.',
    defaultMessage: 'Drag to Adjust'
  },
  notif: {
    id: 'sidepanel_title_acc_notifications',
    description: 'Sidepanel title for AccNotificationsView.',
    defaultMessage: 'Notifications'
  },
  acc_general: {
    id: 'sidepanel_title_acc_general',
    description: 'Sidepanel title for AccGeneralView.',
    defaultMessage: 'General'
  },
  support: {
    id: 'sidepanel_title_acc_support',
    description: 'Sidepanel title for AccSupportView.',
    defaultMessage: 'Support'
  },
  newtpk: {
    id: 'sidepanel_title_newtpk',
    description: 'Sidepanel title for NewTopicView.',
    defaultMessage: 'Start New Chat'
  },
  cred: {
    id: 'sidepanel_title_cred',
    description: 'Sidepanel title for ValidationView.',
    defaultMessage: 'Confirm Credentials'
  },
  reset: {
    id: 'sidepanel_title_reset',
    description: 'Sidepanel title for PasswordResetView.',
    defaultMessage: 'Reset Password'
  },
  archive: {
    id: 'sidepanel_title_archive',
    description: 'Sidepanel title for ContactsView-Archive.',
    defaultMessage: 'Archived Chats'
  },
  blocked: {
    id: 'sidepanel_title_blocked',
    description: 'Sidepanel title for ContactsView-Blocked.',
    defaultMessage: 'Blocked Chats'
  },
  wallpapers: {
    id: 'wallpapers',
    description: 'Link or title for working with wallpapers.',
    defaultMessage: 'Wallpapers'
  }
});

class SidepanelView extends React.PureComponent {
  constructor(props) {
    super(props);

    this.handleNewTopic = this.handleNewTopic.bind(this);
  }

  handleNewTopic() {
    this.props.onNavigate('newtpk');
  }

  render() {
    const {formatMessage} = this.props.intl;
    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}
          hashParams={this.props.hashParams}
          authenticated={!!this.props.myUserId}
          login={this.props.login}
          loginDisabled={this.props.loginDisabled}
          persist={this.props.persist}
          errorText={this.props.errorText}
          errorLevel={this.props.errorLevel}
          onLoginRequest={this.props.onLoginRequest}
          onPersistenceChange={this.props.onPersistenceChange}
          onCreateAccount={this.props.onCreateAccount}
          onImRegisterRequest={this.props.onImRegisterRequest}
          onTenantResolved={this.props.onTenantResolved}
          onError={this.props.onError} />
      </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}
          key={view}
          connected={this.props.connected}
          chatList={this.props.chatList}
          myUserId={this.props.myUserId}
          onTopicSelected={this.props.onTopicSelected}
          onOpenScanner={this.props.onOpenScanner} />
      </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} hashParams={this.props.hashParams} myUserId={this.props.myUserId}
          tinode={this.props.tinode} onTopicSelected={this.props.onTopicSelected} onOpenScanner={this.props.onOpenScanner} key={view} />
      </div>;
    }

    if (GROUP_MANAGEMENT_VIEWS.includes(view)) {
      return <div id="sidepanel" className="group-management-panel">
        <GroupManagementView view={view} hashParams={this.props.hashParams} myUserId={this.props.myUserId}
          tinode={this.props.tinode} onTopicSelected={this.props.onTopicSelected} key={view} />
      </div>;
    }

    if (CONTENT_LIBRARY_VIEWS.includes(view)) {
      return <div id="sidepanel" className="content-library-panel">
        <ContentLibraryView view={view} hashParams={this.props.hashParams} myUserId={this.props.myUserId}
          tinode={this.props.tinode} onTopicSelected={this.props.onTopicSelected} chatList={this.props.chatList} 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} hashParams={this.props.hashParams} myUserId={this.props.myUserId}
          tinode={this.props.tinode} onTopicSelected={this.props.onTopicSelected} key={view} />
      </div>;
    }

    if (PERSONAL_SETTINGS_VIEWS.includes(view)) {
      return <div id="sidepanel" className="personal-settings-panel">
        <PersonalSettingsView view={view} hashParams={this.props.hashParams} myUserId={this.props.myUserId}
          tinode={this.props.tinode} chatList={this.props.chatList}
          onUpdatePassword={this.props.onUpdatePassword} onDeleteAccount={this.props.onDeleteAccount}
          onLogout={this.props.onLogout} key={view} />
      </div>;
    }

    if (SECURITY_SUPPORT_VIEWS.includes(view)) {
      return <div id="sidepanel" className="security-support-panel">
        <SecuritySupportView view={view} hashParams={this.props.hashParams} tinode={this.props.tinode} key={view} />
      </div>;
    }

    let title, avatar, badges;
    if (view == 'contacts') {
      title = this.props.title;
      avatar = this.props.avatar ? this.props.avatar : true;
      badges = this.props.trustedBadges;
    } else {
      title = formatMessage(messages[view]);
      avatar = false;
      badges = null;
    }

    let onCancel;
    if (['login', 'contacts'].indexOf(view) == -1) {
      onCancel = this.props.onCancel;
    }

    return (
      <div id="sidepanel">
        <SideNavbar
          state={view}
          title={title}
          avatar={avatar}
          tinode={this.props.tinode}
          trustedBadges={badges}
          myUserId={this.props.myUserId}
          onSignUp={this.props.onSignUp}
          onSettings={this.props.onSettings}
          onNewTopic={this.handleNewTopic}
          onCancel={onCancel} />

        <ErrorPanel
          level={this.props.errorLevel}
          text={this.props.errorText}
          action={this.props.errorAction}
          actionText={this.props.errorActionText}
          onClearError={this.props.onError} />

        <LoadSpinner show={this.props.loadSpinnerVisible} />

        {view === 'login' ?
          <LoginView
            login={this.props.login}
            disabled={this.props.loginDisabled}
            persist={this.props.persist}
            onLogin={this.props.onLoginRequest}
            onPersistenceChange={this.props.onPersistenceChange} /> :

          view === 'register' ?
          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
            <CreateAccountView
              tinode={this.props.tinode}
              reqCredMethod={this.props.reqCredMethod}
              onShowCountrySelector={this.props.onShowCountrySelector}
              onCreateAccount={this.props.onCreateAccount}
              onCancel={this.props.onCancel}
              onError={this.props.onError} />
          </Suspense> :

          view === 'settings' ?
          <SettingsView
            transport={this.props.transport}
            serverAddress={this.props.serverAddress}
            secureConnection={this.props.secureConnection}
            onCancel={this.props.onCancel}
            onUpdate={this.props.onGlobalSettings} /> :

          view === 'edit' ?
          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
            <AccountSettingsView
              tinode={this.props.tinode}
              myUserId={this.props.myUserId}
              trustedBadges={this.props.trustedBadges}
              reqCredMethod={this.props.reqCredMethod}
              onShowCountrySelector={this.props.onShowCountrySelector}
              onNavigate={this.props.onNavigate}
              onCredAdd={this.props.onCredAdd}
              onCredDelete={this.props.onCredDelete}
              onCredConfirm={this.props.onCredConfirm}
              onError={this.props.onError} />
          </Suspense> :

          (view === 'general' || view === 'crop') ?
          <TopicCommonView
            topic="me"
            tinode={this.props.tinode}
            myUserId={this.props.myUserId}
            reqCredMethod={this.props.reqCredMethod}
            onUpdateTopicDesc={this.props.onUpdateAccountDesc}
            onUpdateTagsRequest={this.props.onUpdateAccountTags}
            onError={this.props.onError} /> :

          view === 'acc_general' ?
          <AccGeneralView
            colorSchema={this.props.colorSchema}
            onSelectWallpapers={this.props.onSelectWallpapers}
            textSize={this.props.textSize}
            sendOnEnter={this.props.sendOnEnter}
            onChangeColorSchema={this.props.onChangeColorSchema}
            onTextSizeChanged={this.props.onTextSizeChanged}
            onSendOnEnterChanged={this.props.onSendOnEnterChanged} /> :

          view === 'notif' ?
          <AccNotificationsView
            messageSounds={this.props.messageSounds}
            desktopAlerts={this.props.desktopAlerts}
            desktopAlertsEnabled={this.props.desktopAlertsEnabled}
            onTogglePushNotifications={this.props.onTogglePushNotifications}
            onToggleMessageSounds={this.props.onToggleMessageSounds} /> :

          view === 'security' ?
            <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
              defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
              <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}
                onToggleIncognitoMode={this.props.onToggleIncognitoMode} />
            </Suspense> :

          view === 'support' ?
          <AccSupportView
            serverAddress={this.props.serverAddress}
            serverVersion={this.props.serverVersion} /> :

          view === 'wallpapers' ?
          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
            <WallpapersView
              wallpaper={this.props.wallpaper}
              wallpaperSize={this.props.wallpaperSize}
              wallpaperBlur={this.props.wallpaperBlur}
              colorSchema={this.props.colorSchema !== 'auto' ? this.props.colorSchema : this.props.systemColorSchema}
              onWallpaperSelected={this.props.onWallpaperSelected}
            />
          </Suspense> :

          (view === 'contacts' || view == 'archive' || view == 'blocked') ?
          <ContactsView
            tinode={this.props.tinode}
            myUserId={this.props.myUserId}
            connected={this.props.connected}
            topicSelected={this.props.topicSelected}
            archive={view == 'archive'}
            blocked={view == 'blocked'}
            chatList={this.props.chatList}
            showContextMenu={this.props.showContextMenu}
            onTopicSelected={this.props.onTopicSelected}
            onShowArchive={this.props.onShowArchive} /> :

          view === 'newtpk' ?
          <NewTopicView
            tinode={this.props.tinode}
            searchResults={this.props.searchResults}
            onInitFind={this.props.onInitFind}
            onSearchContacts={this.props.onSearchContacts}
            onCreateTopic={this.props.onCreateTopic}
            onError={this.props.onError} /> :

          view === 'cred' ?
          <ValidationView
            credCode={this.props.credCode}
            credMethod={this.props.credMethod}
            credToken={this.props.credToken}
            onSubmit={this.props.onValidateCredentials}
            onCancel={this.props.onCancel} /> :

          view === 'reset' ?
          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
            <PasswordResetView
              tinode={this.props.tinode}
              reqCredMethod={this.props.reqCredMethod}
              onShowCountrySelector={this.props.onShowCountrySelector}
              onRequest={this.props.onPasswordResetRequest}
              onReset={this.props.onResetPassword}
              onCancel={this.props.onCancel}
              onError={this.props.onError} />
          </Suspense> :
          null}
      </div>
    );
  }
};

export default injectIntl(SidepanelView);