added infinite Dataset accession lists, changed UUID variable names

src/datasets/actions/dashboard.ts

@@ -5,13 +5,16 @@ import { addFilterCode } from 'actions/filterCode';
 import navigateTo from 'actions/navigation';
 
 // 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';
 import { PublishState } from 'model/common.model';
 import Page from 'model/Page';
 import FilteredPage from 'model/FilteredPage';
+import { AccessionRef } from 'model/accession/AccessionRef';
 
 // Service
 import DatasetService from 'service/catalog/DatasetService';
@@ -37,6 +40,14 @@ const receiveDatasetPage = (paged: Page<Dataset>) => ({
   payload: { paged },
 });
 
+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 +73,24 @@ const loadMoreDatasets = (paged?: FilteredPage<Dataset>) => (dispatch, getState)
     });
 };
 
+function loadMoreAccessions(uuid: string, paged?: Page<AccessionRef>)  {
+  return (dispatch, getState) => {
+
+    return DatasetService.listAccessions(uuid, Page.nextPage(paged))
+      .then((paged) => {
+        if (paged.number === 0) {
+          dispatch(receiveAccessions(paged, uuid));
+        } else {
+          dispatch(appendAccessions(paged));
+        }
+      })
+      .catch((error) => {
+        log('Error', error);
+      });
+  };
+}
+
+
 export const updateRoute = (paged: FilteredPage<Dataset>) => (dispatch) => {
   const qs = {
     s: paged.sort[0].property === Dataset.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
@@ -138,4 +167,4 @@ function deleteDataset(datasetUuid: string) {
 }
 
 // Dashboard action section exports
-export { publishDataset, approveDataset, unpublishDataset, deleteDataset };
+export { publishDataset, approveDataset, unpublishDataset, deleteDataset, loadMoreAccessions };

src/datasets/actions/editor.ts

@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 
 // Actions
 import { navigateTo } from 'actions/navigation';
+import {loadMoreAccessions} 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';
@@ -108,6 +109,7 @@ function updateDatasetAccessionRefs(dataset: Dataset, accessionRefs: AccessionRe
     return DatasetService.upsertAccessions(dataset.uuid, dataset.version, accessionRefs)
       .then((saved) => {
         dispatch(receiveDataset(saved));
+        dispatch(loadMoreAccessions(saved.uuid));
       }).catch((error) => {
         log('Publish error', error);
       });

src/datasets/actions/public.ts

@@ -4,13 +4,14 @@ import navigateTo from 'actions/navigation';
 import { showSnackbar } from 'actions/snackbar';
 
 // 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/Page';
 import FilteredPage, { IPageRequest } from 'model/FilteredPage';
+import { AccessionRef } from 'model/accession/AccessionRef';
 
 // Service
 import DatasetService from 'service/catalog/DatasetService';
@@ -35,6 +36,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) => {
 
@@ -48,6 +58,23 @@ function loadDataset(uuid: string) {
   };
 }
 
+function loadMoreAccessions(uuid: string, paged?: Page<AccessionRef>)  {
+  return (dispatch, getState) => {
+
+    return DatasetService.listAccessions(uuid, Page.nextPage(paged))
+      .then((paged) => {
+        if (paged.number === 0) {
+          dispatch(receiveAccessions(paged, uuid));
+        } else {
+          dispatch(appendAccessions(paged));
+        }
+      })
+      .catch((error) => {
+        log('Error', error);
+      });
+  };
+}
+
 const loadMoreDatasets = (paged: FilteredPage<Dataset>) => (dispatch, getState) => {
   return DatasetService.datasetList(paged ? paged.filterCode : '', Page.nextPage(paged))
     .then((paged) => {
@@ -100,4 +127,4 @@ const promiselistDatasets = (page?, results?, sortBy?: string[], filter?, order?
     });
 };
 
-export { loadMoreDatasets, promiselistDatasets, loadDataset };
+export { loadMoreDatasets, promiselistDatasets, loadDataset, loadMoreAccessions };

src/datasets/constants.ts

@@ -6,11 +6,16 @@ export const RECEIVE_DATASET = 'App/RECEIVE_DATASET';
 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';
 
 // dashboard
 export const DASHBOARD_REMOVE_DATASET = 'dataset/dashboard/REMOVE_DATASET';
 export const DASHBOARD_RECEIVE_DATASET_PAGE = 'dataset/dashboard/RECEIVE_DATASET_PAGE';
 export const DASHBOARD_APPEND_DATASET_PAGE = 'dataset/dashboard/APPEND_DATASET_PAGE';
+export const DASHBOARD_RECEIVE_ACCESSIONS_PAGE = 'dataset/dashboard/RECEIVE_ACCESSIONS_PAGE';
+export const DASHBOARD_APPEND_ACCESSIONS_PAGE = 'dataset/dashboard/APPEND_ACCESSIONS_PAGE';
+
 
 // creators const params
 export const RECEIVE_CREATOR = 'App/RECEIVE_CREATOR';

src/datasets/reducers/dashboard.ts

@@ -2,30 +2,24 @@ 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/Page';
 
 const INITIAL_STATE: {
   dataset: Dataset,
   paged: Page<Dataset>,
+  accessionRefs: Page<AccessionRef>,
   pagedQuery: any,
 } = {
   dataset: null,
   paged: null,
+  accessionRefs: 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/Page';
 
 const INITIAL_STATE: {
   dataset: Dataset,
   paged: Page<Dataset>,
+  accessionRefs: Page<AccessionRef>,
 } = {
   dataset: null,
   paged: null,
+  accessionRefs: null,
 };
 
 function datasetsPublic(state = INITIAL_STATE, action: { type?: string, payload?: any } = { type: '', payload: {} }) {
@@ -26,10 +30,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 },
@@ -44,6 +50,28 @@ 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 RECEIVE_DATASET_PAGE: {
       return update(state, {
         paged: { $set: action.payload.paged },

src/datasets/ui/DisplayPage.tsx

@@ -5,8 +5,10 @@ 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 {loadMoreAccessions, loadDataset} from 'datasets/actions/public';
 import Dataset from 'model/catalog/Dataset';
+import { AccessionRef } from 'model/accession/AccessionRef';
+import Page from 'model/Page';
 
 import PageLayout from 'ui/layout/PageLayout';
 import BackButton from 'ui/common/buttons/BackButton';
@@ -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;
+  loadMoreAccessions: (uuid: string, page?: Page<AccessionRef>) => any;
 }
 
 const styles = (theme) => ({
@@ -41,15 +45,22 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
 
   protected static needs = [
     ({ params: { uuid } }) => loadDataset(uuid),
+    ({ params: { uuid } }) => loadMoreAccessions(uuid),
   ];
 
   public componentWillMount() {
-    const { dataset, loadDataset, uuid } = this.props;
+    const { dataset, loadDataset, loadMoreAccessions, uuid } = this.props;
+    loadMoreAccessions(uuid);
     if (!dataset || dataset.uuid !== uuid) {
       loadDataset(uuid);
     }
   }
 
+  private loadMoreAccessions = (paged: Page<AccessionRef>) => {
+    const { loadMoreAccessions, dataset } = this.props;
+    loadMoreAccessions(dataset.uuid, paged);
+  }
+
   public render() {
     const { t, classes, uuid, dataset, publishDataset, rejectDataset, approveDataset, deleteDataset } = this.props;
 
@@ -71,6 +82,8 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
                 rejectDataset={ rejectDataset }
                 approveDataset={ approveDataset }
                 deleteDataset={ deleteDataset }
+                loadAccessions={ this.loadMoreAccessions }
+                accessionRefs={ this.props.accessionRefs }
               />
             </Grid>
           }
@@ -88,6 +101,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 +111,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   deleteDataset,
   rejectDataset,
   approveDataset,
+  loadMoreAccessions,
 }, dispatch);
 
 export default translate()(connect(mapStateToProps, mapDispatchToProps)((withStyles as any)(styles)(DatasetDetail)));

src/datasets/ui/c/DatasetDisplay.tsx

@@ -11,6 +11,8 @@ 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 Page from 'model/Page';
+import { AccessionRef } from 'model/accession/AccessionRef';
 
 import confirm from 'utilities/confirmAlert';
 import Authorize from 'ui/common/authorized/Authorize';
@@ -28,12 +30,13 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 
-import AccessionRefsTable from 'ui/catalog/accession/AccessionRefsTable';
 import Permissions from 'ui/common/permission/Permissions';
 import CropChips from 'crop/ui/c/CropChips';
 
 import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
 import McpdDate from 'ui/common/time/McpdDate';
+import PagedLoader from 'ui/common/PagedLoader';
+import AccessionCard from 'accessions/ui/c/AccessionCard';
 
 const styles = (theme) => ({
   root: {
@@ -126,14 +129,15 @@ const styles = (theme) => ({
 });
 
 interface IDetailInfoProps extends React.ClassAttributes<any> {
-  t?: any;
-  classes?: any;
-
+  t: any;
+  classes: any;
   dataset: Dataset;
   publishDataset?: (dataset: Dataset, needToRedirect?: boolean) => void;
   approveDataset?: (dataset: Dataset) => void;
   rejectDataset?: (dataset: Dataset, needToRedirect?: boolean) => void;
   deleteDataset?: (dataset: Dataset) => any;
+  loadAccessions: (page: Page<AccessionRef>) => any;
+  accessionRefs: Page<AccessionRef>;
 }
 
 class DetailInfo extends React.Component<IDetailInfoProps, any> {
@@ -224,13 +228,19 @@ 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.');
       return null;
     }
 
+    const renderAccession = (accessionRef: AccessionRef, index: number) => (
+      <Grid key={ accessionRef.accession.uuid } item xs={ 12 } className="pt-5 pb-5 pr-10 pl-10">
+        <AccessionCard index={ index } accession={ accessionRef.accession }/>
+      </Grid>
+    );
+
     const license = dataset.rights && AVAILABLE_LICENSES.find((e) => e.code === dataset.rights);
     const oneDay = 24 * 60 * 60 * 1000;
     const oneDayPassed = dataset && (fixDate(dataset.lastModifiedDate).getTime() <= (new Date()).getTime() - oneDay);
@@ -251,7 +261,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
                     <PartnerLink to={ dataset.owner }/>
                   </PropertiesItem>
                   { dataset.crops && dataset.crops.length > 0 &&
-                  <PropertiesItem title={ t('crop.common.modelName') }>
+                  <PropertiesItem title={ t('crops.common.modelName') }>
                     <CropChips crops={ dataset.crops }/>
                   </PropertiesItem>
                   }
@@ -363,7 +373,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
                     {
                       dataset.repositoryFiles && dataset.repositoryFiles.map((e: RepositoryFile) => (
                         <PropertiesItem key={ e.uuid } title={
-                          <a href={ `/proxy/api/v0/repository/download/${e.uuid}` }>
+                          <a href={ `/proxy/api/v1/repository/download/${e.uuid}` }>
                             <Button variant="contained" component="span" className={ `${classes.buttonGreen} ${classes.button}` }>
                               { t('common:action.download') }
                             </Button>
@@ -453,14 +463,13 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
             </Grid>
           ) }
 
-          { dataset.accessionRefs && dataset.accessionRefs.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 }/>
-                </div>
-              </Section>
-            </Grid>
+          { accessionRefs && accessionRefs.content && accessionRefs.content.length > 0 && (
+            <PagedLoader
+              paged={ accessionRefs }
+              loadMore={ this.props.loadAccessions }
+              roughItemHeight={ 80 }
+              itemRenderer={ renderAccession }
+            />
           ) }
         </Grid>
       </div>

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

@@ -7,8 +7,8 @@ import { translate } from 'react-i18next';
 
 import { log } from 'utilities/debug';
 
-import Dataset from 'model/catalog/Dataset';
 import { AccessionRef } from 'model/accession/AccessionRef';
+import Page from 'model/Page';
 import AccessionRefsTable from 'ui/catalog/accession/AccessionRefsTable';
 import { CSV, ICsvConfiguration } from 'utilities/CSV';
 import CSVConfiguration, { CSVConfig } from 'ui/common/csv-configuration/CSVConfiguration';
@@ -16,7 +16,8 @@ import CSVConfiguration, { CSVConfig } from 'ui/common/csv-configuration/CSVConf
 interface IListOfAccession extends React.ClassAttributes<any> {
   classes: any;
   onAccessionsUpdated: (accessionRefs: AccessionRef[]) => void;
-  dataset: Dataset;
+  accessionRefs: Page<AccessionRef>;
+  loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
   t: any;
 }
 
@@ -64,7 +65,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
 
   public render() {
 
-    const { classes, dataset, t } = this.props;
+    const {classes, accessionRefs, t, loadAccessions} = this.props;
 
     return (
       <div className={ `${ classes.root } m-20 p-20 even-row` }>
@@ -98,8 +99,11 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
 
         </div>
 
-        <h3>Accession list: { dataset.accessionRefs ? dataset.accessionRefs.length : 0 } rows</h3>
-        <AccessionRefsTable  accessionRefs={ dataset.accessionRefs }/>
+        <h3>{ t('datasets.dashboard.p.stepper.listOfAccessions.rowCount', { count: accessionRefs ? accessionRefs.totalElements : 0 }) }</h3>
+        <AccessionRefsTable
+          loadNextPage={ loadAccessions }
+          paged={ accessionRefs }
+        />
       </div>
     );
   }

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

@@ -3,10 +3,12 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 // actions
 import { updateDatasetAccessionRefs } from 'datasets/actions/editor';
+import {loadMoreAccessions} from 'datasets/actions/dashboard';
 
 // models
 import Dataset from 'model/catalog/Dataset';
 import { AccessionRef } from 'model/accession/AccessionRef';
+import Page from 'model/Page';
 
 // ui
 import ListOfAccessions from './ListOfAccessions';
@@ -16,23 +18,36 @@ import Loading from 'ui/common/Loading';
 
 interface IAccessionsListStep extends React.ClassAttributes<any> {
   item: Dataset;
+  accessionRefs: Page<AccessionRef>;
   updateDatasetAccessionRefs: (dataset: Dataset, accessionRefs: AccessionRef[]) => Promise<Dataset>;
+  loadMore: (uuid: string, page?: Page<AccessionRef>) => any;
   stillLoading: boolean;
   onDelete: () => void;
   onPublish: () => void;
   onGotoStep: (id: number) => () => void;
   location: any;
+  uuid: string;
 }
 
 class AccessionsListStep extends StepperTemplate<IAccessionsListStep> {
 
+  protected static needs = [
+    ({ params: { uuid } }) => loadMoreAccessions(uuid),
+  ];
+
+  private loadMoreAccessions = (paged: Page<AccessionRef>) => {
+    const { loadMore, item } = this.props;
+    loadMore(item.uuid, paged);
+  }
+
   protected renderContent = () => {
-    const { item } = this.props;
+    const { accessionRefs, item } = this.props;
 
     return !item ? <Loading/> : (
       <ListOfAccessions
+        accessionRefs={ accessionRefs }
         onAccessionsUpdated={ this.updateAccessionsRefs }
-        dataset={ item }
+        loadAccessions={ this.loadMoreAccessions }
       />
     );
   }
@@ -42,12 +57,28 @@ class AccessionsListStep extends StepperTemplate<IAccessionsListStep> {
     updateDatasetAccessionRefs(dataset, AccessionRefs);
   }
 
+  public componentWillMount() {
+    const { item: dataset, uuid, loadMore, accessionRefs } = this.props;
+    if (! accessionRefs || (dataset && dataset.uuid !== uuid)) {
+      loadMore(uuid);
+    }
+  }
+
+  protected loadNextPageOfAcce = (page: number, pageSize: number) => {
+    const { item: dataset, loadMore } = this.props;
+    loadMore(dataset.uuid, {number: page,  size: pageSize});
+  }
+
 }
 
-const mapStateToProps = (state, ownProps) => ({});
+const mapStateToProps = (state, ownProps) => ({
+  uuid: ownProps.match.params.uuid,