Fix default filter on piece list

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -28,7 +28,7 @@ let PieceListToolbarFilterWidget = React.createClass({
     },
 
     generateFilterByStatement(param) {
-        const { filterBy } = this.props;
+        const filterBy = Object.assign({}, this.props.filterBy);
 
         if(filterBy) {
             // we need hasOwnProperty since the values are all booleans

js/components/piece_list.js

@@ -26,7 +26,7 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 import AscribeSpinner from './ascribe_spinner';
 
 import { getAvailableAcls } from '../utils/acl_utils';
-import { mergeOptions } from '../utils/general_utils';
+import { mergeOptions, isShallowEqual } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
@@ -35,6 +35,7 @@ let PieceList = React.createClass({
     propTypes: {
         accordionListItemType: React.PropTypes.func,
         bulkModalButtonListType: React.PropTypes.func,
+        canLoadPieceList: React.PropTypes.bool,
         redirectTo: React.PropTypes.string,
         customSubmitButton: React.PropTypes.element,
         filterParams: React.PropTypes.array,
@@ -49,6 +50,7 @@ let PieceList = React.createClass({
         return {
             accordionListItemType: AccordionListItemWallet,
             bulkModalButtonListType: AclButtonList,
+            canLoadPieceList: true,
             orderParams: ['artist_name', 'title'],
             filterParams: [{
                 label: getLangText('Show works I can'),
@@ -62,27 +64,51 @@ let PieceList = React.createClass({
     },
 
     getInitialState() {
+        const pieceListStore = PieceListStore.getState();
         const stores = mergeOptions(
-            PieceListStore.getState(),
-            EditionListStore.getState()
+            pieceListStore,
+            EditionListStore.getState(),
+            {
+                isFilterDirty: false
+            }
         );
 
-        // Use the default filters but use the stores' settings if they're available
-        stores.filterBy = Object.assign(this.getDefaultFilterBy(), stores.filterBy);
+        // Use the default filters but use the pieceListStore's settings if they're available
+        stores.filterBy = Object.assign(this.getDefaultFilterBy(), pieceListStore.filterBy);
 
         return stores;
     },
 
     componentDidMount() {
-        let page = this.props.location.query.page || 1;
-
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
 
-        let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
-        if (this.state.pieceList.length === 0 || this.state.page !== page){
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                            orderBy, this.state.orderAsc, this.state.filterBy);
+        let page = this.props.location.query.page || 1;
+        if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
+            this.loadPieceList({ page });
+        }
+    },
+
+    componentWillReceiveProps(nextProps) {
+        let filterBy;
+        let page = this.props.location.query.page || 1;
+
+        // If the user hasn't changed the filter and the new default filter is different
+        // than the current filter, apply the new default filter
+        if (!this.state.isFilterDirty) {
+            const newDefaultFilterBy = this.getDefaultFilterBy(nextProps);
+
+            // Only need to check shallowly since the filterBy shouldn't be nested
+            if (!isShallowEqual(this.state.filterBy, newDefaultFilterBy)) {
+                filterBy = newDefaultFilterBy;
+                page = 1;
+            }
+        }
+
+        // Only load if we are applying a new filter or if it's the first time we can
+        // load the piece list
+        if (nextProps.canLoadPieceList && (filterBy || !this.props.canLoadPieceList)) {
+            this.loadPieceList({ page, filterBy });
         }
     },
 
@@ -102,10 +128,11 @@ let PieceList = React.createClass({
         this.setState(state);
     },
 
-    getDefaultFilterBy() {
-        const { filterParams } = this.props;
+    getDefaultFilterBy(props = this.props) {
+        const { filterParams } = props;
         const defaultFilterBy = {};
 
+        if (filterParams && typeof filterParams.forEach === 'function') {
             filterParams.forEach(({ label, items }) => {
                 items.forEach((item) => {
                     if (typeof item === 'object' && item.defaultValue) {
@@ -113,6 +140,7 @@ let PieceList = React.createClass({
                     }
                 });
             });
+        }
 
         return defaultFilterBy;
     },
@@ -122,9 +150,7 @@ let PieceList = React.createClass({
             // if the users clicks a pager of the pagination,
             // the site should go to the top
             document.body.scrollTop = document.documentElement.scrollTop = 0;
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                            this.state.orderBy, this.state.orderAsc,
-                                            this.state.filterBy);
+            this.loadPieceList({ page });
         };
     },
 
@@ -143,15 +169,21 @@ let PieceList = React.createClass({
     },
 
     searchFor(searchTerm) {
-         PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
-                                        this.state.orderAsc, this.state.filterBy);
+        this.loadPieceList({
+            page: 1,
+            search: searchTerm
+        });
         this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
     applyFilterBy(filterBy){
+        this.setState({
+            isFilterDirty: true
+        });
+
         // first we need to apply the filter on the piece list
-        PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, filterBy)
+        this
+            .loadPieceList({ page: 1, filterBy })
             .then(() => {
                 // but also, we need to filter all the open edition lists
                 this.state.pieceList
@@ -177,6 +209,13 @@ let PieceList = React.createClass({
                                         orderBy, this.state.orderAsc, this.state.filterBy);
     },
 
+    loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
+        let orderBy = this.state.orderBy ? this.state.orderBy : this.props.orderBy;
+
+        return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
+                                               orderBy, this.state.orderAsc, filterBy);
+    },
+
     fetchSelectedPieceEditionList() {
         let filteredPieceIdList = Object.keys(this.state.editionList)
                                         .filter((pieceId) => {

js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js

@@ -21,6 +21,10 @@ let LumenusLanding = React.createClass({
         );
     },
 
+    componentWillMount() {
+        setDocumentTitle('Lumenus Marketplace');
+    },
+
     componentDidMount() {
         WhitelabelStore.listen(this.onChange);
         WhitelabelActions.fetchWhitelabel();
@@ -35,8 +39,6 @@ let LumenusLanding = React.createClass({
     },
 
     render() {
-        setDocumentTitle('Lumenus Marketplace');
-
         return (
             <div className="container ascribe-form-wrapper">
                 <div className="row">

js/components/whitelabel/wallet/components/market/market_piece_list.js

@@ -27,6 +27,10 @@ let MarketPieceList = React.createClass({
         );
     },
 
+    componentWillMount() {
+        setDocumentTitle(getLangText('Collection'));
+    },
+
     componentDidMount() {
         UserStore.listen(this.onChange);
         WhitelabelStore.listen(this.onChange);
@@ -46,23 +50,30 @@ let MarketPieceList = React.createClass({
 
     render() {
         const { currentUser, whitelabel } = this.state;
+        let filterParams = undefined;
+        let canLoadPieceList = false;
+
+        if (currentUser.email && whitelabel.user) {
+            canLoadPieceList = true;
             const isUserAdmin = currentUser.email === whitelabel.user;
 
-        setDocumentTitle(getLangText('Collection'));
-
-        return (
-            <PieceList
-                redirectTo="/register_piece?slide_num=0"
-                bulkModalButtonListType={MarketAclButtonList}
-                filterParams={[{
+            filterParams = [{
                 label: getLangText('Show works I can'),
                 items: [{
                     key: isUserAdmin ? 'acl_transfer' : 'acl_consign',
-                        label: getLangText(isUserAdmin ? 'transfer' : 'consign to Market'),
+                    label: getLangText(isUserAdmin ? 'transfer' : 'consign to %s', whitelabel.name),
                     defaultValue: true
                 }]
-                }]}
-                location={this.props.location}/>
+            }];
+        }
+
+        return (
+            <PieceList
+                canLoadPieceList={canLoadPieceList}
+                redirectTo="/register_piece?slide_num=0"
+                bulkModalButtonListType={MarketAclButtonList}
+                filterParams={filterParams}
+                location={this.props.location} />
         );
     }
 });

js/utils/general_utils.js

@@ -1,5 +1,11 @@
 'use strict';
 
+/**
+ * Checks shallow equality
+ * Re-export of shallow from shallow-equals
+ */
+export { default as isShallowEqual } from 'shallow-equals';
+
 /**
  * Takes an object and returns a shallow copy without any keys
  * that fail the passed in filter function.

package.json

@@ -85,6 +85,7 @@
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",
     "reactify": "^1.1.0",
+    "shallow-equals": "0.0.0",
     "shmui": "^0.1.0",
     "spark-md5": "~1.0.0",
     "uglifyjs": "^2.4.10",