+
+
+ {this.props.images.map((o, i) => {
+ if (i < 5 ) {
+ return this.renderImage(o)
+ }
+ return ""
+ })}
+
+
+ {this.props.images.map((o, i) => {
+ if (i > 4 ) {
+ return this.renderImage(o)
+ }
+ return ""
+ } )}
+
+
+
+
+
+
+
+ */
\ No newline at end of file
diff --git a/src/components/item_grid_element.js b/src/components/item_grid_element.js
new file mode 100644
index 0000000..0f179f6
--- /dev/null
+++ b/src/components/item_grid_element.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+class ItemGridElement extends Component {
+
+ constructor ( props ) {
+ super(props)
+ this.state = {
+ clickable: true
+ }
+ this.onSelectImage = this.onSelectImage.bind(this);
+ if (!this.props.clickable) {
+ this.setState({clickable: false})
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.url !== this.props.url) {
+ this.setState({clickable: true});
+ }
+ }
+
+ onSelectImage () {
+ if (this.state.clickable) {
+ if (this.props.addImage !== null){
+ this.props.addImage(this.props.url);
+ }
+ this.setState({clickable: !this.state.clickable});
+ }
+ }
+
+ render () {
+
+ const notClickableOptions = {
+ borderWidth: '2px',
+ borderColor: '#3333cc',
+ boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"
+ }
+
+ const clickableOptions = {
+ borderWidth: '1px',
+ borderColor: 'LightGrey'
+ }
+
+ if (!this.props.url) {
+ return (
+
+ Loading...
+
+ )
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default ItemGridElement;
diff --git a/src/components/next_button.js b/src/components/next_button.js
new file mode 100644
index 0000000..20e4c86
--- /dev/null
+++ b/src/components/next_button.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { fetchImages } from '../actions/index';
+
+class NextButton extends Component {
+
+ constructor (props) {
+ super(props);
+ this.state = { currentPage: 1}
+ this.getNextImages = this.getNextImages.bind(this);
+ }
+
+ getNextImages () {
+ console.log(this.state.currentPage);
+ this.setState({currentPage: this.state.currentPage + 20});
+ this.props.fetchImages(this.state.currentPage);
+
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return bindActionCreators ({ fetchImages: fetchImages }, dispatch);
+}
+
+export default connect(null, mapDispatchToProps)(NextButton);
diff --git a/src/components/selection_bar_element.js b/src/components/selection_bar_element.js
new file mode 100644
index 0000000..39b0a36
--- /dev/null
+++ b/src/components/selection_bar_element.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class SelectionBarElement extends Component {
+
+ render () {
+
+ if (!this.props.url) {
+ return (
+
+ Loading...
+
+ )
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default SelectionBarElement;
diff --git a/src/components/selections_bar.js b/src/components/selections_bar.js
new file mode 100644
index 0000000..3f23d32
--- /dev/null
+++ b/src/components/selections_bar.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import SelectionBarElement from './selection_bar_element';
+
+class SelectionsBar extends Component {
+
+ renderSelectedImages (image) {
+ return (
+
{}}
+ url={image} />
+ )
+ }
+
+ render (){
+
+ if ( this.props.selectedImages.length === 0 ) {
+ return (
+
+ )
+ }
+ return (
+
+
+ {this.props.selectedImages.slice().reverse().map(this.renderSelectedImages)}
+
+
+
+
+
Left
+
Center
+
Right
+
+