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}/>
+            <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <DraftsView path={siteRoot + 'drafts'}  
+            <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>
+            </DraftsViewWrapper>
-            <Starred path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <LinkedDevices path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminLibraries path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminFolders path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <ShareAdminShareLinksWrapper 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} />
+            <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <SharedLibraries path={siteRoot + 'shared-libs'} 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,14 +244,6 @@ 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">
@@ -263,7 +254,6 @@ class FilesActivities extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +20,6 @@ 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">
@@ -44,7 +35,6 @@ class DraftsView extends React.Component {
           {this.props.children}
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +194,6 @@ 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">
@@ -213,7 +204,6 @@ class LinkedDevices extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +281,6 @@ 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">
@@ -300,7 +291,6 @@ class ShareAdminFolders extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +288,6 @@ 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">
@@ -307,7 +298,6 @@ class ShareAdminLibraries extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +237,6 @@ 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">
@@ -263,7 +254,6 @@ class ShareAdminShareLinks extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +226,6 @@ 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">
@@ -250,7 +241,6 @@ class ShareAdminUploadLinks extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +251,6 @@ 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">
@@ -270,7 +261,6 @@ class SharedLibraries extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }

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,14 +262,6 @@ 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">
@@ -281,7 +272,6 @@ class Starred extends Component {
           </div>
         </div>
       </div>
-      </Fragment>
     );
   }
 }