Use state change directory array

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -67,6 +67,8 @@ const propTypes = {
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
+  scrollPage: PropTypes.func.isRequired,
+  isCurrentPage: PropTypes.bool.isRequired,
 };
 
 class DirColumnView extends React.Component {
@@ -224,6 +226,8 @@ class DirColumnView extends React.Component {
               onItemsCopy={this.props.onItemsCopy}
               onItemsDelete={this.props.onItemsDelete}
               onFileTagChanged={this.props.onFileTagChanged}
+              isCurrentPage={this.props.isCurrentPage}
+              scrollPage={this.props.scrollPage}
             />
           )}
         </div>

frontend/src/components/dir-view-mode/dir-grid-view.js

@@ -30,6 +30,8 @@ const propTypes = {
   showDirentDetail: PropTypes.func.isRequired,
   onAddFolder: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
+  scrollPage: PropTypes.func.isRequired,
+  isCurrentPage: PropTypes.bool.isRequired
 };
 
 class DirGridView extends React.Component {
@@ -78,6 +80,8 @@ class DirGridView extends React.Component {
           isDirentDetailShow={this.props.isDirentDetailShow}
           onItemRename={this.props.onItemRename}
           onAddFolder={this.props.onAddFolder}
+          isCurrentPage={this.props.isCurrentPage}
+          scrollPage={this.props.scrollPage}
         />
       </Fragment>
     );

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -38,6 +38,8 @@ const propTypes = {
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
+  scrollPage: PropTypes.func.isRequired,
+  isCurrentPage: PropTypes.bool.isRequired
 };
 
 class DirListView extends React.Component {
@@ -97,6 +99,8 @@ class DirListView extends React.Component {
           onAddFile={this.props.onAddFile}
           onAddFolder={this.props.onAddFolder}
           onFileTagChanged={this.props.onFileTagChanged}
+          isCurrentPage={this.props.isCurrentPage}
+          scrollPage={this.props.scrollPage}
         />
       </Fragment>
     );

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -40,6 +40,8 @@ const propTypes = {
   isDirentDetailShow: PropTypes.bool.isRequired,
   onGridItemClick: PropTypes.func,
   onAddFolder: PropTypes.func.isRequired,
+  scrollPage: PropTypes.func.isRequired,
+  isCurrentPage: PropTypes.bool.isRequired
 };
 
 class DirentGridView extends React.Component{
@@ -61,7 +63,6 @@ class DirentGridView extends React.Component{
       isMutipleOperation: false,
       isGridItemFreezed: false,
       activeDirent: null,
-      direntItemsList: [],
       itemIdex: 100,
     }
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
@@ -72,10 +73,9 @@ class DirentGridView extends React.Component{
   }
 
   componentWillReceiveProps(nextProps) {
-    let direntItemsList = nextProps.direntList.filter((item, index) => {
+    if (this.props.isCurrentPage) {
-      return index < 100
+      this.setState({itemIdex: 100})
-    })
+    }
-    this.setState({direntItemsList: direntItemsList, itemIdex: 100,})
   }
 
   componentWillUnmount() {
@@ -97,16 +97,11 @@ class DirentGridView extends React.Component{
     let target = e.target;
     let itemIdex = this.state.itemIdex;
 
-    const { direntList } = this.props;
-
-   
     if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
-      itemIdex += 100;
+      itemIdex += 100
-      let direntItemsList = direntList.filter((item, index) => {
+      this.setState({itemIdex: itemIdex})
-        return index < itemIdex
-      })
-      this.setState({direntItemsList: direntItemsList, itemIdex: itemIdex})
     }
+    this.props.scrollPage();
   }
 
   onMoveToggle = () => {
@@ -511,11 +506,9 @@ class DirentGridView extends React.Component{
     let direntPath = Utils.joinPath(path, dirent.name);
 
     let direntItemsList = direntList.filter((item, index) => {
-      return index < 100
+      return index < this.state.itemIdex;
     })
 
-    direntItemsList = this.state.direntItemsList.length === 0 ? direntItemsList : this.state.direntItemsList;
-
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -45,6 +45,8 @@ const propTypes = {
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
+  scrollPage: PropTypes.func.isRequired,
+  isCurrentPage: PropTypes.bool.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -65,7 +67,6 @@ class DirentListView extends React.Component {
       progress: 0,
       isMutipleOperation: true,
       activeDirent: null,
-      direntItemsList: [],
       itemIdex: 100,
     };
 
@@ -89,11 +90,9 @@ class DirentListView extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    let direntItemsList = nextProps.direntList.filter((item, index) => {
+    if (this.props.isCurrentPage) {
-      return index < 100
+      this.setState({itemIdex: 100})
-    })
+    }
-    this.setState({direntItemsList: direntItemsList, itemIdex: 100,})
-    
   }
 
   componentWillUnmount() {
@@ -543,27 +542,20 @@ class DirentListView extends React.Component {
     let target = e.target;
     let itemIdex = this.state.itemIdex;
 
-    const { direntList } = this.props;
-
-   
     if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
-      itemIdex += 100;
+      itemIdex += 100
-      let direntItemsList = direntList.filter((item, index) => {
+      this.setState({itemIdex: itemIdex})
-        return index < itemIdex
-      })
-      this.setState({direntItemsList: direntItemsList, itemIdex: itemIdex})
     }
+    this.props.scrollPage();
   }
 
   render() {
     const { direntList, sortBy, sortOrder } = this.props;
 
     let direntItemsList = direntList.filter((item, index) => {
-      return index < 100
+      return index < this.state.itemIdex;
     })
 
-    direntItemsList = this.state.direntItemsList.length === 0 ? direntItemsList : this.state.direntItemsList
-
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -85,6 +85,8 @@ const propTypes = {
   showDirentDetail: PropTypes.func.isRequired,
   onDeleteRepoTag: PropTypes.func.isRequired,
   updateDetail: PropTypes.bool.isRequired,
+  scrollPage: PropTypes.func.isRequired,
+  isCurrentPage: PropTypes.bool.isRequired
 };
 
 class LibContentContainer extends React.Component {
@@ -204,6 +206,8 @@ class LibContentContainer extends React.Component {
                     onItemsCopy={this.props.onItemsCopy}
                     onItemsDelete={this.props.onItemsDelete}
                     onFileTagChanged={this.props.onFileTagChanged}
+                    isCurrentPage={this.props.isCurrentPage}
+                    scrollPage={this.props.scrollPage}
                   />
                 )}
                 {this.props.currentMode === 'grid' && (
@@ -235,6 +239,8 @@ class LibContentContainer extends React.Component {
                     isDirentDetailShow={this.props.isDirentDetailShow}
                     onItemRename={this.props.onItemRename}
                     onFileTagChanged={this.props.onFileTagChanged}
+                    isCurrentPage={this.props.isCurrentPage}
+                    scrollPage={this.props.scrollPage}
                   />
                 )}
                 {this.props.currentMode === 'column' && (
@@ -295,6 +301,8 @@ class LibContentContainer extends React.Component {
                     onItemsCopy={this.props.onItemsCopy}
                     onItemsDelete={this.props.onItemsDelete}
                     onFileTagChanged={this.props.onFileTagChanged}
+                    isCurrentPage={this.props.isCurrentPage}
+                    scrollPage={this.props.scrollPage}
                   />
                 )}
               </Fragment>

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -71,6 +71,7 @@ class LibContentView extends React.Component {
       errorMsg: '',
       isDirentDetailShow: false,
       updateDetail: false,
+      isCurrentPage: false,
     };
 
     window.onpopstate = this.onpopstate;
@@ -402,6 +403,7 @@ class LibContentView extends React.Component {
       if (!this.state.repoEncrypted && direntList.length) {
         this.getThumbnails(repoID, path, this.state.direntList);
       }
+      this.switchPage();
     }).catch(() => {
       this.setState({
         isDirentListLoading: false,
@@ -410,6 +412,14 @@ class LibContentView extends React.Component {
     });
   }
 
+  scrollPage = () => {
+    this.setState({isCurrentPage: false})
+  }
+
+  switchPage = () => {
+    this.setState({isCurrentPage: true})
+  }
+
   getThumbnails = (repoID, path, direntList) => {
     let items = direntList.filter((item) => {
       return Utils.imageCheck(item.name) && !item.encoded_thumbnail_src;
@@ -1451,6 +1461,8 @@ class LibContentView extends React.Component {
             onDeleteRepoTag={this.onDeleteRepoTag}
             onToolbarFileTagChanged={this.onToolbarFileTagChanged}
             updateDetail={this.state.updateDetail}
+            isCurrentPage={this.state.isCurrentPage}
+            scrollPage={this.scrollPage}
           />
           {this.state.pathExist && !this.state.isViewFile && (
             <FileUploader