Share manage optimized (#2723)

frontend/src/components/dialog/share-to-group.js

@@ -268,6 +268,7 @@ class ShareToGroup extends React.Component {
             <td>
               <PermissionEditor 
                 isTextMode={false}
+                isEditIconShow={false}
                 currentPermission={this.state.permission}
                 permissions={this.permissions}
                 onPermissionChangedHandler={this.setPermission}

frontend/src/components/dialog/share-to-user.js

@@ -288,7 +288,7 @@ class ShareToUser extends React.Component {
             <td>
               <PermissionEditor 
                 isTextMode={false}
-                isEditIconShow={this.state.isOperationShow}
+                isEditIconShow={false}
                 currentPermission={this.state.permission}
                 permissions={this.permissions}
                 onPermissionChangedHandler={this.setPermission}

frontend/src/models/shared-folder-info.js

@@ -0,0 +1,23 @@
+class SharedFolderInfo {
+
+  constructor(object) {
+    this.path = object.path;
+    this.folder_name = object.folder_name;
+    this.repo_id = object.repo_id;
+    this.repo_name = object.repo_name;
+    this.share_type = object.share_type;
+    this.share_permission = object.share_permission;
+    if (object.share_type === 'group') {
+      this.group_id = object.group_id;
+      this.group_name = object.group_name;
+    } else {
+      this.share_type = 'user'; // change personal to user;
+      this.user_name = object.user_name;
+      this.user_email = object.user_email;
+      this.contact_email = object.contact_email;
+    }
+  }
+
+}
+
+export default SharedFolderInfo;

frontend/src/models/shared-link-info.js

@@ -0,0 +1,21 @@
+class SharedLinkInfo {
+
+  constructor(object) {
+    this.repo_id = object.repo_id;
+    this.repo_name = object.repo_name;
+    this.path = object.path;
+    this.obj_name = object.obj_name;
+    this.is_dir = object.is_dir;
+    this.permissions = object.permissions;
+    this.username = object.username;
+    this.is_expired = object.is_expired;
+    this.expire_date = object.expire_date;
+    this.token = object.token;
+    this.link = object.link;
+    this.view_cnt = object.view_cnt;
+    this.ctime = object.ctime;
+  }
+
+}
+
+export default SharedLinkInfo;

frontend/src/models/shared-repo-info.js

@@ -0,0 +1,26 @@
+class SharedRepoInfo {
+  
+  constructor(object) {
+    this.repo_id = object.repo_id;
+    this.repo_name = object.repo_name;
+    this.share_type = object.share_type;
+    this.share_permission = object.share_permission;
+    this.modifier_name = object.modifier_name;
+    this.modifier_email = object.modifier_email;
+    this.modifier_contact_email = object.modifier_contact_email;
+    this.encrypted = object.encrypted;
+    if (this.share_type === 'personal') {
+      this.is_admin = object.is_admin;
+      this.user_name = object.user_name;
+      this.user_email = object.user_email;
+      this.contact_email = this.contact_email;
+    } else if(this.share_type === 'group') {
+      this.is_admin = object.is_admin;
+      this.group_id = object.group_id;
+      this.group_name = object.group_name;
+    }
+  }
+
+}
+
+export default SharedRepoInfo;

frontend/src/models/shared-upload-info.js

@@ -0,0 +1,18 @@
+class SharedUploadInfo {
+   
+  constructor(object) {
+    this.repo_id = object.repo_id;
+    this.repo_name = object.repo_name;
+    this.path = object.path;
+    this.link = object.link;
+    this.obj_name = object.obj_name;
+    this.username = object.username;
+    this.ctime = object.ctime;
+    this.token = object.token;
+    this.view_cnt = object.view_cnt;
+  }
+
+}
+
+
+export default SharedUploadInfo;

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

@@ -4,11 +4,12 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import PermissionEditor from '../../components/permission-editor';
+import SharedFolderInfo from '../../models/shared-folder-info';
 
 class Content extends Component {
 
   render() {
-    const {loading, errorMsg, items} = this.props.data;
+    const { loading, errorMsg, items } = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -33,7 +34,11 @@ class Content extends Component {
               <th width="8%"></th>
             </tr>
           </thead>
-          <TableBody items={items} />
+          <tbody>
+            {items.map((item, index) => {
+              return (<Item key={index} item={item} unshareFolder={this.props.unshareFolder}/>);
+            })}
+          </tbody>
         </table>
       );
 
@@ -42,43 +47,13 @@ class Content extends Component {
   }
 }
 
-class TableBody extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      items: this.props.items
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.clickDocument);
-  }
-
-  clickDocument(e) {
-    // TODO: click 'outside' to hide `<select>`
-  }
-
-  render() {
-
-    let listItems = this.state.items.map(function(item, index) {
-      return <Item key={index} data={item} />;
-    }, this);
-
-    return (
-      <tbody>{listItems}</tbody>
-    );
-  }
-}
-
 class Item extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      share_permission: this.props.data.share_permission,
+      share_permission: this.props.item.share_permission,
       showOpIcon: false,
-      showSelect: false,
       unshared: false
     };
 
@@ -98,63 +73,28 @@ class Item extends Component {
 
   unshare = (e) => {
     e.preventDefault();
-
-    const data = this.props.data;
-    const share_type = data.share_type;
-
-    let options = {
-      'p': data.path,
-    };
-    if (share_type == 'personal') {
-      options.share_type = 'user';
-      options.username = data.user_email;
-    } else if (share_type == 'group') {
-      options.share_type = 'group';
-      options.group_id = data.group_id;
-    }
-
-    seafileAPI.unshareFolder(data.repo_id, options)
-      .then((res) => {
-        this.setState({
-          unshared: true
-        });
-        // TODO: show feedback msg
-        // gettext("Successfully deleted 1 item")
-      })
-      .catch((error) => {
-      // TODO: show feedback msg
-      });
-  }
-
-  showSelect = (e) => {
-    e.preventDefault();
-    this.setState({
-      showSelect: true
-    });
+    const item = this.props.item;
+    this.props.unshareFolder(item);
   }
 
   changePerm = (permission) => {
-    const data = this.props.data;
-    const share_type = data.share_type;
     const perm = permission;
     const postData = {
       'permission': perm
     };
+    const item = this.props.item;
     let options = {
-      'p': data.path,
+      'p': item.path,
+      'share_type': item.share_type
     };
-    if (share_type == 'personal') {
-      options.share_type = 'user';
-      options.username = data.user_email;
-    } else if (share_type == 'group') {
-      options.share_type = 'group';
-      options.group_id = data.group_id;
+    if (item.share_type == 'user') {
+      options.username = item.user_email;
+    } else {
+      options.group_id = item.group_id;
     }
-    seafileAPI.updateFolderSharePerm(data.repo_id, postData, options).then((res) => {
-      this.setState({
-        share_permission: perm,
-        showSelect: false
-      });
+
+    seafileAPI.updateFolderSharePerm(item.repo_id, postData, options).then((res) => {
+      this.setState({share_permission: perm});
       // TODO: show feedback msg
       // gettext("Successfully modified permission")
     }).catch((error) => {
@@ -162,52 +102,50 @@ class Item extends Component {
     });
   }
 
-  render() {
-
-    if (this.state.unshared) {
-      return null;
-    }
-
-    const data = this.props.data;
-    const share_permission = this.state.share_permission;
-
+  getFolderParams = () => {
+    let item = this.props.item;
+    let share_permission = this.state.share_permission;
     let is_readonly = false;
     if (share_permission == 'r' || share_permission == 'preview') {
       is_readonly = true;
     }
-    data.icon_url = Utils.getFolderIconUrl({
+    let iconUrl = Utils.getFolderIconUrl({
       is_readonly: is_readonly, 
       size: Utils.isHiDPI() ? 48 : 24
     }); 
-    data.icon_title = Utils.getFolderIconTitle({
+    let iconTitle = Utils.getFolderIconTitle({
       'permission': share_permission
     });
-    data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
+    let folderUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
 
-    let shareTo;
-    const shareType = data.share_type;
-    if (shareType == 'personal') {
-      shareTo = <td title={data.contact_email}>{data.user_name}</td>;
-    } else if (shareType == 'group') {
-      shareTo = <td>{data.group_name}</td>;
+    return { iconUrl, iconTitle, folderUrl };
   }
 
-    data.cur_perm = share_permission;
-    data.cur_perm_text = Utils.sharePerms(data.cur_perm);
+  render() {
+    const item = this.props.item;
+    let { iconUrl, iconTitle, folderUrl } = this.getFolderParams();
+
+    let shareTo;
+    const shareType = item.share_type;
+    if (shareType == 'user') {
+      shareTo = <td title={item.contact_email}>{item.user_name}</td>;
+    } else if (shareType == 'group') {
+      shareTo = <td>{item.group_name}</td>;
+    }
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let unshareIconClassName = 'unshare op-icon sf2-icon-x3' + iconVisibility;
 
-    const item = (
+    return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td><Link to={data.url}>{data.folder_name}</Link></td>
+        <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+        <td><Link to={folderUrl}>{item.folder_name}</Link></td>
         {shareTo}
         <td>
           <PermissionEditor 
             isTextMode={true}
             isEditIconShow={this.state.showOpIcon}
-            currentPermission={data.cur_perm}
+            currentPermission={this.state.share_permission}
             permissions={this.permissions}
             onPermissionChangedHandler={this.changePerm}
           />
@@ -215,8 +153,6 @@ class Item extends Component {
         <td><a href="#" className={unshareIconClassName} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
-
-    return item;
   }
 }
 
@@ -234,9 +170,12 @@ class ShareAdminFolders extends Component {
   componentDidMount() {
     seafileAPI.listSharedFolders().then((res) => {
       // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      let items = res.data.map(item => {
+        return new SharedFolderInfo(item);
+      });
       this.setState({
         loading: false,
-        items: res.data
+        items: items
       });
     }).catch((error) => {
       if (error.response) {
@@ -262,6 +201,32 @@ class ShareAdminFolders extends Component {
     });
   }
 
+  unshareFolder = (item) => {
+    let options = {};
+    options['p'] = item.path;
+    options.share_type = item.share_type;
+    if (item.share_type == 'user') { // or group
+      options.username = item.user_email;
+    } else {
+      options.group_id = item.group_id;
+    }
+
+    seafileAPI.unshareFolder(item.repo_id, options).then((res) => {
+      let items = this.state.items.filter(folderItem => {
+        if (item.share_type === 'user') {
+          return folderItem.user_email !== item.user_email;
+        } else {
+          return folderItem.group_id !== item.group_id;
+        }
+      });
+      this.setState({items: items});
+      // TODO: show feedback msg
+      // gettext("Successfully deleted 1 item")
+    }).catch((error) => {
+      // TODO: show feedback msg
+    });
+  }
+
   render() {
     return (
       <div className="main-panel-center">
@@ -270,7 +235,12 @@ class ShareAdminFolders extends Component {
             <h3 className="sf-heading">{gettext("Folders")}</h3>
           </div>
           <div className="cur-view-content">
-            <Content data={this.state} />
+            <Content 
+              errorMsg={this.state.errorMsg}
+              loading={this.state.loading}
+              items={this.state.items}
+              unshareFolder={this.unshareFolder}
+            />
           </div>
         </div>
       </div>

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

@@ -4,11 +4,12 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import PermissionEditor from '../../components/permission-editor';
+import SharedRepoInfo from '../../models/shared-repo-info';
 
 class Content extends Component {
 
   render() {
-    const {loading, errorMsg, items} = this.props.data;
+    const {loading, errorMsg, items} = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -33,7 +34,11 @@ class Content extends Component {
               <th width="8%"></th>
             </tr>
           </thead>
-          <TableBody items={items} />
+          <tbody>
+            {items.map((item, index) => {
+              return (<Item key={index} item={item} unshareFolder={this.props.unshareFolder}/>);
+            })}
+          </tbody>
         </table>
       );
 
@@ -42,44 +47,16 @@ class Content extends Component {
   }
 }
 
-class TableBody extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      items: this.props.items
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.clickDocument);
-  }
-
-  clickDocument(e) {
-    // TODO: click 'outside' to hide `<select>`
-  }
-
-  render() {
-
-    let listItems = this.state.items.map(function(item, index) {
-      return <Item key={index} data={item} />;
-    }, this);
-
-    return (
-      <tbody>{listItems}</tbody>
-    );
-  }
-}
-
 class Item extends Component {
 
   constructor(props) {
     super(props);
+
+    let item = this.props.item;
     this.state = {
-      share_permission: this.props.data.share_permission,
-      is_admin: this.props.data.is_admin,
+      share_permission: item.share_permission,
+      is_admin: item.is_admin,
       showOpIcon: false,
-      showSelect: false,
       unshared: false
     };
     this.permissions = ['rw', 'r'];
@@ -96,58 +73,25 @@ class Item extends Component {
     this.setState({showOpIcon: false});
   }
 
-  unshare = (e) => {
-    e.preventDefault();
-
-    const data = this.props.data;
-    const share_type = data.share_type;
-    let options = {
-      'share_type': share_type
-    };
-    if (share_type == 'personal') {
-      options.user = data.user_email;
-    } else if (share_type == 'group') {
-      options.group_id = data.group_id;
-    } 
-
-    seafileAPI.unshareRepo(data.repo_id, options)
-      .then((res) => {
-        this.setState({
-          unshared: true
-        });
-        // TODO: show feedback msg
-        // gettext("Successfully deleted 1 item")
-      })
-      .catch((error) => {
-      // TODO: show feedback msg
-      });
-  }
-
-  showSelect = (e) => {
-    e.preventDefault();
-    this.setState({
-      showSelect: true
-    });
-  }
-
   changePerm = (permission) => {
-    const data = this.props.data;
-    const share_type = data.share_type;
-    const perm = permission;
+    const item = this.props.item;
+    const share_type = item.share_type;
     let options = {
       'share_type': share_type,
-      'permission': perm
+      'permission': permission
     };
     if (share_type == 'personal') {
-      options.user = data.user_email;
+      options.user = item.user_email;
     } else if (share_type == 'group') {
-      options.group_id = data.group_id;
+      options.group_id = item.group_id;
+    } else if (share_type === 'public') {
+      // nothing todo
     }
-    seafileAPI.updateRepoSharePerm(data.repo_id, options).then((res) => {
+
+    seafileAPI.updateRepoSharePerm(item.repo_id, options).then(() => {
       this.setState({
-        share_permission: perm == 'admin' ? 'rw' : perm,
-        is_admin: perm == 'admin',
-        showSelect: false
+        share_permission: permission == 'admin' ? 'rw' : permission,
+        is_admin: permission == 'admin',
       });
       // TODO: show feedback msg
       // gettext("Successfully modified permission")
@@ -156,67 +100,72 @@ class Item extends Component {
     });
   }
 
-  render() {
-
-    if (this.state.unshared) {
-      return null;
+  unshare = () => {
+    this.props.unshareFolder(this.props.item);
   }
 
-    const data = this.props.data;
-    const share_permission = this.state.share_permission;
-    const is_admin = this.state.is_admin;
+  getRepoParams = () => {
+    let item = this.props.item;
+    const { share_permission, is_admin } = this.state;
 
     let is_readonly = false;
     if (share_permission == 'r' || share_permission == 'preview') {
       is_readonly = true;
     }
-    data.icon_url = Utils.getLibIconUrl({
-      is_encrypted: data.encrypted,
+    let iconUrl = Utils.getLibIconUrl({
+      is_encrypted: item.encrypted,
       is_readonly: is_readonly, 
       size: Utils.isHiDPI() ? 48 : 24
     }); 
-    data.icon_title = Utils.getLibIconTitle({
-      'encrypted': data.encrypted,
+    let iconTitle = Utils.getLibIconTitle({
+      'encrypted': item.encrypted,
       'is_admin': is_admin,
       'permission': share_permission
     });
-    data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}`;
+    let repoUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}`;
+
+    return { iconUrl, iconTitle, repoUrl };
+  }
+
+  render() {
+
+    let { iconUrl, iconTitle, repoUrl } = this.getRepoParams();
+    let item = this.props.item;
+    let { share_permission, is_admin } = this.state;
 
     let shareTo;
-    const shareType = data.share_type;
+    const shareType = item.share_type;
     if (shareType == 'personal') {
-      shareTo = <td title={data.contact_email}>{data.user_name}</td>;
+      shareTo = <td title={item.contact_email}>{item.user_name}</td>;
     } else if (shareType == 'group') {
-      shareTo = <td>{data.group_name}</td>;
+      shareTo = <td>{item.group_name}</td>;
     } else if (shareType == 'public') {
       shareTo = <td>{gettext('all members')}</td>;
     }
 
-    data.cur_perm = share_permission;
     // show 'admin' perm or not
-    data.show_admin = isPro && data.share_type != 'public'; 
-    if (data.show_admin && is_admin) {
-      data.cur_perm = 'admin';
+    let showAdmin = isPro && (item.share_type !== 'public'); 
+    if (showAdmin && is_admin) {
+      share_permission = 'admin';
     }
-    data.cur_perm_text = Utils.sharePerms(data.cur_perm);
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let unshareIconClassName = 'unshare op-icon sf2-icon-x3' + iconVisibility;
 
-    if (data.show_admin && this.permissions.indexOf('admin') === -1) {
+    if (showAdmin && this.permissions.indexOf('admin') === -1) {
       this.permissions.splice(2, 0, 'admin'); // add a item after 'r' permission;
     }
 
-    const item = (
+    return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td><Link to={data.url}>{data.repo_name}</Link></td>
+        <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+        <td><Link to={repoUrl}>{item.repo_name}</Link></td>
         {shareTo}
         <td>
           <PermissionEditor 
             isTextMode={true}
             isEditIconShow={this.state.showOpIcon}
-            currentPermission={data.cur_perm}
+            currentPermission={share_permission}
             permissions={this.permissions}
             onPermissionChangedHandler={this.changePerm}
           />
@@ -224,8 +173,6 @@ class Item extends Component {
         <td><a href="#" className={unshareIconClassName} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
-
-    return item;
   }
 }
 
@@ -243,9 +190,12 @@ class ShareAdminLibraries extends Component {
   componentDidMount() {
     seafileAPI.listSharedRepos().then((res) => {
       // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      let items = res.data.map(item => {
+        return new SharedRepoInfo(item);
+      });
       this.setState({
         loading: false,
-        items: res.data
+        items: items
       });
     }).catch((error) => {
       if (error.response) {
@@ -261,7 +211,6 @@ class ShareAdminLibraries extends Component {
             errorMsg: gettext("Error")
           });
         }
-
       } else {
         this.setState({
           loading: false,
@@ -271,6 +220,40 @@ class ShareAdminLibraries extends Component {
     });
   }
 
+  unshareFolder = (item) => {
+    const share_type = item.share_type;
+    let options = {
+      'share_type': share_type
+    };
+    if (share_type == 'personal') {
+      options.user = item.user_email;
+    } else if (share_type == 'group') {
+      options.group_id = item.group_id;
+    } 
+
+    seafileAPI.unshareRepo(item.repo_id, options).then((res) => {
+      let items = [];
+      if (item.share_type === 'personal') {
+        items = this.state.items.filter(repoItem => {
+          return !(repoItem.user_email === item.user_email && repoItem.repo_id === item.repo_id);
+        });
+      } else if (item.share_type === 'group') {
+        items = this.state.items.filter(repoItem => {
+          return !(repoItem.group_id === item.group_id && repoItem.repo_id === item.repo_id);
+        });
+      } else if (item.share_type === 'public') {
+        items = this.state.items.filter(repoItem => {
+          return !(repoItem.share_type === 'public' && repoItem.repo_id === item.repo_id);
+        });
+      }
+      this.setState({items: items});
+      // TODO: show feedback msg
+      // gettext("Successfully deleted 1 item")
+    }).catch((error) => {
+    // TODO: show feedback msg
+    });
+  }
+
   render() {
     return (
       <div className="main-panel-center">
@@ -279,7 +262,12 @@ class ShareAdminLibraries extends Component {
             <h3 className="sf-heading">{gettext("Libraries")}</h3>
           </div>
           <div className="cur-view-content">
-            <Content data={this.state} />
+            <Content 
+              errorMsg={this.state.errorMsg}
+              loading={this.state.loading}
+              items={this.state.items}
+              unshareFolder={this.unshareFolder}
+            />
           </div>
         </div>
       </div>

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

@@ -1,10 +1,11 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } 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, canGenerateUploadLink } from '../../utils/constants';
+import SharedLinkInfo from '../../models/shared-link-info';
 
 class Content extends Component {
 
@@ -25,13 +26,11 @@ class Content extends Component {
 
   showModal = (options) => {
     this.toggleModal();
-    this.setState({
-      modalContent: options.content
-    });
+    this.setState({modalContent: options.content});
   }
 
   render() {
-    const {loading, errorMsg, items} = this.props.data;
+    const { loading, errorMsg, items } = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -58,9 +57,12 @@ class Content extends Component {
                 <th width="10%">{/*Operations*/}</th>
               </tr>
             </thead>
-            <TableBody items={items} showModal={this.showModal} />
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item key={index} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
+              })}
+            </tbody>
           </table>
-
           <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal} centered={true}>
             <ModalHeader toggle={this.toggleModal}>{gettext('Link')}</ModalHeader>
             <ModalBody>
@@ -75,113 +77,91 @@ class Content extends Component {
   }
 }
 
-class TableBody extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      //items: this.props.items
-    };
-  }
-
-  render() {
-
-    let listItems = this.props.items.map(function(item, index) {
-      return <Item key={index} data={item} showModal={this.props.showModal} />;
-    }, this);
-
-    return (
-      <tbody>{listItems}</tbody>
-    );
-  }
-}
-
 class Item extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
       showOpIcon: false,
-      deleted: false
     };
   }
 
   handleMouseOver = () => {
-    this.setState({
-      showOpIcon: true
-    });
+    this.setState({showOpIcon: true});
   }
 
   handleMouseOut = () => {
-    this.setState({
-      showOpIcon: false
-    });
+    this.setState({showOpIcon: false});
   }
 
   viewLink = (e) => {
     e.preventDefault();
-    this.props.showModal({content: this.props.data.link});
+    this.props.showModal({content: this.props.item.link});
   }
   
   removeLink = (e) => {
     e.preventDefault();
-
-    const data = this.props.data;
-    seafileAPI.deleteShareLink(data.token)
-      .then((res) => {
-        this.setState({
-          deleted: true
-        });
-        // TODO: show feedback msg
-        // gettext("Successfully deleted 1 item")
-      })
-      .catch((error) => {
-      // TODO: show feedback msg
-      });
+    this.props.onRemoveLink(this.props.item);
   }
 
-  render() {
-
-    if (this.state.deleted) {
-      return null;
-    }
-
-    const data = this.props.data;
-    const icon_size = Utils.isHiDPI() ? 48 : 24;
-    if (data.is_dir) {
-      data.icon_url = Utils.getFolderIconUrl({
+  getLinkParams = () => {
+    let item = this.props.item;
+    let icon_size = Utils.isHiDPI() ? 48 : 24;
+    let iconUrl = '';
+    let linkUrl = '';
+    if (item.is_dir) {
+      iconUrl = Utils.getFolderIconUrl({
         is_readonly: false, 
         size: icon_size
       });
-      data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
+      linkUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
     } else {
-      data.icon_url = Utils.getFileIconUrl(data.obj_name, icon_size); 
-      data.url = `${siteRoot}lib/${data.repo_id}/file${Utils.encodePath(data.path)}`;
+      iconUrl = Utils.getFileIconUrl(item.obj_name, icon_size); 
+      linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
     }
-    let showDate = function(options) {
-      const date = moment(options.date).format('YYYY-MM-DD');
-      return options.is_expired ? <span className="error">{date}</span> : date;
+
+    return { iconUrl, linkUrl };
   }
 
+  renderExpriedData = () => {
+    let item = this.props.item;
+    if (!item.expire_date) {
+      return (
+        <Fragment>--</Fragment>
+      );
+    }
+    let expire_date = moment(item.expire_date).format('YYYY-MM-DD');
+    return (
+      <Fragment>
+        {item.is_expired ? 
+          <span className="error">{expire_date}</span> :
+          expire_date
+        }
+      </Fragment>
+    );
+  }
+
+  render() {
+    const item = this.props.item;
+    let { iconUrl, linkUrl } = this.getLinkParams();
+
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let linkIconClassName = 'sf2-icon-link op-icon' + iconVisibility; 
     let deleteIconClassName = 'sf2-icon-delete op-icon' + iconVisibility;
 
-    const item = (
+    return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={data.icon_url} width="24" /></td>
-        <td><Link to={data.url}>{data.obj_name}</Link></td>
-        <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
-        <td>{data.view_cnt}</td>
-        <td>{data.expire_date ? showDate({date: data.expire_date, is_expired: data.is_expired}) : '--'}</td> 
+        <td><img src={iconUrl} width="24" /></td>
+        <td><Link to={linkUrl}>{item.obj_name}</Link></td>
+        <td><Link to={`${siteRoot}library/${item.repo_id}/${item.repo_name}/`}>{item.repo_name}</Link></td>
+        <td>{item.view_cnt}</td>
+        <td>{this.renderExpriedData()}</td> 
         <td>
           <a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
           <a href="#" className={deleteIconClassName} title={gettext('Remove')} onClick={this.removeLink}></a>
         </td>
       </tr>
     );
-
-    return item;
   }
 }
 
@@ -199,9 +179,12 @@ class ShareAdminShareLinks extends Component {
   componentDidMount() {
     seafileAPI.listShareLinks().then((res) => {
       // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      let items = res.data.map(item => {
+        return new SharedLinkInfo(item);
+      });
       this.setState({
         loading: false,
-        items: res.data
+        items: items
       });
     }).catch((error) => {
       if (error.response) {
@@ -227,6 +210,19 @@ class ShareAdminShareLinks extends Component {
     });
   }
 
+  onRemoveLink = (item) => {
+    seafileAPI.deleteUploadLink(item.token).then(() => {
+      let items = this.state.items.filter(uploadItem => {
+        return uploadItem.token !== item.token;
+      });
+      this.setState({items: items});
+      // TODO: show feedback msg
+      // gettext("Successfully deleted 1 item")
+    }).catch((error) => {
+    // TODO: show feedback msg
+    });
+  }
+
   render() {
     return (
       <div className="main-panel-cneter">
@@ -236,13 +232,18 @@ class ShareAdminShareLinks extends Component {
               <li className="nav-item">
                 <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">{gettext('Share Links')}</Link>
               </li>
-              { canGenerateUploadLink ?
+              {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} />
+            <Content
+              errorMsg={this.state.errorMsg}
+              items={this.state.items}
+              loading={this.state.loading}
+              onRemoveLink={this.onRemoveLink}
+            />
           </div>
         </div>
       </div>

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

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { Link } from '@reach/router';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants';
+import SharedUploadInfo from '../../models/shared-upload-info';
 
 class Content extends Component {
 
@@ -30,7 +31,7 @@ class Content extends Component {
   }
 
   render() {
-    const {loading, errorMsg, items} = this.props.data;
+    const { loading, errorMsg, items } = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -56,7 +57,11 @@ class Content extends Component {
                 <th width="10%">{/*Operations*/}</th>
               </tr>
             </thead>
-            <TableBody items={items} showModal={this.showModal} />
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item key={index} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
+              })}
+            </tbody>
           </table>
 
           <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal} centered={true}>
@@ -73,34 +78,12 @@ class Content extends Component {
   }
 }
 
-class TableBody extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      //items: this.props.items
-    };
-  }
-
-  render() {
-
-    let listItems = this.props.items.map(function(item, index) {
-      return <Item key={index} data={item} showModal={this.props.showModal} />;
-    }, this);
-
-    return (
-      <tbody>{listItems}</tbody>
-    );
-  }
-}
-
 class Item extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
       showOpIcon: false,
-      deleted: false
     };
   }
 
@@ -114,60 +97,47 @@ class Item extends Component {
 
   viewLink = (e) => {
     e.preventDefault();
-    this.props.showModal({content: this.props.data.link});
+    this.props.showModal({content: this.props.item.link});
   }
   
   removeLink = (e) => {
     e.preventDefault();
-
-    const data = this.props.data;
-    seafileAPI.deleteUploadLink(data.token)
-      .then((res) => {
-        this.setState({
-          deleted: true
-        });
-        // TODO: show feedback msg
-        // gettext("Successfully deleted 1 item")
-      })
-      .catch((error) => {
-      // TODO: show feedback msg
-      });
+    this.props.onRemoveLink(this.props.item);
   }
 
-  render() {
-
-    if (this.state.deleted) {
-      return null;
-    }
-
-    const data = this.props.data;
-
-    const icon_size = Utils.isHiDPI() ? 48 : 24;
-    data.icon_url = Utils.getFolderIconUrl({
+  getUploadParams = () => {
+    let item = this.props.item;
+    let icon_size = Utils.isHiDPI() ? 48 : 24;
+    let iconUrl = Utils.getFolderIconUrl({
       is_readonly: false, 
       size: icon_size
     });
 
-    data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
+    let uploadUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
+
+    return { iconUrl, uploadUrl };
+  }
+
+  render() {
+    let item = this.props.item;
+    let { iconUrl, uploadUrl } = this.getUploadParams();
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
     let linkIconClassName = 'sf2-icon-link op-icon' + iconVisibility; 
     let deleteIconClassName = 'sf2-icon-delete op-icon' + iconVisibility;
 
-    const item = (
+    return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={data.icon_url} width="24" /></td>
-        <td><Link to={data.url}>{data.obj_name}</Link></td>
-        <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}`}>{data.repo_name}</Link></td>
-        <td>{data.view_cnt}</td>
+        <td><img src={iconUrl} width="24" /></td>
+        <td><Link to={uploadUrl}>{item.obj_name}</Link></td>
+        <td><Link to={`${siteRoot}library/${item.repo_id}/${item.repo_name}`}>{item.repo_name}</Link></td>
+        <td>{item.view_cnt}</td>
         <td>
           <a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
           <a href="#" className={deleteIconClassName} title={gettext('Remove')} onClick={this.removeLink}></a>
         </td>
       </tr>
     );
-
-    return item;
   }
 }
 
@@ -185,9 +155,12 @@ class ShareAdminUploadLinks extends Component {
   componentDidMount() {
     seafileAPI.listUploadLinks().then((res) => {
       // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      let items = res.data.map(item => {
+        return new SharedUploadInfo(item);
+      });
       this.setState({
         loading: false,
-        items: res.data
+        items: items
       });
     }).catch((error) => {
       if (error.response) {
@@ -203,7 +176,6 @@ class ShareAdminUploadLinks extends Component {
             errorMsg: gettext("Error")
           });
         }
-
       } else {
         this.setState({
           loading: false,
@@ -213,20 +185,38 @@ class ShareAdminUploadLinks extends Component {
     });
   }
 
+  onRemoveLink = (item) => {
+    seafileAPI.deleteUploadLink(item.token).then(() => {
+      let items = this.state.items.filter(uploadItem => {
+        return uploadItem.token !== item.token;
+      });
+      this.setState({items: items});
+      // TODO: show feedback msg
+      // gettext("Successfully deleted 1 item")
+    }).catch((error) => {
+    // TODO: show feedback msg
+    });
+  }
+
   render() {
     return (
       <div className="main-panel-center">
         <div className="cur-view-container">
           <div className="cur-view-path">
             <ul className="nav">
-              { canGenerateShareLink ?
+              { 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} />
+            <Content
+              errorMsg={this.state.errorMsg}
+              items={this.state.items}
+              loading={this.state.loading}
+              onRemoveLink={this.onRemoveLink}
+            />
           </div>
         </div>
       </div>