From 50a04fed0ca03e71d4337eae4acad5a5d9039d71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= Date: Mon, 26 Nov 2018 17:53:18 +0800 Subject: [PATCH] Router optimized (#2565) --- frontend/src/app.js | 32 +++++++++----- .../src/components/main-content-wrapper.js | 22 ++++++++++ .../src/components/toolbar/general-toolbar.js | 4 +- .../src/pages/dashboard/files-activities.js | 28 ++++--------- frontend/src/pages/drafts/drafts-view.js | 38 +++++++---------- .../pages/linked-devices/linked-devices.js | 28 ++++--------- frontend/src/pages/share-admin/folders.js | 28 ++++--------- frontend/src/pages/share-admin/libraries.js | 28 ++++--------- frontend/src/pages/share-admin/share-links.js | 42 +++++++------------ .../src/pages/share-admin/upload-links.js | 38 +++++++---------- frontend/src/pages/shared-libs/shared-libs.js | 28 ++++--------- frontend/src/pages/starred/starred.js | 28 ++++--------- 12 files changed, 143 insertions(+), 201 deletions(-) create mode 100644 frontend/src/components/main-content-wrapper.js diff --git a/frontend/src/app.js b/frontend/src/app.js index bb6af73c09..e08631aedf 100644 --- a/frontend/src/app.js +++ b/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 (
- - + - - - - - - - - + + + + + + + +
diff --git a/frontend/src/components/main-content-wrapper.js b/frontend/src/components/main-content-wrapper.js new file mode 100644 index 0000000000..1a0969cbae --- /dev/null +++ b/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 ( + + + + + ); + } + } +} + +export default MainContentWrapper; diff --git a/frontend/src/components/toolbar/general-toolbar.js b/frontend/src/components/toolbar/general-toolbar.js index cfadfdb682..ce5e0606f1 100644 --- a/frontend/src/components/toolbar/general-toolbar.js +++ b/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 ( - +
- +
); } } diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js index 6b7857fd00..53862d0b45 100644 --- a/frontend/src/pages/dashboard/files-activities.js +++ b/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 ( - -
- -
-
-
-
-

{gettext('Activities')}

-
-
- -
+
+
+
+

{gettext('Activities')}

+
+
+
- +
); } } diff --git a/frontend/src/pages/drafts/drafts-view.js b/frontend/src/pages/drafts/drafts-view.js index 9344d192ef..d12f58bc8a 100644 --- a/frontend/src/pages/drafts/drafts-view.js +++ b/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 ( - -
- -
-
-
-
-
    -
  • this.tabItemClick('drafts')}> - {gettext('Drafts')} -
    • -
  • this.tabItemClick('reviews')}> - {gettext('Reviews')} -
    • -
-
- {this.props.children} +
+
+
+
    +
  • this.tabItemClick('drafts')}> + {gettext('Drafts')} +
    • +
  • this.tabItemClick('reviews')}> + {gettext('Reviews')} +
    • +
+ {this.props.children}
- +
); } } diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js index e19ae6f6a8..117bd08b36 100644 --- a/frontend/src/pages/linked-devices/linked-devices.js +++ b/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 ( - -
- -
-
-
-
-

{gettext('Linked Devices')}

-
-
- -
+
+
+
+

{gettext('Linked Devices')}

+
+
+
- +
); } } diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js index 7c27746be0..c269286dd2 100644 --- a/frontend/src/pages/share-admin/folders.js +++ b/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 ( - -
- -
-
-
-
-

{gettext("Folders")}

-
-
- -
+
+
+
+

{gettext("Folders")}

+
+
+
- +
); } } diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js index 07657235cd..1de7e0d875 100644 --- a/frontend/src/pages/share-admin/libraries.js +++ b/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 ( - -
- -
-
-
-
-

{gettext("Libraries")}

-
-
- -
+
+
+
+

{gettext("Libraries")}

+
+
+
- +
); } } diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js index c27cf54614..a0b9ec65dc 100644 --- a/frontend/src/pages/share-admin/share-links.js +++ b/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 ( - -
- -
-
-
-
-
    -
  • - {gettext('Share Links')} -
    • - { canGenerateUploadLink ? -
  • {gettext('Upload Links')}
    • - : '' } -
-
-
- -
+
+
+
+
    +
  • + {gettext('Share Links')} +
    • + { canGenerateUploadLink ? +
  • {gettext('Upload Links')}
    • + : '' } +
+
+
+
- +
); } } diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js index 3d27aa1dce..62b064b701 100644 --- a/frontend/src/pages/share-admin/upload-links.js +++ b/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 ( - -
- -
-
-
-
-
    - { canGenerateShareLink ? -
  • {gettext('Share Links')}
    • - : '' } -
  • {gettext('Upload Links')}
    • -
-
-
- -
+
+
+
+
    + { canGenerateShareLink ? +
  • {gettext('Share Links')}
    • + : '' } +
  • {gettext('Upload Links')}
    • +
+
+
+
- +
); } } diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js index a0701e39a5..12e14dae44 100644 --- a/frontend/src/pages/shared-libs/shared-libs.js +++ b/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 ( - -
- -
-
-
-
-

{gettext("Shared with me")}

-
-
- -
+
+
+
+

{gettext("Shared with me")}

+
+
+
- +
); } } diff --git a/frontend/src/pages/starred/starred.js b/frontend/src/pages/starred/starred.js index 96c777836a..9dd677e224 100644 --- a/frontend/src/pages/starred/starred.js +++ b/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 ( - -
- -
-
-
-
-

{gettext('Favorites')}

-
-
- -
+
+
+
+

{gettext('Favorites')}

+
+
+
- +
); } }