['share dialog' - 'Share Link', 'Share Admin' - 'Links'] share links: get limited links per request, scroll down to get more (#5840)

frontend/src/components/share-link-panel/index.js

@@ -18,6 +18,8 @@ const propTypes = {
   itemType: PropTypes.string
 };
 
+const PER_PAGE = 25;
+
 class ShareLinkPanel extends React.Component {
 
   constructor(props) {
@@ -28,6 +30,9 @@ class ShareLinkPanel extends React.Component {
 
     this.state = {
       isLoading: true,
+      hasMore: false,
+      isLoadingMore: false,
+      page: 1,
       mode: 'listLinks',
       sharedLinkInfo: null,
       shareLinks: [],
@@ -37,11 +42,12 @@ class ShareLinkPanel extends React.Component {
   }
 
   componentDidMount() {
-    let path = this.props.itemPath;
-    let repoID = this.props.repoID;
-    seafileAPI.getShareLink(repoID, path).then((res) => {
+    const { page } = this.state;
+    const { repoID, itemPath: path } = this.props;
+    seafileAPI.listShareLinks({repoID, path, page}).then((res) => {
       this.setState({
         isLoading: false,
+        hasMore: res.data.length == PER_PAGE,
         shareLinks: res.data.map(item => new ShareLink(item))
       });
     }).catch(error => {
@@ -184,13 +190,46 @@ class ShareLinkPanel extends React.Component {
     });
   };
 
+  handleScroll = (event) => {
+    if (!this.state.isLoadingMore && this.state.hasMore) {
+      const clientHeight = event.target.clientHeight;
+      const scrollHeight = event.target.scrollHeight;
+      const scrollTop    = event.target.scrollTop;
+      const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+      if (isBottom) { // scroll to the bottom
+        this.setState({isLoadingMore: true}, () => {
+          this.getMore();
+        });
+      }
+    }
+  };
+
+  getMore = () => {
+    const { page, shareLinks } = this.state;
+    const { repoID, itemPath: path } = this.props;
+    seafileAPI.listShareLinks({repoID, path, page: page + 1}).then((res) => {
+      this.setState({
+        isLoadingMore: false,
+        hasMore: res.data.length == PER_PAGE,
+        page: page + 1,
+        shareLinks: shareLinks.concat(res.data.map(item => new ShareLink(item)))
+      });
+    }).catch(error => {
+      this.setState({
+        isLoadingMore: false
+      });
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   render() {
     if (this.state.isLoading) {
       return <Loading />;
     }
 
     const { repoID, itemPath, userPerm } = this.props;
-    const { mode, shareLinks, sharedLinkInfo, permissionOptions, currentPermission } = this.state;
+    const { mode, shareLinks, sharedLinkInfo, permissionOptions, currentPermission, isLoadingMore } = this.state;
 
     switch (mode) {
       case 'displayLinkDetails':
@@ -242,6 +281,8 @@ class ShareLinkPanel extends React.Component {
             toggleSelectLink={this.toggleSelectLink}
             deleteShareLinks={this.deleteShareLinks}
             deleteLink={this.deleteLink}
+            handleScroll={this.handleScroll}
+            isLoadingMore={isLoadingMore}
           />
         );
     }

frontend/src/components/share-link-panel/link-list.js

@@ -4,6 +4,7 @@ import { gettext, siteRoot } from '../../utils/constants';
 import EmptyTip from '../empty-tip';
 import LinkItem from './link-item';
 import CommonOperationConfirmationDialog from '../../components/dialog/common-operation-confirmation-dialog';
+import Loading from '../../components/loading';
 
 const propTypes = {
   shareLinks: PropTypes.array.isRequired,
@@ -13,7 +14,9 @@ const propTypes = {
   toggleSelectAllLinks: PropTypes.func.isRequired,
   toggleSelectLink: PropTypes.func.isRequired,
   deleteLink: PropTypes.func.isRequired,
-  deleteShareLinks: PropTypes.func.isRequired
+  deleteShareLinks: PropTypes.func.isRequired,
+  isLoadingMore: PropTypes.bool.isRequired,
+  handleScroll: PropTypes.func.isRequired
 };
 
 class LinkList extends React.Component {
@@ -46,7 +49,7 @@ class LinkList extends React.Component {
   };
 
   render() {
-    const { shareLinks, permissionOptions } = this.props;
+    const { shareLinks, permissionOptions, isLoadingMore, handleScroll } = this.props;
     const selectedLinks = shareLinks.filter(item => item.isSelected);
     const isAllLinksSelected = shareLinks.length == selectedLinks.length;
 
@@ -88,7 +91,7 @@ class LinkList extends React.Component {
                 </tr>
               </thead>
             </table>
-            <div className='table-real-container'>
+            <div className='table-real-container' onScroll={handleScroll}>
               <table className="table-real-content table-thead-hidden">
                 <thead>
                   <tr>
@@ -114,6 +117,7 @@ class LinkList extends React.Component {
                   })}
                 </tbody>
               </table>
+              {isLoadingMore && <Loading />}
             </div>
           </div>
         )}