optimized code

frontend/src/components/cur-group-path/group-path.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {gettext, siteRoot} from '../../utils/constants';
-
-const propTypes = {
-  currentGroup: PropTypes.object.isRequired
-};
-
-class GroupPath extends React.Component {
-
-  render() {
-    let currentGroup = this.props.currentGroup;
-    return (
-      <div className="path-container">
-        <a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
-        <span className="path-split">/</span>
-        <span>{currentGroup.name}</span>
-        {currentGroup.parent_group_id !== 0 && (
-          <span className="address-book-group-icon icon-building" title={gettext("This is a special group representing a department.")}></span>
-        )}
-      </div>
-    );
-  }
-}
-
-GroupPath.propTypes = propTypes;
-
-export default GroupPath;

frontend/src/components/cur-group-path/group-tool.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext, username } from '../../utils/constants';
-
-const propTypes = {
-  currentGroup: PropTypes.object.isRequired,
-};
-
-class GroupTool extends React.Component {
-
-  render() {
-    let currentGroup = this.props.currentGroup;
-    let isShowSettingIcon = !(currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
-    return (
-      <div className="path-tool">
-        {isShowSettingIcon && (
-          <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title={gettext("Settings")} id="group-settings-icon" aria-label={gettext("Settings")}></a>
-        )}
-        <a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} id="group-members-icon" aria-label={gettext("Members")}></a>
-      </div>
-    );
-  }
-}
-
-GroupTool.propTypes = propTypes;
-
-export default GroupTool;

frontend/src/components/cur-group-path/index.js

@@ -1,24 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import GroupPath from './group-path';
-import GroupTool from './group-tool';
-
-const propTypes = {
-  currentGroup: PropTypes.object.isRequired,
-};
-
-class CurGroupPath extends React.Component {
-
-  render() {
-    return (
-      <Fragment>
-        <GroupPath currentGroup={this.props.currentGroup}/>
-        <GroupTool currentGroup={this.props.currentGroup}/>
-      </Fragment>
-    );
-  }
-}
-
-CurGroupPath.propTypes = propTypes;
-
-export default CurGroupPath;

frontend/src/components/cur-repo-path/index.js

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import RepoPath from './repo-path';
+import RepoTool from './repo-tool';
+
+const propTypes = {
+  currentTab: PropTypes.string.isRequired,
+  currentGroup: PropTypes.object,
+};
+
+class CurGroupPath extends React.Component {
+
+  render() {
+    let { currentTab, currentGroup } = this.props;
+    return (
+      <Fragment>
+        <RepoPath currentTab={currentTab} currentGroup={currentGroup}/>
+        <RepoTool currentTab={currentTab} currentGroup={currentGroup}/>
+      </Fragment>
+    );
+  }
+}
+
+CurGroupPath.propTypes = propTypes;
+
+export default CurGroupPath;

frontend/src/components/cur-repo-path/repo-path.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {gettext, siteRoot} from '../../utils/constants';
+
+const propTypes = {
+  currentGroup: PropTypes.object, // for group
+  currentTab: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
+};
+
+class RepoPath extends React.Component {
+
+  render() {
+    let { currentTab, currentGroup } = this.props;
+    if (currentTab === 'group' && currentGroup) {
+      return (
+        <div className="path-container">
+          <a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
+          <span className="path-split">/</span>
+          <span>{currentGroup.name}</span>
+          {currentGroup.parent_group_id !== 0 && (
+            <span className="address-book-group-icon icon-building" title={gettext("This is a special group representing a department.")}></span>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="path-container">
+        <span>{currentTab}</span>
+      </div>
+    ); 
+  }
+}
+
+RepoPath.propTypes = propTypes;
+
+export default RepoPath;

frontend/src/components/cur-repo-path/repo-tool.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, username } from '../../utils/constants';
+
+const propTypes = {
+  currentGroup: PropTypes.object, // for group
+  currentTab: PropTypes.string.isRequired, //for my-library, shared width me, shared whith all, groups 
+};
+
+class RepoTool extends React.Component {
+
+  render() {
+    if (this.props.currentTab === 'group' && this.props.currentGroup) {
+      let currentGroup = this.props.currentGroup;
+      let isShowSettingIcon = !(currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
+      return (
+        <div className="path-tool">
+          {isShowSettingIcon && (
+            <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title={gettext("Settings")} id="group-settings-icon" aria-label={gettext("Settings")}></a>
+          )}
+          <a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} id="group-members-icon" aria-label={gettext("Members")}></a>
+        </div>
+      );
+    }
+    return '';
+  }
+}
+
+RepoTool.propTypes = propTypes;
+
+export default RepoTool;

frontend/src/components/repo-view/share-repo-view.js

@@ -0,0 +1,91 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { seafileAPI } from '../../utils/seafile-api';
+import RepoInfo from '../../models/repoInfo';
+import Loading from '../../components/loading';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
+import CurRepoPath from '../../components/cur-repo-path/';
+import ShareRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
+
+const propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  isShowRepoOwner: PropTypes.bool.isRequired,
+  errMessage: PropTypes.string.isRequired,
+  currentTab: PropTypes.string.isRequired,
+  repoList: PropTypes.array.isRequired,
+  onShowSidePanel: PropTypes.func.isRequired,
+  emptyTip: PropTypes.object,
+  currentGroup: PropTypes.object,
+  onSearchedClick: PropTypes.func,
+};
+
+class ShareRepoView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoList: [],
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({repoList: nextProps.repoList});
+  }
+
+  onCreateRepo = (repo) => {
+    let groupId = this.props.groupID;
+    seafileAPI.createGroupRepo(groupId, repo).then(res => {
+      let repo = new RepoInfo(res.data);
+      let repoList = this.addRepoItem(repo);
+      this.setState({repoList: repoList});
+    }).catch(() => {
+      //todo
+    });
+  }
+
+  addRepoItem = (repo) => {
+    let newRepoList = this.state.repoList.map(item => {return item;});
+    newRepoList.push(repo);
+    return newRepoList;
+  }
+
+  render() {
+    let { errMessage, emptyTip } = this.props;
+    return (
+      <Fragment>
+        <div className="main-panel-north">
+          <RepoViewToolbar 
+            libraryType={this.props.currentTab}
+            onShowSidePanel={this.props.onShowSidePanel} 
+            onCreateRepo={this.onCreateRepo} 
+          />
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+        </div>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <CurRepoPath currentTab={this.props.currentTab} currentGroup={this.props.currentGroup}/>
+            </div>
+            <div className="cur-view-content">
+              {this.props.isLoading && <Loading />}
+              {(!this.props.isLoading && errMessage) && errMessage}
+              {(!this.props.isLoading && this.state.repoList.length === 0) && emptyTip}
+              {(!this.props.isLoading && this.state.repoList.length > 0) &&
+                <ShareRepoListView 
+                  repoList={this.props.repoList} 
+                  currentGroup={this.props.currentGroup} 
+                  isShowRepoOwner={this.props.isShowRepoOwner}
+                />
+              }
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+ShareRepoView.propTypes = propTypes;
+
+export default ShareRepoView;

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -6,10 +6,10 @@ import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled } from '../../utils/constants';
 
 const propTypes = {
+  currentGroup: PropTypes.object,
   repo: PropTypes.object.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   isShowRepoOwner: PropTypes.bool.isRequired,
-  currentGroup: PropTypes.object.isRequired
 };
 
 class RepoListItem extends React.Component {

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import RepoListItem from './repo-list-item';
+import SharedRepoListItem from './shared-repo-list-item';
 
 const propTypes = {
-  isShowRepoOwner: PropTypes.bool.isRequired,
+  currentGroup: PropTypes.object,
   repoList: PropTypes.array.isRequired,
+  isShowRepoOwner: PropTypes.bool.isRequired,
 };
 
-class RepoListView extends React.Component {
+class SharedRepoListView extends React.Component {
 
   constructor(props) {
     super(props);
@@ -18,26 +19,27 @@ class RepoListView extends React.Component {
   }
 
   renderPCUI = () => {
+    let isShowRepoOwner = this.props.isShowRepoOwner;
     return (
       <table>
         <thead>
           <tr>
             <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
-            <th width="38%">{gettext("Name")}
+            <th width="40%">{gettext("Name")}
               <a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
             </th>
-            <th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="12%"><span className="sr-only">{gettext("Actions")}</span></th>
-            <th width="14%">{gettext("Size")}</th>
+            <th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Size")}</th>
-            <th width="18%">{gettext("Last Update")}
+            <th width={isShowRepoOwner ? '14%' : '22%'}>{gettext("Last Update")}
               <a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
             </th>
-            <th width="16%">{gettext("Owner")}</th>
+            {isShowRepoOwner && <th width="16%">{gettext("Owner")}</th>}
           </tr>
         </thead>
         <tbody>
           {this.props.repoList.map(repo => {
             return (
-              <RepoListItem
+              <SharedRepoListItem
                 key={repo.repo_id}
                 repo={repo}
                 isShowRepoOwner={this.props.isShowRepoOwner}
@@ -52,15 +54,22 @@ class RepoListView extends React.Component {
   }
 
   renderMobileUI = () => {
+    let isShowRepoOwner = this.props.isShowRepoOwner;
     return (
       <table>
         <thead>
           <tr>
             <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="68%">
-              {gettext("Sort:")} {/* TODO: sort */}
+              {isShowRepoOwner ? (
-              {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+                <Fragment>
-              {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+                  {gettext("Sort:")} {/* TODO: sort */}
+                  {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+                  {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+                </Fragment>
+              ) :
+              (gettext('name'))
+              }
             </th>
             <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
           </tr>
@@ -68,7 +77,7 @@ class RepoListView extends React.Component {
         <tbody>
           {this.props.repoList.map(repo => {
             return (
-              <RepoListItem
+              <SharedRepoListItem
                 key={repo.repo_id}
                 repo={repo}
                 isShowRepoOwner={this.props.isShowRepoOwner}
@@ -91,6 +100,6 @@ class RepoListView extends React.Component {
   }
 }
 
-RepoListView.propTypes = propTypes;
+SharedRepoListView.propTypes = propTypes;
 
-export default RepoListView;
+export default SharedRepoListView;

frontend/src/pages/groups/group-view.js

@@ -1,17 +1,14 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Loading from '../../components/loading';
 import { gettext, username, loginUrl } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import Group from '../../models/group';
 import RepoInfo from '../../models/repoInfo';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
+import SharedRepoView from '../../components/repo-view/share-repo-view';
-import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
-import CurGroupPath from '../../components/cur-group-path/';
-import RepoListView from '../../components/repo-list-view/repo-list-view';
 
 const propTypes = {
-
+  onShowSidePanel: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
 };
 
 class GroupView extends React.Component {
@@ -21,8 +18,12 @@ class GroupView extends React.Component {
     this.state = {
       isLoading: true,
       errMessage: '',
+      emptyTip: null,
       currentGroup: null,
+      isStaff: false,
       repoList: [],
+      currentTab: 'group',
+      isShowRepoOwner: true,
     }
   }
 
@@ -40,7 +41,13 @@ class GroupView extends React.Component {
   loadGroup = (groupID) => {
     seafileAPI.getGroup(groupID).then((res) => {
       let currentGroup = new Group(res.data);
-      this.setState({currentGroup: currentGroup});
+      let emptyTip = this.getEmptyTip(currentGroup);
+      let isStaff  = currentGroup.admins.indexOf(username) > -1;  //for item operations
+      this.setState({
+        emptyTip: emptyTip,
+        currentGroup: currentGroup,
+        isStaff: isStaff,
+      });
       this.loadRepos(groupID);
     }).catch((error) => {
       if (error.response) {
@@ -99,25 +106,7 @@ class GroupView extends React.Component {
     });
   }
 
-  onCreateRepo = (repo) => {
+  getEmptyTip = (currentGroup) => {
-    let groupId = this.props.groupID;
-    seafileAPI.createGroupRepo(groupId, repo).then(res => {
-      let repo = new RepoInfo(res.data);
-      let repoList = this.addRepoItem(repo);
-      this.setState({repoList: repoList});
-    }).catch(() => {
-      //todo
-    });
-  }
-
-  addRepoItem = (repo) => {
-    let newRepoList = this.state.repoList.map(item => {return item;});
-    newRepoList.push(repo);
-    return newRepoList;
-  }
-
-  getEmptyTip = () => {
-    let currentGroup = this.state.currentGroup;
     let emptyTip = null;
     if (currentGroup) {
       if (currentGroup.parent_group_id === 0) {
@@ -129,7 +118,7 @@ class GroupView extends React.Component {
           </div>
         );
       } else {
-        if (currentGroup.admins.indexOf(username) == -1) {
+        if (currentGroup.admins.indexOf(username) == -1) {  // is a member of this group
           emptyTip = (
             <div className="empty-tip">
               <h2>{gettext('No libraries')}</h2>
@@ -149,33 +138,8 @@ class GroupView extends React.Component {
   }
 
   render() {
-    let emptyTip = this.getEmptyTip();
     return (
-      <Fragment>
+      <SharedRepoView {...this.state} {...this.props}/>
-        <div className="main-panel-north">
-          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} libraryType={'group'}/>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
-        </div>
-        <div className="main-panel-center">
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              {this.state.currentGroup && <CurGroupPath currentGroup={this.state.currentGroup}/>}
-            </div>
-            <div className="cur-view-content">
-              {this.state.isLoading && <Loading />}
-              {(!this.state.isLoading && this.state.errMessage) && this.state.errMessage}
-              {(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
-              {(!this.state.isLoading && this.state.repoList.length > 0) &&
-                <RepoListView 
-                  isShowRepoOwner={true}
-                  currentGroup={this.state.currentGroup} 
-                  repoList={this.state.repoList} 
-                />
-              }
-            </div>
-          </div>
-        </div>
-      </Fragment>
     );
   }
 }