<repo_name>ezebran/aeromarket<file_sep>/src/components/Foot-bar.js
import React, { Component } from 'react';

const FootBar = (props) => {
	let objSize = props.paginacion.cantidadProdus;
	let artPosicion = props.paginacion.productosPorPag * props.paginacion.pagActual;
	var pagActual =  props.paginacion.pagActual;

	const paginacionBarMas = (e) => {
		e.preventDefault();


		if(objSize != artPosicion){
			var pagEnBar = pagActual + 1;

			props.obtenerProductos(pagEnBar);		
		}
	}

	const paginacionBarMenos = (e) => {
		e.preventDefault();


		if(pagActual != 1){
			var pagEnBar = pagActual - 1;

			props.obtenerProductos(pagEnBar);			
		}
	}
	return(
		<div>
			<div className="m-bar">

				<div className="m-bar-content">
					<h2 className="n-products">
						{artPosicion} of {objSize} products
						<a href="#" className="arrow-cont arrow-resp">
							<span className="icon-keyboard_arrow_right arrow-icon"></span>
						</a>
					</h2>


				</div>
				<div class="arrows-cont">
					<a href="#" className="arrow-cont" onClick={paginacionBarMenos}>
						<span className="icon-keyboard_arrow_left arrow-icon"></span>
					</a>
					<a href="#" className="arrow-cont" onClick={paginacionBarMas}>
						<span className="icon-keyboard_arrow_right arrow-icon"></span>
					</a>
				</div>
			</div>

			<hr className="gray-line gl-foot" />
		</div>
	)
}

export default FootBar;<file_sep>/src/components/Header.js
import React from 'react';
import Cart from './Cart';
import Redeem from './ModalsContent/Redeem';

const Header = (props) => {

	return(
		
		<header>
			
			<nav>
				<img src="assets/images/aerolab-logo.svg" />
				<div className="user-nav">
					<Cart
						toggleCart = {props.toggleCart}
						
					/>			
					<h2 id="name" class="user-name">{props.usuarios.name}</h2>
					<div className="btn btn-light">
						<h2>{props.usuarios.points}</h2>
						<img src="assets/images/icons/coin.svg" />
					</div>
				</div>
			</nav>
			<div className="h-banner">
				<h1>Electronics</h1>
			</div>
		</header>
	)
}

export default Header;<file_sep>/src/App.js
import React, { Component } from 'react';
import Header from './components/Header';
import MainBar from './components/Main-bar';
import Articles from './components/Articles';
import FootBar from './components/Foot-bar';
import Redeem from './components/ModalsContent/Redeem';
import Purchases from './components/ModalsContent/Purchases';

class App extends Component {

token = '<KEY>';

state = {
	usuarios: {},
	productos: [],
	paginacion: {
		pagActual: 1,
		productosPorPag: 16,
		cantidadProdus: 0,
		ordenadoPor: 1
	},
	redeemContent: {},
	redeemImgs: {}
}
//1 = reciente, 2 = porMenor, 3 = porMayor
componentDidMount() {
	this.obtenerUsuario();
	this.obtenerProductos();
	this.ordenadoPor();
}



obtenerProductos = async (pagBar) => {
	let url = `https://aerolab-challenge.now.sh/products/?token=${this.token}`;

	const artPorPag = this.state.paginacion.productosPorPag;
	await fetch(url)
		.then(respuesta => {
			return respuesta.json();
		})
		.then(productos => {
			var pagEnMbar;

			if(pagBar == undefined){
				pagEnMbar = this.state.paginacion.pagActual;
			}else{
				pagEnMbar = pagBar;
			}
			var paginacionCopy = this.state.paginacion
			paginacionCopy.cantidadProdus = productos.length
			paginacionCopy.pagActual = pagEnMbar

			this.setState({
				paginacion: paginacionCopy,
				productos: productos				
			})
						
		})


	let hasta = artPorPag * this.state.paginacion.pagActual;
	let desde = hasta - artPorPag;
	var produs = [];

	let produsSinOrdenar = this.state.productos;
	let botonMenor = document.getElementById('porMenor');
	let botonMayor = document.getElementById('porMayor');
	let botonReciente = document.getElementById('reciente');

	if(this.state.paginacion.ordenadoPor == 2){
		var produsXmenor = produsSinOrdenar.sort(function (prev, next){
			return prev.cost - next.cost;
		})
		this.setState({
			productos: produsXmenor
		})

		botonMenor.classList.remove("btn-light");
		botonMenor.classList.add("btn-active");

		botonMayor.classList.remove("btn-active");
		botonMayor.classList.add("btn-light");

		botonReciente.classList.remove("btn-active");
		botonReciente.classList.add("btn-light");

	} else if(this.state.paginacion.ordenadoPor == 3){

		var produsXmayor = produsSinOrdenar.sort(function (prev, next){
			return next.cost - prev.cost;
		})
		this.setState({
			productos: produsXmayor
		})

		botonMenor.classList.remove("btn-active");
		botonMenor.classList.add("btn-light");

		botonMayor.classList.remove("btn-light");
		botonMayor.classList.add("btn-active");

		botonReciente.classList.remove("btn-active");
		botonReciente.classList.add("btn-light");
	}else{
		var produsRecientes = produsSinOrdenar.sort(function (prev, next){
			return prev._id - next._id;
		})
		this.setState({
			productos: produsRecientes
		})

		botonMenor.classList.remove("btn-active");
		botonMenor.classList.add("btn-light");

		botonMayor.classList.remove("btn-active");
		botonMayor.classList.add("btn-light");

		botonReciente.classList.remove("btn-light");
		botonReciente.classList.add("btn-active");
	}

	for(let i = 0;i < artPorPag;i++){
		produs.push(this.state.productos[desde]);
		desde++;
	}

	this.setState({
		productos: produs
	})	
}

ordenadoPor = (num) => {
	if(num == undefined){
		num = this.state.paginacion.ordenadoPor;
	}
	var pagCopy = this.state.paginacion;
		pagCopy.ordenadoPor = num;
		this.setState({
			paginacion: pagCopy
		})
}

obtenerUsuario = async () => {
	let url = `https://aerolab-challenge.now.sh/user/me/?token=${this.token}`;

	await fetch(url)
		.then(respuesta => {
			return respuesta.json();
		})
		.then(usuarios => {
			this.setState({
				usuarios: usuarios
			})
		})
}

renderRedeem = (produ) => {
		this.setState({
			redeemContent: produ,
			redeemImgs: produ.img
		})
}

// toggleCart = e => this.setState({ showCart: !this.state.showCart });

  render() {
    return (
    	<div>
    		<Redeem
    			redeemContent = {this.state.redeemContent}
    			redeemImgs = {this.state.redeemImgs}
    			userPoints = {this.state.usuarios.points}
    		/>
    		<Purchases />
			<Header 
				usuarios = {this.state.usuarios}
				toggleCart = {this.toggleCart}
			/>
			<MainBar
				paginacion = {this.state.paginacion}
				obtenerProductos = {this.obtenerProductos}
				ordenadoPor = {this.ordenadoPor}
			/>
			<Articles 
				productos = {this.state.productos}
				usuarios = {this.state.usuarios}
				renderRedeem = {this.renderRedeem}
			/>
			<FootBar
				paginacion = {this.state.paginacion}
				obtenerProductos = {this.obtenerProductos}
			/>
		</div>
    );
  }
}

export default App;
<file_sep>/src/components/ModalsContent/Purchases.js
import React, { Component } from 'react';


const Purchases = (props) => {

	const toggleCartf = (e) => {
		e.preventDefault();

		let carrito = document.getElementById('purchaseModal');
		carrito.classList.toggle("show-modal");
		
		let modalContent = document.getElementById('modal-content-p');
		modalContent.classList.toggle("form-e");
	}

	return(
	<div class="modal" id="purchaseModal">
		<form id="modal-content-p" class>
			<a href="#" className="m-close" onClick={toggleCartf}><span className="icon-cross"></span></a>
			<h4 className="m-title">list of products redeemed</h4>

			<div className="m-product bor-bot">
				<picture>
					<source srcSet="assets/images/product-pics/AcerAspire-x2.png" media="(min-width: 600px)" />
					<img src="assets/images/product-pics/AcerAspire-x1.png" />
				</picture>
				<div className="m-info-product">
					<h5>Phones</h5>
					<h4 className="m-p-name">iPhone 8</h4>
					<div className="pb-price">
						<h5>12.000</h5>
						<img src="assets/images/icons/coin.svg" />
					</div>

				</div>
			</div>

			<div className="m-product bor-bot">
				<picture>
					<source srcSet="assets/images/product-pics/AcerAspire-x2.png" media="(min-width: 600px)" />
					<img src="assets/images/product-pics/AcerAspire-x1.png" />
				</picture>
				<div className="m-info-product">
					<h5>Phones</h5>
					<h4 className="m-p-name">iPhone 8</h4>
					<div className="pb-price">
						<h5>12.000</h5>
						<img src="assets/images/icons/coin.svg" />
					</div>

				</div>
			</div>

			<div className="m-product bor-bot">
				<picture>
					<source srcSet="assets/images/product-pics/AcerAspire-x2.png" media="(min-width: 600px)" />
					<img src="assets/images/product-pics/AcerAspire-x1.png" />
				</picture>
				<div className="m-info-product">
					<h5>Phones</h5>
					<h4 className="m-p-name">iPhone 8</h4>
					<div className="pb-price">
						<h5>12.000</h5>
						<img src="assets/images/icons/coin.svg" />
					</div>

				</div>
			</div>

			<div className="m-product bor-bot">
				<picture>
					<source srcSet="assets/images/product-pics/AcerAspire-x2.png" media="(min-width: 600px)" />
					<img src="assets/images/product-pics/AcerAspire-x1.png" />
				</picture>
				<div className="m-info-product">
					<h5>Phones</h5>
					<h4 className="m-p-name">iPhone 8</h4>
					<div className="pb-price">
						<h5>12.000</h5>
						<img src="assets/images/icons/coin.svg" />
					</div>

				</div>
			</div>
		</form>
	</div>
	)
}

export default Purchases;<file_sep>/src/components/Main-bar.js
import React from 'react';

const MainBar = (props) => {
	let objSize = props.paginacion.cantidadProdus;
	let artPosicion = props.paginacion.productosPorPag * props.paginacion.pagActual;
	var pagActual =  props.paginacion.pagActual;

	const paginacionBarMas = (e) => {
		e.preventDefault();


		if(objSize != artPosicion){
			var pagEnBar = pagActual + 1;

			props.obtenerProductos(pagEnBar);		
		}
	}

	const paginacionBarMenos = (e) => {
		e.preventDefault();

		if(pagActual != 1){
			var pagEnBar = pagActual - 1;

			props.obtenerProductos(pagEnBar);			
		}
	}
	
	const ordenarPorReciente = (e) => {
		e.preventDefault();

		props.ordenadoPor(1);
		props.obtenerProductos();
	}
	
	const ordenarPorMenorPrecio = (e) => {
		e.preventDefault();

		props.ordenadoPor(2);
		props.obtenerProductos();
	}

	const ordenarPorMayorPrecio = (e) => {
		e.preventDefault();

		props.ordenadoPor(3);
		props.obtenerProductos();
	}
	
	const ordenarProductos = (e) => {
		e.preventDefault();

		let orden = e.target.value;

		if(orden == "reciente"){
			props.ordenadoPor(1);
		}else if(orden == "porMenor"){
			props.ordenadoPor(2);
		}else{
			props.ordenadoPor(3);
		}

		props.obtenerProductos();
	}
	return(
		<div>
			<div className="m-bar">

				<div className="m-bar-content">
					<h2 className="n-products">
						{artPosicion} of {objSize} products
				<div class="arrows-cont">
					<a href="#" className="arrow-cont arrow-resp" onClick={paginacionBarMenos}>
						<span className="icon-keyboard_arrow_left arrow-icon"></span>
					</a>
					<a href="#" className="arrow-cont arrow-resp" onClick={paginacionBarMas}>
						<span className="icon-keyboard_arrow_right arrow-icon"></span>
					</a>
				</div>
					</h2>

					<hr />

					<ul>
						<li className="p-sort">Sort by:</li>
						<select id="sort" onChange={ordenarProductos}>
							<option value="reciente" id="reciente">Most recent</option>
							<option value="porMenor" id="porMenor">Lowest price</option>
							<option value="porMayor" id="porMayor">Highest price</option>
						</select>

					</ul>

				</div>
				<div class="arrows-cont">
					<a href="#" className="arrow-cont" onClick={paginacionBarMenos}>
						<span className="icon-keyboard_arrow_left arrow-icon"></span>
					</a>
					<a href="#" className="arrow-cont" onClick={paginacionBarMas}>
						<span className="icon-keyboard_arrow_right arrow-icon"></span>
					</a>
				</div>
			</div>

			<hr className="gray-line" />
		</div>
	)
}

export default MainBar;<file_sep>/src/components/Cart.js
import React, { Component } from 'react';


const Cart = (props) => {

	const toggleCartf = (e) => {
		e.preventDefault();

		let carrito = document.getElementById('purchaseModal');
		carrito.classList.toggle("show-modal");

		let modalContent = document.getElementById('modal-content-p');
		
		modalContent.classList.toggle("form-e");
	}

	return(
		<a href="#" className="carrito-btn" onClick={toggleCartf}>
			<img src="assets/images/icons/buy-gray.svg" />
		</a>
	)
}

export default Cart;<file_sep>/src/components/Article.js
import React, { Component } from 'react';

const Article = (props) => {

	const toggleCartf = (e) => {
		e.preventDefault();

		let carrito = document.getElementById('redeemModal');
		carrito.classList.toggle("show-modal");

		let modalContent = document.getElementById('modal-content-r');

		modalContent.classList.toggle("form-e");


		const product = props.infoProductos;
		props.renderRedeem(product)
	}



	if(props.infoProductos.cost > props.infoUsuarios.points){
		return(
			<a href="#">
				<article>
					<div class="btn miss-coin">
						You need { props.infoProductos.cost - props.infoUsuarios.points }+ <img src="assets/images/icons/coin.svg" />
					</div>
					<picture>
						<source srcSet={props.infoProductos.img.hdUrl} media="(min-width: 600px)" />
						<img src={props.infoProductos.img.url} />
					</picture>

					<hr class="gray-line" />

					<h5>{props.infoProductos.category}</h5>
					<h4>{props.infoProductos.name}</h4>
				</article>
			</a>
		)
	}else{
		return(
			<a href="#">
				<article>
					<div className="buy-icon">
						<img src="assets/images/icons/buy-blue.svg" />
				</div>
					<picture>
						<source srcSet={props.infoProductos.img.hdUrl} media="(min-width: 600px)" />
						<img src={props.infoProductos.img.url} />
					</picture>

					<hr className="gray-line" />

					<h5>{props.infoProductos.category}</h5>
					<h4>{props.infoProductos.name}</h4>
					<div className="info-hover">
						<div className="buy-icon-hover">
							<img src="assets/images/icons/buy-white.svg" />
						</div>
						<div className="price">
							<h3>{props.infoProductos.cost}</h3>
							<img src="assets/images/icons/coin.svg" />
						</div>
						<a href="#" className="redeem" onClick={toggleCartf}>Redeem now</a>
					</div>
			</article>
		</a>
	)
	}
}

export default Article;<file_sep>/src/components/article/ArticlePay.js
import React, { Component } from 'react';

const ArticlePay = (props) => {

	return(
		<a href="#">
			<article>
				<div className="buy-icon">
					<img src="assets/images/icons/buy-blue.svg" />
				</div>
				<picture>
					<source srcSet={props.infoProductos.img.hdUrl} media="(min-width: 600px)" />
					<img src={props.infoProductos.img.url} />
				</picture>

				<hr className="gray-line" />
				
				<h5>{props.infoProductos.category}</h5>
				<h4>{props.infoProductos.name}</h4>
				<div className="info-hover">
					<div className="buy-icon-hover">
						<img src="assets/images/icons/buy-white.svg" />
					</div>
					<div className="price">
						<h3>{props.infoProductos.cost}</h3>
						<img src="assets/images/icons/coin.svg" />
					</div>
					<a href="#" className="redeem">Redeem now</a>
				</div>
			</article>
		</a>
	)
}

export default ArticlePay;<file_sep>/src/components/article/ArticleNeed.js
import React, { Component } from 'react';

const ArticleNeed = (props) => {

	return(
		<a href="#">
			<article>
				<div class="btn miss-coin">
					You need 1000 <img src="assets/images/icons/coin.svg" />
				</div>
				<picture>
					<source srcSet={props.infoProductos.img.hdUrl} media="(min-width: 600px)" />
					<img src={props.infoProductos.img.url} />
				</picture>

				<hr class="gray-line" />
				
				<h5>{props.infoProductos.category}</h5>
				<h4>{props.infoProductos.name}</h4>
			</article>
		</a>
	)
}

export default ArticleNeed;