Merge branch 'genesys-ui-113-updated-accessions' into 'master'

Subset and Dataset accession lists

See merge request !328

src/datasets/actions/dashboard.ts

@@ -4,7 +4,8 @@ import { push } from 'react-router-redux';
 import { addFilterCode } from 'actions/filterCode';
 
 // Constants
-import { DASHBOARD_REMOVE_DATASET, DASHBOARD_RECEIVE_DATASET_PAGE, CREATE_DATASET, DASHBOARD_APPEND_DATASET_PAGE, RECEIVE_DATASET } from 'datasets/constants';
+import { DASHBOARD_REMOVE_DATASET, DASHBOARD_RECEIVE_DATASET_PAGE, CREATE_DATASET, DASHBOARD_APPEND_DATASET_PAGE,
+    RECEIVE_DATASET, DASHBOARD_APPEND_ACCESSIONS_PAGE, DASHBOARD_RECEIVE_ACCESSIONS_PAGE } from 'datasets/constants';
 
 // Models
 import Dataset from 'model/catalog/Dataset';
@@ -17,6 +18,7 @@ import DatasetService from 'service/DatasetService';
 // Utility
 import { log } from 'utilities/debug';
 import { dereferenceReferences } from 'utilities';
+import AccessionRef from 'model/accession/AccessionRef';
 
 const removeDataset = (dataset: Dataset) => ({
     type: DASHBOARD_REMOVE_DATASET, payload: dataset,
@@ -35,6 +37,14 @@ const receiveDatasetPage = (paged: Page<Dataset>, page, results, sortBy, filter:
     payload: { paged, query: { page, results, sortBy, filter, order } },
 });
 
+const appendAccessions = (accessionRefs: Page<AccessionRef>) => ({
+    type: DASHBOARD_APPEND_ACCESSIONS_PAGE, payload: { accessionRefs },
+});
+
+const receiveAccessions = (accessionRefs: Page<AccessionRef>, currentUuid: string) => ({
+    type: DASHBOARD_RECEIVE_ACCESSIONS_PAGE,
+    payload: { accessionRefs, currentUuid },
+});
 
 const createDataset = () => (dispatch) => {
     dispatch({ type: CREATE_DATASET });
@@ -62,6 +72,23 @@ function listMyDatasets(page?, results?, sortBy?: string[], filter?: string | Da
     };
 }
 
+function loadAccessions(uuid: string, page: number = 0, results: number = 100) {
+    return (dispatch, getState) => {
+
+        return DatasetService.listAccessions(uuid, { page, size: results })
+            .then((paged) => {
+                if (paged.number === 0) {
+                    dispatch(receiveAccessions(paged, uuid));
+                } else {
+                    dispatch(appendAccessions(paged));
+                }
+            })
+            .catch((error) => {
+                log('Error', error);
+            });
+    };
+}
+
 export {listMyDatasets};
 
 const getOneFromStateByUUID = (uuid: string, state): Dataset => {
@@ -120,4 +147,4 @@ function deleteDataset(datasetUuid: string) {
 }
 
 // Dashboard action section exports
-export {publishDataset, approveDataset, unpublishDataset, deleteDataset};
+export {publishDataset, approveDataset, unpublishDataset, deleteDataset, loadAccessions};

src/datasets/actions/editor.ts

@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 
 // Actions
 import { navigateTo } from 'actions/navigation';
+import {loadAccessions} from 'datasets/actions/dashboard';
 
 // Constants
 import { ADD_CREATOR_TO_DATASET, ADD_LOCATION, RECEIVE_LOCATION, REMOVE_CREATOR_FROM_DATASET, REMOVE_LOCATION, UPDATE_DATASET_CREATOR, RECEIVE_DATASET, DASHBOARD_REMOVE_DATASET } from 'datasets/constants';
@@ -113,6 +114,7 @@ export const updateDatasetAccessionRefs = (dataset: Dataset, accessionRefs: Acce
     return DatasetService.upsertAccessions(dataset.uuid, dataset.version, accessionRefs)
         .then((saved) => {
             dispatch(receiveDataset(saved));
+            dispatch(loadAccessions(saved.uuid));
             return saved;
         }).catch((error) => {
             log('Publish error', error);

src/datasets/actions/public.ts

@@ -2,12 +2,13 @@
 import {addFilterCode} from 'actions/filterCode';
 
 // Constants
-import {RECEIVE_DATASET, RECEIVE_DATASET_PAGE, APPEND_DATASET_PAGE} from 'datasets/constants';
+import {RECEIVE_DATASET, RECEIVE_DATASET_PAGE, APPEND_DATASET_PAGE, APPEND_ACCESSIONS_PAGE, RECEIVE_ACCESSIONS_PAGE} from 'datasets/constants';
 
 // Model
 import Dataset from 'model/catalog/Dataset';
 import DatasetFilter from 'model/catalog/DatasetFilter';
 import {Page} from 'model/common.model';
+import AccessionRef from 'model/accession/AccessionRef';
 
 // Service
 import DatasetService from 'service/DatasetService';
@@ -16,7 +17,6 @@ import DatasetService from 'service/DatasetService';
 import {log} from 'utilities/debug';
 import { dereferenceReferences } from 'utilities';
 
-
 const appendDatasetPage = (paged: Page<Dataset>, page, results, sortBy, filter: DatasetFilter, order) => ({
     type: APPEND_DATASET_PAGE,
     payload: { paged, query: { page, results, sortBy, filter, order } },
@@ -32,6 +32,15 @@ const receiveDataset = (dataset: Dataset) => ({
     type: RECEIVE_DATASET, payload: dataset,
 });
 
+const appendAccessions = (accessionRefs: Page<AccessionRef>) => ({
+    type: APPEND_ACCESSIONS_PAGE, payload: { accessionRefs },
+});
+
+const receiveAccessions = (accessionRefs: Page<AccessionRef>, currentUuid: string) => ({
+    type: RECEIVE_ACCESSIONS_PAGE,
+    payload: { accessionRefs, currentUuid },
+});
+
 function loadDataset(uuid: string) {
     return (dispatch, getState) => {
 
@@ -45,6 +54,23 @@ function loadDataset(uuid: string) {
     };
 }
 
+function loadAccessions(uuid: string, page: number, results: number) {
+    return (dispatch, getState) => {
+
+        return DatasetService.listAccessions(uuid, { page, size: results })
+            .then((paged) => {
+                if (paged.number === 0) {
+                    dispatch(receiveAccessions(paged, uuid));
+                } else {
+                    dispatch(appendAccessions(paged));
+                }
+            })
+            .catch((error) => {
+                log('Error', error);
+            });
+    };
+}
+
 function listDatasetsRequest(page?, results?, sortBy?: string[], filter?, order?) {
     return (dispatch, getState) => {
 
@@ -77,4 +103,4 @@ const promiselistDatasets = (page?, results?, sortBy?: string[], filter?, order?
         });
 };
 
-export {listDatasetsRequest, promiselistDatasets, loadDataset};
+export {listDatasetsRequest, promiselistDatasets, loadDataset, loadAccessions};

src/datasets/constants.ts

@@ -7,6 +7,11 @@ export const REMOVE_DATASET = 'App/DELETE_DATASET';
 export const RECEIVE_DATASET_PAGE = 'App/RECEIVE_DATASET_PAGE';
 export const APPEND_DATASET_PAGE = 'App/APPEND_DATASET_PAGE';
 
+export const RECEIVE_ACCESSIONS_PAGE = 'App/RECEIVE_ACCESSIONS_PAGE';
+export const APPEND_ACCESSIONS_PAGE = 'App/APPEND_ACCESSIONS_PAGE';
+export const DASHBOARD_RECEIVE_ACCESSIONS_PAGE = 'App/DASHBOARD_RECEIVE_ACCESSIONS_PAGE';
+export const DASHBOARD_APPEND_ACCESSIONS_PAGE = 'App/DASHBOARD_APPEND_ACCESSIONS_PAGE';
+
 // dashboard
 export const DASHBOARD_REMOVE_DATASET = 'dataset/dashboard/REMOVE_DATASET';
 export const DASHBOARD_RECEIVE_DATASET_PAGE = 'dataset/dashboard/RECEIVE_DATASET_PAGE';

src/datasets/reducers/dashboard.ts

@@ -2,29 +2,23 @@ import update from 'immutability-helper';
 import { log } from 'utilities/debug';
 import * as _ from 'lodash';
 
-import {
-  CREATE_DATASET,
-  ADD_CREATOR_TO_DATASET,
-  REMOVE_CREATOR_FROM_DATASET,
-  UPDATE_DATASET_CREATOR,
-  ADD_LOCATION,
-  RECEIVE_LOCATION,
-  REMOVE_LOCATION,
-  DASHBOARD_REMOVE_DATASET,
-  DASHBOARD_RECEIVE_DATASET_PAGE,
-  RECEIVE_DATASET,
-  DASHBOARD_APPEND_DATASET_PAGE,
+import { CREATE_DATASET, ADD_CREATOR_TO_DATASET, REMOVE_CREATOR_FROM_DATASET, UPDATE_DATASET_CREATOR, ADD_LOCATION,
+    RECEIVE_LOCATION, REMOVE_LOCATION, DASHBOARD_REMOVE_DATASET, DASHBOARD_RECEIVE_DATASET_PAGE, RECEIVE_DATASET,
+    DASHBOARD_APPEND_DATASET_PAGE, DASHBOARD_RECEIVE_ACCESSIONS_PAGE, DASHBOARD_APPEND_ACCESSIONS_PAGE,
 } from 'datasets/constants';
 
 import Dataset from 'model/catalog/Dataset';
+import AccessionRef from 'model/accession/AccessionRef';
 import { Page } from 'model/common.model';
 
 const INITIAL_STATE: {
   dataset: Dataset,
+  accessionRefs: Page<AccessionRef>
   paged: Page<Dataset>,
   pagedQuery: any,
 } = {
   dataset: null,
+  accessionRefs: null,
   paged: null,
   pagedQuery: null,
 };
@@ -41,10 +35,12 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
     }
     case RECEIVE_DATASET: {
       const receivedIndex = state.paged ? _.findIndex(state.paged.content, (item) => item.uuid === action.payload.uuid) : -1;
+      const mustRemoveAccessions = state.dataset && (action.payload.uuid !== state.dataset.uuid);
 
       if (receivedIndex !== -1) {
         return update(state, {
           dataset: { $set: action.payload },
+          accessionRefs: { $set: mustRemoveAccessions ? null : state.accessionRefs },
           paged: {
             content: {
               [receivedIndex]: { $set: action.payload },
@@ -59,6 +55,27 @@ function datasetsDashboard(state = INITIAL_STATE, action: { type?: string, paylo
       }
     }
 
+    case DASHBOARD_RECEIVE_ACCESSIONS_PAGE: {
+      return update(state, {
+        accessionRefs: { $set: action.payload.accessionRefs },
+      });
+    }
+
+    case DASHBOARD_APPEND_ACCESSIONS_PAGE: {
+       const {accessionRefs} = action.payload;
+
+       return !state.accessionRefs ? update(state, {
+             accessionRefs: { $set: accessionRefs },
+           }) :
+           update(state, {
+              accessionRefs: {
+               content: {$push: accessionRefs.content},
+               number: {$set: accessionRefs.number},
+               last: {$set: accessionRefs.last},
+             },
+           });
+    }
+
     case DASHBOARD_REMOVE_DATASET: {
       if (state.paged) {
         const removeIndex = _.findIndex(state.paged.content, (item) => item.uuid === action.payload.uuid);

src/datasets/reducers/public.ts

 import update from 'immutability-helper';
 import * as _ from 'lodash';
 
-import {APPEND_DATASET_PAGE, RECEIVE_DATASET, RECEIVE_DATASET_PAGE} from 'datasets/constants';
+import {APPEND_DATASET_PAGE, RECEIVE_DATASET, RECEIVE_DATASET_PAGE, RECEIVE_ACCESSIONS_PAGE, APPEND_ACCESSIONS_PAGE} from 'datasets/constants';
 import {LOGIN_APP, LOGIN_USER, LOGOUT} from 'constants/login';
 
 import Dataset from 'model/catalog/Dataset';
+import AccessionRef from 'model/accession/AccessionRef';
 import {Page} from 'model/common.model';
 
 const INITIAL_STATE: {
     dataset: Dataset,
+    accessionRefs: Page<AccessionRef>
     paged: Page<Dataset>,
     pagedQuery: any,
 } = {
     dataset: null,
+    accessionRefs: null,
     paged: null,
     pagedQuery: null,
 };
@@ -29,10 +32,12 @@ function datasetsPublic(state = INITIAL_STATE, action: { type?: string, payload?
 
         case RECEIVE_DATASET: {
             const receivedIndex = state.paged ? _.findIndex(state.paged.content, (item) => item.uuid === action.payload.uuid) : -1;
+            const mustRemoveAccessions = state.dataset && (action.payload.uuid !== state.dataset.uuid);
 
             if (receivedIndex !== -1) {
                 return update(state, {
                     dataset: { $set: action.payload },
+                    accessionRefs: { $set: mustRemoveAccessions ? null : state.accessionRefs },
                     paged: {
                         content: {
                             [receivedIndex]: {$set: action.payload},
@@ -54,6 +59,27 @@ function datasetsPublic(state = INITIAL_STATE, action: { type?: string, payload?
             });
         }
 
+        case RECEIVE_ACCESSIONS_PAGE: {
+            return update(state, {
+                accessionRefs: { $set: action.payload.accessionRefs },
+            });
+        }
+
+        case APPEND_ACCESSIONS_PAGE: {
+            const {accessionRefs} = action.payload;
+
+            return !state.accessionRefs ? update(state, {
+                    accessionRefs: { $set: accessionRefs },
+                }) :
+                update(state, {
+                    accessionRefs: {
+                        content: {$push: accessionRefs.content},
+                        number: {$set: accessionRefs.number},
+                        last: {$set: accessionRefs.last},
+                    },
+                });
+        }
+
         case APPEND_DATASET_PAGE: {
             const {paged, query} = action.payload;
 

src/datasets/ui/DisplayPage.tsx

@@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 import { translate } from 'react-i18next';
 
 import { deleteDataset, publishDataset, rejectDataset, approveDataset } from 'datasets/actions/editor';
-import { loadDataset } from 'datasets/actions/public';
+import {loadAccessions, loadDataset} from 'datasets/actions/public';
 import Dataset from 'model/catalog/Dataset';
 
 import PageLayout from 'ui/layout/PageLayout';
@@ -13,6 +13,8 @@ import BackButton from 'ui/common/buttons/BackButton';
 import Loading from 'ui/common/Loading';
 import DatasetDisplay from './c/DatasetDisplay';
 import Grid from '@material-ui/core/Grid';
+import AccessionRef from 'model/accession/AccessionRef';
+import {Page} from 'model/common.model';
 
 interface IDatasetDetailProps extends React.ClassAttributes<any> {
     classes: any;
@@ -20,11 +22,13 @@ interface IDatasetDetailProps extends React.ClassAttributes<any> {
 
     uuid: string;
     dataset: Dataset;
+    accessionRefs: Page<AccessionRef>;
     loadDataset: (uuid: string) => Promise<Dataset>;
     deleteDataset: (dataset: Dataset) => Promise<Dataset>;
     publishDataset: (dataset: Dataset, needToRedirect?: boolean) => void;
     approveDataset: (dataset: Dataset) => void;
     rejectDataset: (dataset: Dataset, needToRedirect?: boolean) => void;
+    loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
 }
 
 const styles = (theme) => ({
@@ -40,16 +44,22 @@ const styles = (theme) => ({
 class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
 
     protected static needs = [
-      ({ params: { uuid } }) => loadDataset(uuid),
+        ({ params: { uuid } }) => loadDataset(uuid),
+        ({ params: { uuid } }) => loadAccessions(uuid, 0, 50),
     ];
 
     public componentDidMount() {
-        const { dataset, loadDataset, uuid } = this.props;
+        const { dataset, loadDataset, uuid, loadAccessions} = this.props;
+        loadAccessions(uuid);
         if (!dataset || dataset.uuid !== uuid) {
             loadDataset(uuid);
         }
     }
 
+    protected loadNextPageOfAcce = (page: number, pageSize: number) => {
+        this.props.loadAccessions(this.props.uuid, page, pageSize);
+    }
+
     public render() {
         const { t, classes, uuid, dataset, publishDataset, rejectDataset, approveDataset, deleteDataset } = this.props;
 
@@ -71,6 +81,8 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
                               rejectDataset={ rejectDataset }
                               approveDataset={ approveDataset }
                               deleteDataset={ deleteDataset }
+                              loadAccessions={ this.loadNextPageOfAcce }
+                              accessionRefs={ this.props.accessionRefs }
                           />
                       </Grid>
                     }
@@ -88,6 +100,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
 
 const mapStateToProps = (state, ownProps) => ({
     dataset: state.datasets.public.dataset,
+    accessionRefs: state.datasets.public.accessionRefs,
     uuid: ownProps.match.params.uuid,
 });
 
@@ -97,6 +110,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
     deleteDataset,
     rejectDataset,
     approveDataset,
+    loadAccessions,
 }, dispatch);
 
 export default translate()(connect(mapStateToProps, mapDispatchToProps)((withStyles as any)(styles)(DatasetDetail)));

src/datasets/ui/c/DatasetDisplay.tsx

-
 import * as React from 'react';
 import { translate } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
@@ -11,7 +10,7 @@ import Descriptor from 'model/catalog/Descriptor';
 import RepositoryFile from 'model/repository/RepositoryFile';
 import DatasetCreator from 'model/catalog/DatasetCreator';
 import { AVAILABLE_LICENSES } from 'model/License';
-import { PublishState } from 'model/common.model';
+import { PublishState, Page } from 'model/common.model';
 
 import confirm from 'utilities/confirmAlert';
 import Authorize from 'ui/common/authorized/Authorize';
@@ -35,6 +34,7 @@ import CropChips from 'crops/ui/c/CropChips';
 
 import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';
 import McpdDate from 'ui/common/time/McpdDate';
+import AccessionRef from 'model/accession/AccessionRef';
 
 const styles = (theme) => ({
     root: {
@@ -134,6 +134,8 @@ interface IDetailInfoProps extends React.ClassAttributes<any> {
     approveDataset?: (dataset: Dataset) => void;
     rejectDataset?: (dataset: Dataset, needToRedirect?: boolean) => void;
     deleteDataset?: (dataset: Dataset) => any;
+    loadAccessions: (page: number, pageSize: number) => void;
+    accessionRefs: Page<AccessionRef>;
 }
 
 class DetailInfo extends React.Component<IDetailInfoProps, any> {
@@ -224,7 +226,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
     }
 
     public render() {
-        const { classes, dataset, publishDataset, deleteDataset, t } = this.props;
+        const { classes, dataset, publishDataset, deleteDataset, t, accessionRefs } = this.props;
 
         if (! dataset) {
           log('Waiting for dataset.');
@@ -453,11 +455,14 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
                     </Grid>
                   ) }
 
-                  { dataset.accessionRefs && dataset.accessionRefs.length > 0 && (
+                  { accessionRefs && accessionRefs.content && accessionRefs.content.length > 0 && (
                     <Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-accessions">
                       <Section title={ t('datasets.public.c.datasetDisplay.accessionsEvaluated') }>
                           <div className="p-20">
-                              <AccessionRefsTable accessionRefs={ dataset.accessionRefs } />
+                              <AccessionRefsTable
+                                  loadNextPage={ this.props.loadAccessions }
+                                  paged={ accessionRefs }
+                              />
                           </div>
                       </Section>
                     </Grid>

src/datasets/ui/dataset-stepper/steps/accessions-list/ListOfAccesion.tsx

@@ -13,11 +13,13 @@ import { CSV, ICsvConfiguration } from 'utilities/CSV';
 import CSVConfiguration, { CSVConfig } from 'ui/common/csv-configuration/CSVConfiguration';
 import Dataset from 'model/catalog/Dataset';
 import Loading from 'ui/common/Loading';
+import {Page} from 'model/common.model';
 
 interface IListOfAccession extends React.ClassAttributes<any> {
     classes: any;
     onAccessionsUpdated: (accessionRefs: AccessionRef[]) => Promise<Dataset>;
-    accessionRefs: AccessionRef[];
+    accessionRefs: Page<AccessionRef>;
+    loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
     t: any;
 }
 
@@ -105,7 +107,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
 
     public render() {
 
-        const {classes, accessionRefs, t} = this.props;
+        const {classes, accessionRefs, t, loadAccessions} = this.props;
         const { uploading, uploadText } = this.state;
 
         return (
@@ -141,8 +143,11 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
 
                 { uploading && <Loading message={ uploadText } /> }
 
-                <h3>{ t('datasets.dashboard.p.stepper.listOfAccessions.rowCount', {count: accessionRefs ? accessionRefs.length : 0}) }</h3>
-                <AccessionRefsTable accessionRefs={ accessionRefs } />
+                <h3>{ t('datasets.dashboard.p.stepper.listOfAccessions.rowCount', { count: accessionRefs ? accessionRefs.totalElements : 0 }) }</h3>
+                <AccessionRefsTable
+                    loadNextPage={ loadAccessions }
+                    paged={ accessionRefs }
+                />
             </div>
         );
     }

src/datasets/ui/dataset-stepper/steps/accessions-list/index.tsx

@@ -8,42 +8,64 @@ import { updateDatasetAccessionRefs } from 'datasets/actions/editor';
 import ListOfAccesion from './ListOfAccesion';
 import steps from 'datasets/ui/dataset-stepper/steps';
 import NavigationWrapper from 'ui/common/stepper/NavigationWrapper';
+import {loadAccessions} from 'datasets/actions/dashboard';
+import {Page} from 'model/common.model';
 
 interface IAccessionsListStep extends React.ClassAttributes<any> {
     dataset: Dataset;
+    accessionRefs: Page<AccessionRef>;
     updateDatasetAccessionRefs: (dataset: Dataset, accessionRefs: AccessionRef[]) => Promise<Dataset>;
+    loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
     stillLoading: boolean;
     onDelete: () => void;
     onPublish: () => void;
     onGotoStep: (id: number) => () => void;
     location: any;
+    uuid: string;
 }
 
 class AccessionsListStep extends React.Component<IAccessionsListStep, any> {
 
+    protected static needs = [
+        ({ params: { uuid } }) => loadAccessions(uuid, 0, 100),
+    ];
+
     public constructor(props: any) {
         super(props);
     }
 
+    public componentWillMount() {
+        const { dataset, uuid, loadAccessions, accessionRefs } = this.props;
+        if (! accessionRefs || (dataset && dataset.uuid !== uuid)) {
+            loadAccessions(uuid);
+        }
+    }
+
     protected updateAccessionRefs = (accessionRefs: AccessionRef[]) => {
         const {dataset, updateDatasetAccessionRefs} = this.props;
-        updateDatasetAccessionRefs(dataset, accessionRefs);
+        return updateDatasetAccessionRefs(dataset, accessionRefs);
     }
 
     protected gotoStep = (id) => () => {
         this.props.onGotoStep(id);
     }
 
+    protected loadNextPageOfAcce = (page: number, pageSize: number) => {
+        const { dataset, loadAccessions } = this.props;
+        loadAccessions(dataset.uuid, page, pageSize);
+    }
+
     public render() {
-        const {dataset, stillLoading, onDelete, onPublish, location} = this.props;
+        const {accessionRefs, stillLoading, onDelete, onPublish, location} = this.props;
 
         return (
             <NavigationWrapper location={ location } stillLoading={ stillLoading } disabledNext={ false }
                 disabled={ false } steps={ steps }
                 gotoStep={ this.gotoStep } onDelete={ onDelete } onPublish={ onPublish }>
                 <ListOfAccesion
-                    accessionRefs={ dataset.accessionRefs }
+                    accessionRefs={ accessionRefs }
                     onAccessionsUpdated={ this.updateAccessionRefs }
+                    loadAccessions={ this.loadNextPageOfAcce }
                 />
             </NavigationWrapper>
         );
@@ -51,7 +73,9 @@ class AccessionsListStep extends React.Component<IAccessionsListStep, any> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
+    uuid: ownProps.match.params.uuid,
     dataset: state.datasets.dashboard.dataset,
+    accessionRefs: state.datasets.dashboard.accessionRefs,
     stillLoading: ownProps.stillLoading,
     location: ownProps.location,
     onDelete: ownProps.onDelete,
@@ -61,6 +85,7 @@ const mapStateToProps = (state, ownProps) => ({
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
     updateDatasetAccessionRefs,
+    loadAccessions,
 }, dispatch);
 
 export default connect(

src/datasets/ui/dataset-stepper/steps/review/index.tsx

@@ -5,22 +5,59 @@ import {bindActionCreators} from 'redux';
 import DatasetDisplay from 'datasets/ui/c/DatasetDisplay';
 import steps from 'datasets/ui/dataset-stepper/steps';
 import NavigationWrapper from 'ui/common/stepper/NavigationWrapper';
+import {loadAccessions} from 'datasets/actions/dashboard';
+import AccessionRef from 'model/accession/AccessionRef';
+import {Page} from 'model/common.model';
+import Dataset from 'model/catalog/Dataset';
 
-class ReviewAndPublishStep extends React.Component<any, any> {
+interface IReviewAndPublishStep extends React.ClassAttributes<any> {
+    dataset: Dataset;
+    accessionRefs: Page<AccessionRef>;
+    updateDatasetAccessionRefs: (dataset: Dataset, accessionRefs: AccessionRef[]) => Promise<Dataset>;
+    loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
+    stillLoading: boolean;
+    onDelete: () => void;
+    onPublish: () => void;
+    onGotoStep: (id: number) => () => void;
+    location: any;
+    uuid: string;
+}
+
+class ReviewAndPublishStep extends React.Component<IReviewAndPublishStep, any> {
+
+    protected static needs = [
+        ({ params: { uuid } }) => loadAccessions(uuid),
+    ];
+
+    public componentWillMount() {
+        const { accessionRefs, uuid, loadAccessions, dataset } = this.props;
+        if (! accessionRefs || (dataset && dataset.uuid !== uuid)) {
+            loadAccessions(uuid);
+        }
+    }
+
+    protected loadNextPage