list objects in browser ordered by last modified (#7805)

- return all objects in web-handlers listObjects response
- added local pagination to object list ui
- also fixed infinite loader and removed unused fields

browser/app/js/objects/ObjectsListContainer.js

@@ -15,32 +15,52 @@
  */
 
 import React from "react"
-import classNames from "classnames"
 import { connect } from "react-redux"
 import InfiniteScroll from "react-infinite-scroller"
-import * as actionsObjects from "./actions"
 import ObjectsList from "./ObjectsList"
 
 export class ObjectsListContainer extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1
+    }
+    this.loadNextPage = this.loadNextPage.bind(this)
+  }
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.currentBucket !== this.props.currentBucket ||
+      nextProps.currentPrefix !== this.props.currentPrefix ||
+      nextProps.sortBy !== this.props.sortBy ||
+      nextProps.sortOrder !== this.props.sortOrder
+    ) {
+      this.setState({
+        page: 1
+      })
+    }
+  }
+  loadNextPage() {
+    this.setState(state => {
+      return { page: state.page + 1 }
+    })
+  }
   render() {
-    const { objects, isTruncated, currentBucket, loadObjects } = this.props
+    const { objects, listLoading } = this.props
+
+    const visibleObjects = objects.slice(0, this.state.page * 100)
+
     return (
-      <div className="feb-container">
+      <div style={{ position: "relative" }}>
         <InfiniteScroll
           pageStart={0}
-          loadMore={() => loadObjects(true)}
-          hasMore={isTruncated}
+          loadMore={this.loadNextPage}
+          hasMore={objects.length > visibleObjects.length}
           useWindow={true}
           initialLoad={false}
         >
-          <ObjectsList objects={objects} />
+          <ObjectsList objects={visibleObjects} />
         </InfiniteScroll>
-        <div
-          className="text-center"
-          style={{ display: isTruncated && currentBucket ? "block" : "none" }}
-        >
-          <span>Loading...</span>
-        </div>
+        {listLoading && <div className="loading" />}
       </div>
     )
   }
@@ -51,16 +71,10 @@ const mapStateToProps = state => {
     currentBucket: state.buckets.currentBucket,
     currentPrefix: state.objects.currentPrefix,
     objects: state.objects.list,
-    isTruncated: state.objects.isTruncated
+    sortBy: state.objects.sortBy,
+    sortOrder: state.objects.sortOrder,
+    listLoading: state.objects.listLoading
   }
 }
 
-const mapDispatchToProps = dispatch => {
-  return {
-    loadObjects: append => dispatch(actionsObjects.fetchObjects(append))
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ObjectsListContainer
-)
+export default connect(mapStateToProps)(ObjectsListContainer)