diff --git a/browser/app/js/buckets/BucketList.js b/browser/app/js/buckets/BucketList.js
index fbd1afd20..e11547236 100644
--- a/browser/app/js/buckets/BucketList.js
+++ b/browser/app/js/buckets/BucketList.js
@@ -17,14 +17,29 @@
import React from "react"
import { connect } from "react-redux"
import { Scrollbars } from "react-custom-scrollbars"
+import InfiniteScroll from "react-infinite-scroller"
import * as actionsBuckets from "./actions"
-import { getVisibleBuckets } from "./selectors"
+import { getFilteredBuckets } from "./selectors"
import BucketContainer from "./BucketContainer"
import web from "../web"
import history from "../history"
import { pathSlice } from "../utils"
export class BucketList extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ page: 1
+ }
+ this.loadNextPage = this.loadNextPage.bind(this)
+ }
+ componentDidUpdate(prevProps) {
+ if (this.props.filter !== prevProps.filter) {
+ this.setState({
+ page: 1
+ })
+ }
+ }
componentWillMount() {
const { fetchBuckets, setBucketList, selectBucket } = this.props
if (web.LoggedIn()) {
@@ -39,18 +54,33 @@ export class BucketList extends React.Component {
}
}
}
+ loadNextPage() {
+ this.setState({
+ page: this.state.page + 1
+ })
+ }
render() {
- const { visibleBuckets } = this.props
+ const { filteredBuckets } = this.props
+ const visibleBuckets = filteredBuckets.slice(0, this.state.page * 100)
return (
}
>
-
- {visibleBuckets.map(bucket => (
-
- ))}
-
+ visibleBuckets.length}
+ useWindow={false}
+ element="div"
+ initialLoad={false}
+ >
+
+ {visibleBuckets.map(bucket => (
+
+ ))}
+
+
)
@@ -59,7 +89,8 @@ export class BucketList extends React.Component {
const mapStateToProps = state => {
return {
- visibleBuckets: getVisibleBuckets(state)
+ filteredBuckets: getFilteredBuckets(state),
+ filter: state.buckets.filter
}
}
diff --git a/browser/app/js/buckets/__tests__/BucketList.test.js b/browser/app/js/buckets/__tests__/BucketList.test.js
index 9239b2f39..d8ead35a4 100644
--- a/browser/app/js/buckets/__tests__/BucketList.test.js
+++ b/browser/app/js/buckets/__tests__/BucketList.test.js
@@ -29,13 +29,13 @@ jest.mock("../../web", () => ({
describe("BucketList", () => {
it("should render without crashing", () => {
const fetchBuckets = jest.fn()
- shallow()
+ shallow()
})
it("should call fetchBuckets before component is mounted", () => {
const fetchBuckets = jest.fn()
const wrapper = shallow(
-
+
)
expect(fetchBuckets).toHaveBeenCalled()
})
@@ -46,7 +46,7 @@ describe("BucketList", () => {
history.push("/bk1/pre1")
const wrapper = shallow(
diff --git a/browser/app/js/buckets/__tests__/selectors.test.js b/browser/app/js/buckets/__tests__/selectors.test.js
index 36d0b3eeb..e43ecf557 100644
--- a/browser/app/js/buckets/__tests__/selectors.test.js
+++ b/browser/app/js/buckets/__tests__/selectors.test.js
@@ -14,9 +14,9 @@
* limitations under the License.
*/
-import { getVisibleBuckets, getCurrentBucket } from "../selectors"
+import { getFilteredBuckets, getCurrentBucket } from "../selectors"
-describe("getVisibleBuckets", () => {
+describe("getFilteredBuckets", () => {
let state
beforeEach(() => {
state = {
@@ -28,11 +28,11 @@ describe("getVisibleBuckets", () => {
it("should return all buckets if no filter specified", () => {
state.buckets.filter = ""
- expect(getVisibleBuckets(state)).toEqual(["test1", "test11", "test2"])
+ expect(getFilteredBuckets(state)).toEqual(["test1", "test11", "test2"])
})
it("should return all matching buckets if filter is specified", () => {
state.buckets.filter = "test1"
- expect(getVisibleBuckets(state)).toEqual(["test1", "test11"])
+ expect(getFilteredBuckets(state)).toEqual(["test1", "test11"])
})
})
diff --git a/browser/app/js/buckets/selectors.js b/browser/app/js/buckets/selectors.js
index a4fa4a731..adce7772d 100644
--- a/browser/app/js/buckets/selectors.js
+++ b/browser/app/js/buckets/selectors.js
@@ -19,7 +19,7 @@ import { createSelector } from "reselect"
const bucketsSelector = state => state.buckets.list
const bucketsFilterSelector = state => state.buckets.filter
-export const getVisibleBuckets = createSelector(
+export const getFilteredBuckets = createSelector(
bucketsSelector,
bucketsFilterSelector,
(buckets, filter) => buckets.filter(bucket => bucket.indexOf(filter) > -1)
diff --git a/browser/ui-assets.go b/browser/ui-assets.go
index 2c7964004..9af1de74e 100644
--- a/browser/ui-assets.go
+++ b/browser/ui-assets.go
@@ -6,7 +6,7 @@
// production/favicon-96x96.png
// production/firefox.png
// production/index.html
-// production/index_bundle-2019-08-02T05-11-29Z.js
+// production/index_bundle-2019-09-30T18-02-34Z.js
// production/loader.css
// production/logo.svg
// production/safari.png
@@ -16,6 +16,7 @@ package browser
import (
"fmt"
+ "github.com/elazarl/go-bindata-assetfs"
"io/ioutil"
"os"
"path/filepath"
@@ -66,7 +67,7 @@ func productionChromePng() (*asset, error) {
return nil, err
}
- info := bindataFileInfo{name: "production/chrome.png", size: 3726, mode: os.FileMode(420), modTime: time.Unix(1564722701, 0)}
+ info := bindataFileInfo{name: "production/chrome.png", size: 3726, mode: os.FileMode(420), modTime: time.Unix(1569866578, 0)}
a := &asset{bytes: bytes, info: info}
return a, nil
}
@@ -83,7 +84,7 @@ func productionFavicon16x16Png() (*asset, error) {
return nil, err
}
- info := bindataFileInfo{name: "production/favicon-16x16.png", size: 14906, mode: os.FileMode(420), modTime: time.Unix(1564722701, 0)}
+ info := bindataFileInfo{name: "production/favicon-16x16.png", size: 14906, mode: os.FileMode(420), modTime: time.Unix(1569866578, 0)}
a := &asset{bytes: bytes, info: info}
return a, nil
}
@@ -100,7 +101,7 @@ func productionFavicon32x32Png() (*asset, error) {
return nil, err
}
- info := bindataFileInfo{name: "production/favicon-32x32.png", size: 16066, mode: os.FileMode(420), modTime: time.Unix(1564722701, 0)}
+ info := bindataFileInfo{name: "production/favicon-32x32.png", size: 16066, mode: os.FileMode(420), modTime: time.Unix(1569866578, 0)}
a := &asset{bytes: bytes, info: info}
return a, nil
}
@@ -117,7 +118,7 @@ func productionFavicon96x96Png() (*asset, error) {
return nil, err
}
- info := bindataFileInfo{name: "production/favicon-96x96.png", size: 17029, mode: os.FileMode(420), modTime: time.Unix(1564722701, 0)}
+ info := bindataFileInfo{name: "production/favicon-96x96.png", size: 17029, mode: os.FileMode(420), modTime: time.Unix(1569866578, 0)}
a := &asset{bytes: bytes, info: info}
return a, nil
}
@@ -134,7 +135,7 @@ func productionFirefoxPng() (*asset, error) {
return nil, err
}
- info := bindataFileInfo{name: "production/firefox.png", size: 4795, mode: os.FileMode(420), modTime: time.Unix(1564722701, 0)}
+ info := bindataFileInfo{name: "production/firefox.png", size: 4795, mode: os.FileMode(420), modTime: time.Unix(1569866578, 0)}
a := &asset{bytes: bytes, info: info}
return a, nil
}
@@ -194,8 +195,8 @@ var _productionIndexHTML = []byte(`
-
-
+
+