import React from 'react';
import WithEmberSupport from 'ember-react-components';
@WithEmberSupport
export default class extends React.Component {
render() {
const {
records,
collection,
numberOfPages,
recordsCount,
currentPage,
searchValue,
isLoading,
fetchRecords,
} = this.props;
const goBack = () => {
if (currentPage > 1) {
return fetchRecords({ page: currentPage - 1 })
}
};
const goNext = () => {
if (currentPage < numberOfPages) {
return fetchRecords({ page: currentPage + 1 })
}
};
return (
<div className="l-gallery-view-container">
<section className="c-gallery">
{records.map(record => {
const models = [collection.id, record.id];
const baseUrl = window.location.href.split('/').slice(3, 7);
return (
<a href={`/${baseUrl.join('/')}/${collection.id}/index/record/${collection.id}/${record.id}/details`}
className="c-gallery__image-container"
key={record.id}
>
<img className="c-gallery__image" src={record['forest-picture']}/>
</a>
);
})
}
</section>
<div className="c-gallery-footer">
<div className="c-beta-paginator">
<div className="c-beta-paginator__left" onClick={goBack} role="button">
<i className="material-icons c-beta-paginator__chevron c-beta-paginator__chevron--left">keyboard_arrow_left</i>
</div>
<span className="c-beta-paginator__separator"/>
<div data-test-input-for="count" className="c-beta-paginator__count">{currentPage} of {numberOfPages}</div>
<span className="c-beta-paginator__separator"/>
<div className="c-beta-paginator__right" onClick={goNext} role="button">
<i className="material-icons c-beta-paginator__chevron c-beta-paginator__chevron--right">keyboard_arrow_right</i>
</div>
</div>
</div>
</div>
);
}
}
