Share manage optimized (#2723)

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();
+    this.props.onRemoveLink(this.props.item);
+  }
 
-    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
+  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
       });
+      linkUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
+    } else {
+      iconUrl = Utils.getFileIconUrl(item.obj_name, icon_size); 
+      linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
+    }
+
+    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() {
-
-    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({
-        is_readonly: false, 
-        size: icon_size
-      }); 
-      data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
-    } else {
-      data.icon_url = Utils.getFileIconUrl(data.obj_name, icon_size); 
-      data.url = `${siteRoot}lib/${data.repo_id}/file${Utils.encodePath(data.path)}`;
-    }
-    let showDate = function(options) {
-      const date = moment(options.date).format('YYYY-MM-DD');
-      return options.is_expired ? <span className="error">{date}</span> : date;
-    }
+    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>