Router optimized (#2565)

frontend/src/app.js

@@ -16,6 +16,7 @@ import ShareAdminFolders from './pages/share-admin/folders';
 import ShareAdminShareLinks from './pages/share-admin/share-links';
 import ShareAdminUploadLinks from './pages/share-admin/upload-links';
 import SharedLibraries from './pages/shared-libs/shared-libs';
+import MainContentWrapper from './components/main-content-wrapper';
 
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
@@ -25,6 +26,16 @@ import './css/layout.css';
 import './css/toolbar.css';
 import './css/search.css';
 
+const FilesActivitiesWrapper = MainContentWrapper(FilesActivities);
+const DraftsViewWrapper = MainContentWrapper(DraftsView);
+const StarredWrapper = MainContentWrapper(Starred);
+const LinkedDevicesWrapper = MainContentWrapper(LinkedDevices);
+const SharedLibrariesWrapper = MainContentWrapper(SharedLibraries);
+const ShareAdminLibrariesWrapper = MainContentWrapper(ShareAdminLibraries);
+const ShareAdminFoldersWrapper = MainContentWrapper(ShareAdminFolders);
+const ShareAdminShareLinksWrapper = MainContentWrapper(ShareAdminShareLinks);
+const ShareAdminUploadLinksWrapper = MainContentWrapper(ShareAdminUploadLinks);
+
 class App extends Component {
 
   constructor(props) {
@@ -91,15 +102,14 @@ class App extends Component {
 
   render() {
     let { currentTab } = this.state;
-
     return (
       <div id="main">
         <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
 
         <MainPanel>
           <Router>
-            <FilesActivities path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <DraftsView path={siteRoot + 'drafts'}  
+            <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <DraftsViewWrapper path={siteRoot + 'drafts'}  
               currentTab={currentTab} 
               tabItemClick={this.tabItemClick} 
               onShowSidePanel={this.onShowSidePanel} 
@@ -113,14 +123,14 @@ class App extends Component {
                 updateDraftsList={this.updateDraftsList}
               />
               <ReviewContent path='reviews' />
-            </DraftsView>
-            <Starred path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <LinkedDevices path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminLibraries path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminFolders path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <SharedLibraries path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            </DraftsViewWrapper>
+            <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminShareLinksWrapper path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
           </Router>
         </MainPanel>
       </div>

frontend/src/components/main-content-wrapper.js

@@ -0,0 +1,22 @@
+import React, { Fragment } from 'react';
+import GeneralToolBar from './toolbar/general-toolbar';
+
+const MainContentWrapper = (WrapperedComponent) => {
+  return class extends React.Component {
+
+    constructor(props) {
+      super(props);
+    }
+
+    render() {
+      return (
+        <Fragment>
+          <GeneralToolBar {...this.props} />
+          <WrapperedComponent {...this.props} />
+        </Fragment>
+      );
+    }
+  }
+}
+
+export default MainContentWrapper;

frontend/src/components/toolbar/general-toolbar.js

@@ -13,7 +13,7 @@ class GeneralToolbar extends React.Component {
     let { onShowSidePanel, onSearchedClick } = this.props;
     let placeHolder = this.props.searchPlaceholder || 'Search files in this library';
     return (
-      <Fragment>
+      <div className="main-panel-north">
         <div className="cur-view-toolbar">
           <span 
             className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" 
@@ -25,7 +25,7 @@ class GeneralToolbar extends React.Component {
           searchPlaceholder={placeHolder}
           onSearchedClick={onSearchedClick} 
         />
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/dashboard/files-activities.js

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 const contentPropTypes = {
   data: PropTypes.object.isRequired,
@@ -245,25 +244,16 @@ class FilesActivities extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container" id="activities">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext('Activities')}</h3>
-            </div>
-            <div className="cur-view-content" onScroll={this.handleScroll}>
-              <FileActivitiesContent data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container" id="activities">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext('Activities')}</h3>
+          </div>
+          <div className="cur-view-content" onScroll={this.handleScroll}>
+            <FileActivitiesContent data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/drafts/drafts-view.js

@@ -1,8 +1,7 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, gettext } from '../../utils/constants';
 import { Link } from '@reach/router';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 const propTypes = {
   currentTab: PropTypes.string.isRequired,
@@ -21,30 +20,21 @@ class DraftsView extends React.Component {
   
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              <ul className="tab-tabs-nav">
-                <li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
-                  <Link  className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>{gettext('Drafts')}</Link>
-                </li>
-                <li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
-                  <Link  className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>{gettext('Reviews')}</Link>
-                </li>
-              </ul>
-            </div>
-            {this.props.children}
+      <div className="main-panel-center">
+        <div className="cur-view-container">
+          <div className="cur-view-path">
+            <ul className="tab-tabs-nav">
+              <li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
+                <Link  className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>{gettext('Drafts')}</Link>
+              </li>
+              <li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
+                <Link  className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>{gettext('Reviews')}</Link>
+              </li>
+            </ul>
           </div>
+          {this.props.children}
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/linked-devices/linked-devices.js

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 import Toast from '../../components/toast';
 
 class Content extends Component {
@@ -195,25 +194,16 @@ class LinkedDevices extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container" id="linked-devices">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container" id="linked-devices">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/share-admin/folders.js

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -282,25 +281,16 @@ class ShareAdminFolders extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container" id="share-admin-libs">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext("Folders")}</h3>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container" id="share-admin-libs">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext("Folders")}</h3>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/share-admin/libraries.js

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -289,25 +288,16 @@ class ShareAdminLibraries extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container" id="share-admin-libs">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext("Libraries")}</h3>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container" id="share-admin-libs">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext("Libraries")}</h3>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/share-admin/share-links.js

@@ -1,11 +1,10 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro, canGenerateUploadLink } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
  constructor(props) {
@@ -238,32 +237,23 @@ class ShareAdminShareLinks extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-cneter">
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              <ul className="nav">
-                <li className="nav-item">
-                  <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
-                </li>
-                { canGenerateUploadLink ?
-                  <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
-                  : '' }
-              </ul>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-cneter">
+        <div className="cur-view-container">
+          <div className="cur-view-path">
+            <ul className="nav">
+              <li className="nav-item">
+                <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
+              </li>
+              { canGenerateUploadLink ?
+                <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
+                : '' }
+            </ul>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/share-admin/upload-links.js

@@ -1,11 +1,10 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro, canGenerateShareLink } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
    constructor(props) {
@@ -227,30 +226,21 @@ class ShareAdminUploadLinks extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              <ul className="nav">
-                { canGenerateShareLink ?
-                <li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
-                  : '' }
-                <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
-              </ul>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container">
+          <div className="cur-view-path">
+            <ul className="nav">
+              { canGenerateShareLink ?
+              <li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
+                : '' }
+              <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
+            </ul>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/shared-libs/shared-libs.js

@@ -1,10 +1,9 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import Loading from '../../components/loading';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -252,25 +251,16 @@ class SharedLibraries extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext("Shared with me")}</h3>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext("Shared with me")}</h3>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }

frontend/src/pages/starred/starred.js

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl } from '../../utils/constants';
-import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 class Content extends Component {
 
@@ -263,25 +262,16 @@ class Starred extends Component {
 
   render() {
     return (
-      <Fragment>
-        <div className="main-panel-north">
-          <GeneralToolbar 
-            searchPlaceholder={'Search Files'}
-            onShowSidePanel={this.props.onShowSidePanel}
-            onSearchedClick={this.props.onSearchedClick}
-          />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container" id="starred">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext('Favorites')}</h3>
-            </div>
-            <div className="cur-view-content">
-              <Content data={this.state} />
-            </div>
+      <div className="main-panel-center">
+        <div className="cur-view-container" id="starred">
+          <div className="cur-view-path">
+            <h3 className="sf-heading">{gettext('Favorites')}</h3>
+          </div>
+          <div className="cur-view-content">
+            <Content data={this.state} />
           </div>
         </div>
-      </Fragment>
+      </div>
     );
   }
 }