Merge branch '236-improve-updating-the-url-with-filtercode' into 'master'

Improve updating the URL with filterCode

Closes #236

See merge request genesys-pgr/genesys-ui!243

src/accessions/actions/public.ts

@@ -3,6 +3,7 @@
  */
 import * as _ from 'lodash';
 import navigateTo from 'actions/navigation';
+import {filterCodeToUrl} from 'actions/filterCode';
 import FilteredPage, { IPageRequest } from 'model/FilteredPage';
 import Accession from 'model/accession/Accession';
 import AccessionFilter from 'model/accession/AccessionFilter';
@@ -58,12 +59,13 @@ export const updateRoute = (paged: FilteredPage<Accession>, path: string = '/a')
 
 export const updateRouteWithFilterCode = (filterCode: string, path: string = '/a', qs?: any, postfix: string = '') => (dispatch) => {
   console.log(`Update route2 ${filterCode} ${path}`, qs);
-  dispatch(navigateTo(filterCode ? `${path}/${filterCode}${postfix}` : path, qs));
+  dispatch(filterCodeToUrl(path, filterCode, qs, postfix));
 };
 
 export const applyFilters = (filters: string | AccessionFilter, page: IPageRequest = { page: 0 }) => (dispatch, getState) => {
   console.log('Applying new filter', filters);
   dispatch(showSnackbar('Applying filters...'));
+  dispatch(navigateTo('/a'));
 
   return dispatch(apiListAccessionSugestions(filters, page))
     .then((paged) => {
@@ -82,8 +84,9 @@ export const loadMoreAccessions = (paged?: FilteredPage<Accession>) => (dispatch
     .then((paged) => dispatch(updateRoute(paged)));
 };
 
-export const applyOverviewFilters = (filters: string | AccessionFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
+export const applyOverviewFilters = (filters: string | AccessionFilter) => (dispatch) => {
   console.log('Applying new filter', filters);
+  dispatch(navigateTo('/a/overview'));
   return dispatch(apiAccessionsOverview(filters))
     .then((overview) => {
       dispatch(updateRouteWithFilterCode(overview.filterCode, '/a/overview'));
@@ -103,6 +106,7 @@ export const currentClimateRequest = (lat, lng) => (dispatch) => {
 };
 
 export const loadAccessionsMapInfo = (filters: string | AccessionFilter, viewPort?: {center: number[], zoom: number}) => (dispatch) => {
+  dispatch(navigateTo('/a/map'));
   return dispatch(apiAccessionsMapInfo(filters))
     .then((mapInfo: AccessionMapInfo) => {
       if (!(mapInfo.bounds[0][0] && mapInfo.bounds[0][1] && mapInfo.bounds[1][0] && mapInfo.bounds[1][1])) {

src/accessions/ui/BrowsePage.tsx

@@ -42,8 +42,8 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
   }
 
   public render() {
-    const { paged, loadMoreData, filterCode, currentTab, loading, suggestions, crops, t} = this.props;
-
+    const { apiCall, loadMoreData, filterCode, currentTab, suggestions, crops, t} = this.props;
+    const {data: paged, loading, error} = apiCall || {data: undefined, loading: true, error: undefined};
     const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
     const renderAccession = (s: Accession, index: number) => {
       return <AccessionCard key={ s.uuid } index={ index } accession={ s } />;
@@ -99,6 +99,7 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
         />
         <PageContents className="pt-1rem container-spacing-horizontal">
           { loading && <Loading /> }
+          { error && <div>{ JSON.stringify(error) }</div> }
           <PagedLoader
             paged={ paged }
             loadMore={ loadMoreData }
@@ -112,10 +113,9 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
+  apiCall: state.accessions.public.paged,
   suggestions: state.accessions.public.suggestions,
   crops: state.crop.public.list ? state.crop.public.list.data : undefined,
-  paged: state.accessions.public.paged ? state.accessions.public.paged.data : undefined,
-  loading: state.accessions.public.paged ? state.accessions.public.paged.loading : false,
   filterCode: ownProps.match.params.filterCode,
   currentTab: ownProps.match.params.tab || 'data', // current tab, or ownProps.location.pathname
   userRoles: state.login.authorities,

src/accessions/ui/DisplayPage.tsx

@@ -42,6 +42,8 @@ import AuditedInfo from 'ui/common/AuditedInfo';
 import Authorize from 'ui/common/authorized/Authorize';
 import BioClimateDisplay from 'accessions/ui/c/BioClimateDisplay';
 import PageTitle from 'ui/common/PageTitle';
+import AccessionFilter from 'model/accession/AccessionFilter';
+import { IPageRequest } from 'model/Page';
 
 const styles = (theme) => ({
   pageSection: {
@@ -71,7 +73,7 @@ interface IBrowsePageProps {
   accessions: any;
   addAccessionToMyList: any;
   removeAccessionFromMyList: any;
-  applyFilters: any;
+  applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
   navigateTo: (location: string) => void;
   mapLayers: MapLayer[];
 }

src/accessions/ui/MapPage.tsx

@@ -481,7 +481,7 @@ const mapStateToProps = (state, ownProps) => ({
     mapInfo: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data : undefined,
     loading: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.loading : false,
     mapLayers: state.accessions.public.mapLayers,
-    filterCode: ownProps.match.params.filterCode || '',
+    filterCode: ownProps.match.params.filterCode || (state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data && state.accessions.public.mapInfo.data.filterCode : ''),
     currentTab: ownProps.match.params.tab || 'map', // current tab, or ownProps.location.pathname
     initialPosition: isNaN(Number(ownProps.match.params.lat)) || isNaN(Number(ownProps.match.params.lng)) ? [] : [Number(ownProps.match.params.lat), Number(ownProps.match.params.lng)],
     initialZoom: isNaN(Number(ownProps.match.params.zoom)) ? null : Number(ownProps.match.params.zoom),

src/accessions/ui/OverviewPage.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { parse } from 'query-string';
 import { translate } from 'react-i18next';
 import * as _ from 'lodash';
 
 // Actions
-import { applyFilters, applyOverviewFilters, loadAccessionsOverviewPage } from 'accessions/actions/public';
+import {applyFilters, applyOverviewFilters, loadAccessionsOverviewPage, updateRouteWithFilterCode} from 'accessions/actions/public';
 import { showSnackbar } from 'actions/snackbar';
 
 // Models
-import FilteredPage, { IPageRequest } from 'model/FilteredPage';
+import { IPageRequest } from 'model/FilteredPage';
 import AccessionFilter from 'model/accession/AccessionFilter';
 import AccessionOverview from 'model/accession/AccessionOverview';
+import ApiCall from 'model/ApiCall';
 
 // UI
 import PageLayout, { PageContents } from 'ui/layout/PageLayout';
@@ -31,12 +31,12 @@ import AccessionFilters from './c/Filters';
 import Button from '@material-ui/core/Button';
 
 interface IOverviewPageProps extends React.ClassAttributes<any> {
-  overview: AccessionOverview;
+  apiCall: ApiCall<AccessionOverview>;
   suggestions: any;
-  loading: boolean;
   filterCode: string;
   showSnackbar: (snack: string) => void;
   applyOverviewFilters: (filters: string | AccessionFilter, page?: IPageRequest) => void;
+  updateRouteWithFilterCode: (filterCode: string, path: string) => void;
   currentTab: string;
   t: any;
 }
@@ -44,9 +44,8 @@ interface IOverviewPageProps extends React.ClassAttributes<any> {
 class BrowsePage extends React.Component<IOverviewPageProps, any> {
 
   protected static needs = [
-    ({ search, params: { filterCode } }) => {
-      const qs = parse(search || '');
-      return applyOverviewFilters(filterCode || '', FilteredPage.fromQueryString(qs));
+    ({ params: { filterCode } }) => {
+      return applyOverviewFilters(filterCode || '');
     },
   ];
 
@@ -55,36 +54,39 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
   }
 
   public componentWillMount() {
-    const { overview, filterCode, applyOverviewFilters } = this.props;
-    if (! overview || filterCode !== overview.filterCode) {
-      console.log('Applying filters', filterCode);
-      applyOverviewFilters(filterCode || '');
+    const {apiCall, filterCode, applyOverviewFilters, updateRouteWithFilterCode} = this.props;
+    if (!apiCall) {
+      return applyOverviewFilters(filterCode || '');
     }
+    const {loading, data: overview} = apiCall;
+
+    if (!loading && !overview) {
+      return applyOverviewFilters(filterCode || '');
+    }
+
+    if (overview && filterCode && overview.filterCode !== filterCode) {
+      return applyOverviewFilters(filterCode || '');
+    }
+
+    return updateRouteWithFilterCode(overview.filterCode, '/a/overview/');
   }
+
   public componentWillReceiveProps(nextProps) {
     const { filterCode: prevFilterCode } = this.props;
-    const { filterCode, applyOverviewFilters, overview } = nextProps;
+    const { filterCode, applyOverviewFilters, apiCall } = nextProps;
 
     if (filterCode !== prevFilterCode) {
-      if (overview.filterCode !== filterCode) {
+      if (apiCall && apiCall.data && !apiCall.loading && apiCall.data.filterCode !== filterCode) {
         applyOverviewFilters(filterCode || '');
       }
     }
-
-    // if (! overview || filterCode !== overview.filterCode) {
-    //   console.log('Applying filters', filterCode);
-    //   applyOverviewFilters(filterCode || '');
-    // }
-    // if (prevOverview && overview && _.isEqual(overview.filter, prevOverview.filter)) {
-    //   if (prevOverview.filterCode !== filterCode) {
-    //     console.log('Applying filters', filterCode);
-    //     applyOverviewFilters(filterCode || '');
-    //   }
-    // }
   }
 
+
   private addTerm = (property, term) => {
-      const { overview, applyOverviewFilters, showSnackbar } = this.props;
+      const { apiCall, applyOverviewFilters, showSnackbar } = this.props;
+      const {data: overview} = apiCall || {data: undefined};
+
 
       const updatedFilter: AccessionFilter = { ...overview.filter };
       switch (property) {
@@ -116,7 +118,8 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
   };
 
   public render() {
-    const { filterCode, currentTab, applyOverviewFilters, overview: overviewWrapper, loading, suggestions, t } = this.props;
+    const { filterCode, apiCall, currentTab, applyOverviewFilters, suggestions, t } = this.props;
+    const {data: overviewWrapper, loading} = apiCall || {data: undefined, loading: true};
     const overview = overviewWrapper && overviewWrapper.overview || null;
 
     const overviewKeys = ['institute.code', 'institute.country.code3', 'cropName', 'crop.shortName', 'sampStat', 'taxonomy.genus', 'taxonomy.genusSpecies',
@@ -243,9 +246,8 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
+  apiCall: state.accessions.public.overview,
   suggestions: state.accessions.public.suggestions,
-  overview: state.accessions.public.overview ? state.accessions.public.overview.data : undefined,
-  loading: state.accessions.public.overview ? state.accessions.public.overview.loading : false,
   filterCode: ownProps.match.params.filterCode || '',
   currentTab: ownProps.match.params.tab || 'overview', // current tab, or ownProps.location.pathname
 });
@@ -255,6 +257,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   applyFilters,
   applyOverviewFilters,
   loadAccessionsOverviewPage,
+  updateRouteWithFilterCode,
 }, dispatch);
 
 

src/actions/filterCode.ts

-import { navigateTo } from 'actions/navigation';
-import * as QS from 'query-string';
+import { stringify } from 'query-string';
 import { ADD_FILTER_CODE } from 'constants/filterCode';
 import { cleanFilters } from 'utilities';
+import navigateTo from 'actions/navigation';
+
 
 const addFilter = (code: string, filterJson: string) => ({
     type: ADD_FILTER_CODE,
@@ -19,20 +20,20 @@ export const addFilterCode = (code: string, receivedFilter: object) => (dispatch
     dispatch(addFilter(code, receivedFilterJson));
 };
 
-export const filterCodeToUrl = (code: string) => (dispatch) => {
-    const qs = window && QS.parse(window.location.search) || {};
-    // console.log(`Should we update filter code ${code}`, qs);
-    code = !code ? '' : code;
-    if ((! qs.filter && ! code) || qs.filter === code) {
-        // noop
-        // console.log(`Not updating URL code`, qs);
-    } else {
-        if (! code) {
-            delete qs.filter;
-        } else {
-            qs.filter = code;
-        }
-        // console.log(`Updating URL code ${code}`, qs);
-        dispatch(navigateTo('', qs));
-    }
+export const filterCodeToUrl = (url: string, code: string, qs?, postfix?) => (dispatch, getState) => {
+
+  const location = getState().routing.location && getState().routing.location.pathname;
+
+  // console.log(`filterCodeToUrl: {
+  //   Location: ${location},
+  //   code: ${code},
+  //   Url: ${url},
+  //   qs: ${qs},
+  //   postfix: ${postfix},
+  // }`);
+
+  if (location === url || location === `${url}/${code}`) {
+    return dispatch(navigateTo(`${url}${code ? `/${code}` : ''}${stringify(qs) ? `?${stringify(qs)}` : ''}${postfix || ''}`));
+  }
+
 };

src/cms/actions/admin.ts

@@ -2,6 +2,7 @@
 import { showSnackbar } from 'actions/snackbar';
 import navigateTo from 'actions/navigation';
 import {createApiCaller, createPureApiCaller} from 'actions/ApiCall';
+import {filterCodeToUrl} from 'actions/filterCode';
 // constants
 import {
   ADMIN_APPEND_ARTICLES,
@@ -52,15 +53,16 @@ export const updateArticle = (article: Article) => (dispatch) => {
 };
 
 export const updateRoute = (paged: FilteredPage<Article>) => (dispatch) => {
-  dispatch(navigateTo(paged.filterCode ? `/admin/content/${paged.filterCode}` : '/admin/content'));
+  return dispatch(filterCodeToUrl('/admin/content', paged.filterCode));
 };
 
 export const activityPostUpdateRoute = (paged: FilteredPage<ActivityPost>) => (dispatch) => {
-  dispatch(navigateTo(paged.filterCode ? `/admin/content/activity-post/${paged.filterCode}` : '/admin/content/activity-post'));
+  return dispatch(filterCodeToUrl('/admin/content/activity-post', paged.filterCode));
 };
 
 export const applyFilters = (filters: ArticleFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
   console.log('Applying new filter', filters);
+  dispatch(navigateTo('/admin/content'));
   dispatch(showSnackbar('Applying filters...'));
   return dispatch(apiListArticles(filters, page))
     .then((paged) => {
@@ -71,6 +73,7 @@ export const applyFilters = (filters: ArticleFilter, page: IPageRequest = { page
 
 export const activityPostApplyFilters = (filters: ActivityPostFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
   console.log('Applying new filter', filters);
+  dispatch(navigateTo('/admin/content/activity-post'));
   dispatch(showSnackbar('Applying filters...'));
   return dispatch(apiListActivityPosts(filters, {
     direction: ActivityPost.DEFAULT_SORT.direction,

src/cms/ui/admin/ActivityPostBrowsePage.tsx

@@ -28,7 +28,8 @@ class ActivityPostBrowsePage extends BrowsePageTemplate<ActivityPost> {
   }
 
   public render() {
-    const { paged, loadMoreData, error, loading, t } = this.props;
+    const { apiCall, loadMoreData, t } = this.props;
+    const {data: paged, loading, error} = apiCall || {data: undefined, loading: true, error: undefined};
 
     const renderActivityPost = (aP: ActivityPost, index: number) => {
       return <div key={ index }><ActivityPostCard key={ index } index={ index } post={ aP } edit compact/></div>;
@@ -67,9 +68,7 @@ class ActivityPostBrowsePage extends BrowsePageTemplate<ActivityPost> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  paged: state.cms.admin.activityPost.paged ? state.cms.admin.activityPost.paged.data : undefined,
-  loading: state.cms.admin.activityPost.paged ? state.cms.admin.activityPost.paged.loading : false,
-  error: state.cms.admin.activityPost.paged ? state.cms.admin.activityPost.paged.error : undefined,
+  apiCall: state.cms.admin.activityPost.paged,
   filterCode: ownProps.match.params.filterCode,
 });
 

src/cms/ui/admin/BrowsePage.tsx

@@ -28,7 +28,8 @@ class BrowsePage extends BrowsePageTemplate<Article> {
   }
 
   public render() {
-    const { paged, loadMoreData, loading, error, t } = this.props;
+    const { apiCall, loadMoreData, t } = this.props;
+    const {data: paged, loading, error} = apiCall || {data: undefined, loading: true, error: undefined};
 
     const renderArticle = (s: Article, index: number) => {
       return <ArticleCard key={ index } index={ index } article={ s }/>;
@@ -65,9 +66,7 @@ class BrowsePage extends BrowsePageTemplate<Article> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  paged: state.cms.admin.paged ? state.cms.admin.paged.data : undefined,
-  loading: state.cms.admin.paged ? state.cms.admin.paged.loading : false,
-  error: state.cms.admin.paged ? state.cms.admin.paged.error : undefined,
+  apiCall: state.cms.admin.paged,
   filterCode: ownProps.match.params.filterCode,
 });
 

src/crop/ui/DisplayPage.tsx

@@ -30,6 +30,8 @@ import Button from '@material-ui/core/Button';
 import BlurbText from 'cms/ui/c/BlurbText';
 import ContentHeader from 'ui/common/heading/ContentHeader';
 import Permissions from 'ui/common/permission/Permissions';
+import AccessionFilter from 'model/accession/AccessionFilter';
+import { IPageRequest } from 'model/Page';
 
 /*tslint:disable*/
 const styles = (theme) => ({
@@ -46,7 +48,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
   shortName: string;
   t: any;
   classes?: any;
-  applyFilters: any;
+  applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
   relinkAccessions: (shortName: string) => void;
 }
 

src/datasets/actions/dashboard.ts

 import { push } from 'react-router-redux';
 
 // Actions
-import { addFilterCode } from 'actions/filterCode';
+import {addFilterCode, filterCodeToUrl} from 'actions/filterCode';
 import navigateTo from 'actions/navigation';
 import {createApiCaller} from 'actions/ApiCall';
+import {showSnackbar} from 'actions/snackbar';
 // Constants
 import {
   DASHBOARD_REMOVE_DATASET,
@@ -15,9 +16,10 @@ import {
 // Models
 import Dataset from 'model/catalog/Dataset';
 import { PublishState } from 'model/common.model';
-import Page from 'model/Page';
+import Page, {IPageRequest} from 'model/Page';
 import FilteredPage from 'model/FilteredPage';
 import { AccessionRef } from 'model/accession/AccessionRef';
+import DatasetFilter from 'model/catalog/DatasetFilter';
 // Service
 import DatasetService from 'service/catalog/DatasetService';
 
@@ -48,6 +50,17 @@ const loadMoreDatasets = (paged?: FilteredPage<Dataset>) => (dispatch, getState)
     });
 };
 
+export const applyFilters = (filters: string | DatasetFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
+  dispatch(navigateTo('/dashboard/datasets'));
+  console.log('Applying new filter', filters, page);
+  dispatch(showSnackbar('Applying filters...'));
+  return dispatch(apiMyDatasets(filters, page))
+    .then((paged) => {
+      dispatch(updateRoute(paged));
+      dispatch(showSnackbar(`Filters applied.`));
+    });
+};
+
 function loadMoreAccessions(uuid: string, paged?: Page<AccessionRef>)  {
   return (dispatch, getState) => {
     return dispatch(apiListAccessions(uuid, Page.nextPage(paged)));
@@ -60,7 +73,7 @@ export const updateRoute = (paged: FilteredPage<Dataset>) => (dispatch) => {
     s: paged.sort[0].property === Dataset.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
     d: paged.sort[0].direction === Dataset.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
   };
-  dispatch(navigateTo(paged.filterCode ? `/dashboard/datasets/${paged.filterCode}` : '/dashboard/datasets', qs));
+  dispatch(filterCodeToUrl(`/dashboard/datasets`, paged.filterCode, qs));
 };
 export { loadMoreDatasets };
 

src/datasets/actions/public.ts

 // Actions
-import { addFilterCode } from 'actions/filterCode';
+import {addFilterCode, filterCodeToUrl} from 'actions/filterCode';
 import navigateTo from 'actions/navigation';
 import { showSnackbar } from 'actions/snackbar';
 import {createApiCaller, createPureApiCaller} from 'actions/ApiCall';
@@ -48,11 +48,12 @@ export const updateRoute = (paged: FilteredPage<Dataset>) => (dispatch) => {
     s: paged.sort[0].property === Dataset.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
     d: paged.sort[0].direction === Dataset.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
   };
-  dispatch(navigateTo(paged.filterCode ? `/datasets/${paged.filterCode}` : '/datasets', qs));
+  dispatch(filterCodeToUrl(`/datasets`, paged.filterCode, qs));
 };
 
 export const applyFilters = (filters: string | DatasetFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
   console.log('Applying new filter', filters, page);
+  dispatch(navigateTo('/datasets'));
   dispatch(showSnackbar('Applying filters...'));
   return dispatch(apiListDatasets(filters, page))
     .then((paged) => {

src/datasets/ui/BrowsePage.tsx

@@ -28,7 +28,8 @@ class BrowsePage extends BrowsePageTemplate<Dataset> {
   protected renderDataset = (d: Dataset) => <DatasetCard dataset={ d } key={ d.uuid }/>;
 
   public render() {
-    const { paged, t, loadMoreData, error, loading, currentTab, filterCode } = this.props;
+    const { apiCall, t, loadMoreData, currentTab, filterCode } = this.props;
+    const {data: paged, loading, error} = apiCall || {data: undefined, loading: true, error: undefined};
 
     return (
       <PageLayout sidebar={
@@ -69,9 +70,7 @@ class BrowsePage extends BrowsePageTemplate<Dataset> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  paged: state.datasets.public.paged ? state.datasets.public.paged.data : undefined,
-  loading: state.datasets.public.paged ? state.datasets.public.paged.loading : false,
-  error: state.datasets.public.paged ? state.datasets.public.paged.error : undefined,
+  apiCall: state.datasets.public.paged,
   filterCode: ownProps.match.params.filterCode,
   currentTab: ownProps.match.params.tab || 'data', // current tab, or ownProps.location.pathname
 });

src/datasets/ui/dashboard/DashboardPage.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import BaseMyDataPage from 'ui/catalog/dashboard/MyDataPage';
-import { approveDataset, deleteDataset, loadMoreDatasets, unpublishDataset, publishDataset, createNewVersion } from 'datasets/actions/dashboard';
+import { approveDataset, deleteDataset, loadMoreDatasets, applyFilters, unpublishDataset, publishDataset, createNewVersion } from 'datasets/actions/dashboard';
 import Dataset from 'model/catalog/Dataset';
 import { DatasetLink } from 'ui/genesys/Links';
 import { PublishState } from 'model/common.model';
@@ -39,7 +39,8 @@ const mapStateToProps = (state, ownProps) => ({
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
-  listMyData: loadMoreDatasets,
+  loadMoreData: loadMoreDatasets,
+  applyFilters,
   deleteOne: deleteDataset,
   publishOne: publishDataset,
   approveOne: approveDataset,

src/descriptorlists/actions/dashboard.ts

@@ -3,17 +3,19 @@ import { push } from 'react-router-redux';
 // Actions
 import {createApiCaller} from 'actions/ApiCall';
 import { loadDescriptorListTitles } from 'actions/uuidDecoder';
-import { addFilterCode } from 'actions/filterCode';
+import {addFilterCode, filterCodeToUrl} from 'actions/filterCode';
 import navigateTo from 'actions/navigation';
+import {showSnackbar} from 'actions/snackbar';
 
 // Constants
 import { CREATE_DESCRIPTORLIST, DASHBOARD_APPEND_DESCRIPTORLISTS, DASHBOARD_RECEIVE_DESCRIPTORLIST, DASHBOARD_REMOVE_DESCRIPTORLIST } from 'descriptors/constants';
 
 // Model
 import { PublishState } from 'model/common.model';
-import Page from 'model/Page';
+import Page, {IPageRequest} from 'model/Page';
 import DescriptorList from 'model/catalog/DescriptorList';
 import FilteredPage from 'model/FilteredPage';
+import DescriptorListFilter from 'model/catalog/DescriptorListFilter';
 
 // Service
 import DescriptorListService from 'service/catalog/DescriptorListService';
@@ -42,12 +44,23 @@ export const loadMoreDescriptorLists = (page?: FilteredPage<DescriptorList>) =>
     });
 };
 
+export const applyFilters = (filters: string | DescriptorListFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {
+  console.log('Applying new filter', filters, page);
+  dispatch(navigateTo('/dashboard/descriptorlists'));
+  dispatch(showSnackbar('Applying filters...'));
+  return dispatch(apiMyDescriptorLists(filters, page))
+    .then((paged) => {
+      dispatch(updateRoute(paged));
+      dispatch(showSnackbar(`Filters applied.`));
+    });
+};
+
 export const updateRoute = (paged: FilteredPage<DescriptorList>) => (dispatch) => {
   const qs = {
     s: paged.sort[0].property === DescriptorList.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
     d: paged.sort[0].direction === DescriptorList.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
   };
-  dispatch(navigateTo(paged.filterCode ? `/dashboard/descriptorlists/${paged.filterCode}` : '/dashboard/descriptorlists', qs));
+  dispatch(filterCodeToUrl(`/dashboard/descriptorlists`, paged.filterCode, qs));
 };
 
 

src/descriptorlists/actions/public.ts

 // Actions
-import { addFilterCode } from 'actions/filterCode';
+import {addFilterCode, filterCodeToUrl} from 'actions/filterCode';
 import { loadDescriptorListTitles } from 'actions/uuidDecoder';
 import navigateTo from 'actions/navigation';
 import { showSnackbar } from 'actions/snackbar';
@@ -70,7 +70,7 @@ export const autocomplete = (term: string = '') => (dispatch, getState) => {
 // List published descriptor lists
 export const loadMoreDescriptorLists = (page: FilteredPage<DescriptorList>) => (dispatch, getState) => {
   log('Loading published descriptor lists');
-
+  dispatch(navigateTo('/descriptorlists'));
   return dispatch(apiListDescriptorLists(page ? page.filterCode : '', Page.nextPage(page)))
   // receive the current descriptor list
     .then((paged) => {
@@ -85,7 +85,7 @@ export const updateRoute = (paged: FilteredPage<DescriptorList>) => (dispatch) =
     s: paged.sort[0].property === DescriptorList.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
     d: paged.sort[0].direction === DescriptorList.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
   };
-  dispatch(navigateTo(paged.filterCode ? `/descriptorlists/${paged.filterCode}` : '/descriptorlists', qs));
+  dispatch(filterCodeToUrl(`/descriptorlists`, paged.filterCode, qs));
 };
 
 export const applyFilters = (filters: string | DescriptorListFilter, page: IPageRequest = { page: 0 }) => (dispatch) => {

src/descriptorlists/ui/BrowsePage.tsx

@@ -31,7 +31,8 @@ class BrowsePage extends BrowsePageTemplate<DescriptorList> {
   )
 
   public render() {