Skip to content

Instantly share code, notes, and snippets.

@Jessica7

Jessica7/app.js

Created June 14, 2016 14:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jessica7/39ec88069e4379c590df9bee6a102a27 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jessica7/39ec88069e4379c590df9bee6a102a27 to your computer and use it in GitHub Desktop.
Download ZIP
app
Raw
app.js
import React from 'react';
import Header from '../components/Header';
import Sidebar from '../components/Sidebar';
import FilterBar from '../components/FilterBar';
import DataView from '../components/DataView';
import imgProduct from './images/01.jpg';
import './style.sass';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as productsActions from '../actions/products';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
products : [
{
name: 'socks',
category: 'acessories',
sales: 'no',
bestSelling:'yes',
brand: 'gonew',
color: 'yellow',
imgProduct: `${imgProduct}`,
title: 'Socks TÊNIS NIKE FREE 5.0 TR FLYKNIT FEMININO',
subtitle: 'Tênis Feminino Para Treinar Feminino',
priceCash: 250.00,
priceCard: 44.99,
installments: '10x',
tagRelease: 'Release',
tagSale: 'Sale',
detail: 'Conheça o Tênis Nike Futslide SL Masculino e conforto ao caminhar. Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu!'
},
{
name: 'socks Shoes',
category: 'acessories',
sale:'yes',
bestSelling:'no',
brand: 'adidas',
color: 'blue',
imgProduct: `${imgProduct}`,
title: 'Socks SHOES NIKE FREE 5.0 TR FLYKNIT FEMININO',
subtitle: 'aaaTênis Feminino Para Treinar Feminino',
priceCash: 340.00,
priceCard: 44.99,
installments: '10x',
tagRelease: 'Release',
tagSale: 'Sale',
detail: 'Conheça o Tênis Nike Futslide SL Masculino e conforto ao caminhar. Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu!'
},
{
name: 'bag',
category: 'bag',
sale:'yes',
bestSelling:'no',
brand: 'nike',
color: 'pink',
imgProduct: `${imgProduct}`,
title: 'Bag TÊNIS NIKE FREE 5.0 TR FLYKNIT FEMININO',
subtitle: 'Tênis Feminino Para Treinar Feminino',
priceCash: 180.00,
priceCard: 44.99,
installments: '10x',
tagRelease: 'Release',
tagSale: 'Sale',
detail: 'Conheça o Tênis Nike Futslide SL Masculino e conforto ao caminhar. Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu! Aproveite a oferta e compre o seu!'
}
],
categories: [
'bag',
'jelewery',
'acessories',
'sales'
],
brands: [
'nike',
'adidas',
'gonew',
'macboot'
],
colors: [
{name: 'yellow', rgb:'#FFFF00'},
{name: 'blue', rgb: '#0000FF'},
{name: 'pink', rgb: '#FF3E96'},
{name: 'red', rgb: '#FF0000'}
],
active: 'card',
checkedFilter: 'active',
sortedBy : ['lowest price', 'biggest price'],
optionFilterMenu : ['Best-selling', 'Sales']
};
this.searchValue = this.searchValue.bind(this);
this.setViewMode = this.setViewMode.bind(this);
this.setCheckedProduct = this.setCheckedProduct.bind(this);
this.setSortedProduct = this.setSortedProduct.bind(this);
this.setFilterMenu = this.setFilterMenu.bind(this);
}
componentWillMount() {
const { products } = this.state;
const { productsActions } = this.props;
this.props.productsActions.inject(products);
};
setViewMode(viewType) {
this.setState({ ...this.state.active, active: viewType });
}
setFilterMenu(optionMenu) {
}
setSortedProduct(selectedProduct) {
this.props.productsActions.filterPrice(selectedProduct);
this.forceUpdate();
}
setCheckedProduct(checkedProduct) {
this.props.productsActions.filterCategory(checkedProduct);
}
searchValue(str) {
let strSearch = str.search.replace(/[\W_]/g, '').toLowerCase();
let rules = ['name','category'];
let result = this.state.products.filter((product) => {
return rules.some((searchRule) => {
return product[searchRule].search(strSearch) >= 0 ? product.name : false;
});
});
this.setState({ ...this.state.filter, filter: result });
}
render() {
const {
active,
sortedBy,
checkedFilter,
brands,
categories,
colors,
optionFilterMenu
} = this.state;
const { products, filterCat } = this.props;
console.log(filterCat);
//console.log('fitle category', filterCat);
return (
<div className="app">
<Header searchValue={this.searchValue} />
<main>
<div className="container">
<FilterBar setViewMode={this.setViewMode} active={active}
sortedValue={sortedBy} setSortedProduct={this.setSortedProduct}
optionFilterMenu={optionFilterMenu} setFilterMenu={this.setFilterMenu} />
<Sidebar categories={categories} setChecked={this.setCheckedFilter}
checked={checkedFilter} brands={brands} colors={colors}
setCheckedProduct={this.setCheckedProduct} />
<div className="wrapper-main">
<DataView view={active} products={products} />
</div>
</div>
</main>
</div>
);
}
};
const mapStateToProps = (state) => {
return {
products: state.products.items,
filterCat: state.products.allChecked
};
};
const mapDispatchToProps = (dispatch) => {
return {
productsActions: bindActionCreators(productsActions, dispatch)
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment