Skip to content

Commit

Permalink
indentation size changed from 4 to 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashokdey
ashokdey committed Aug 6, 2017
1 parent 473026f commit 6b84ad4
Show file tree
Hide file tree
Showing 9 changed files with 451 additions and 458 deletions.
6 changes: 3 additions & 3 deletions client/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, {Component} from 'react';

const Footer = () => (
<footer className="footer text-center">
Copyrights &copy; {new Date().getFullYear() } || ReactUniversal ShoppingApp
</footer>
<footer className="footer text-center">
Copyrights &copy; {new Date().getFullYear() } || ReactUniversal ShoppingApp
</footer>
)

export default Footer;
32 changes: 15 additions & 17 deletions client/components/Main.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,34 @@
import React, {Component} from 'react';
import Navigation from 'Navigation';
import Footer from 'Footer';

import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getCart} from 'cartActions';



class Main extends Component {
render() {
return(
<div>
<Navigation cartItems={this.props.totalQuantity} />
{this.props.children}
<Footer />
</div>
);
}
render() {
return(
<div>
<Navigation cartItems={this.props.totalQuantity} />
{this.props.children}
<Footer />
</div>
);
}
}


function mapStateToProps(state) {
return {
totalQuantity: state.cart.totalQuantity
}
return {
totalQuantity: state.cart.totalQuantity
}
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
getCart
}, dispatch);
return bindActionCreators({
getCart
}, dispatch);
}

export default connect(mapStateToProps)(Main);
78 changes: 39 additions & 39 deletions client/components/Slider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,45 @@ import {Carousel} from 'react-bootstrap';

class Slider extends Component {
render() {
return(
<Carousel style={{ marginTop: '50px'}}>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/1.jpg"/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/2.jpg"/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/3.jpg"/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/4.jpg"/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/5.jpg"/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
return(
<Carousel style={{ marginTop: '50px'}}>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/1.jpg"/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/2.jpg"/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/3.jpg"/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/4.jpg"/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img width={1000} height={500} alt="900x500" src="/static/images/slider/5.jpg"/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
}

Expand Down
6 changes: 3 additions & 3 deletions client/components/pages/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, {Component} from 'react';

const About = () => (
<div>
<h1>About</h1>
</div>
<div>
<h1>About</h1>
</div>
);

export default About;
171 changes: 84 additions & 87 deletions client/components/pages/Book.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,115 +4,112 @@ import React, {Component} from 'react';
* store and makeit available in our local component
*/
import {connect} from 'react-redux';

import {bindActionCreators} from 'redux';

// import dispatch action 'addToCart from cartActions
import {addToCart, updateCart} from 'cartActions';

// import the style components
import {Row, Col, Well, Button, Image} from 'react-bootstrap';

// create the Book component to display single book
class Book extends Component{
constructor(props){
super(props);
this.state = {
readMore: false
}
constructor(props){
super(props);
this.state = {
readMore: false
}
}

// custom method to handle the readMore link in the book description
_handleReadMore() {
this.setState({
readMore: !this.state.readMore
});
}
// custom method to handle the readMore link in the book description
_handleReadMore() {
this.setState({
readMore: !this.state.readMore
});
}

// custom function to call the 'addToCart()' action
_handleBuy() {
/**
* Create a book array
* this array will hold the items previously in the cart
* and add the current book in the cart as well
*/
// cartBook is the book to be added
const cartBook = {...this.props.book, quantity: 1};
//
const allBooks = [...this.props.cart, cartBook];
// check if cart is empty
if (this.props.cart.length > 0) {
// if the cart is not ampty check if it already contains the similar item
let _id = this.props.book._id;
let itemInCart = this.props.cart.findIndex((item) => item._id == _id);
// custom function to call the 'addToCart()' action
_handleBuy() {
/**
* Create a book array
* this array will hold the items previously in the cart
* and add the current book in the cart as well
*/
// cartBook is the book to be added
const cartBook = {...this.props.book, quantity: 1};
//
const allBooks = [...this.props.cart, cartBook];

// check if cart is empty
if (this.props.cart.length > 0) {
// if the cart is not ampty check if it already contains the similar item
let _id = this.props.book._id;
let itemInCart = this.props.cart.findIndex((item) => item._id == _id);

/**
* if itemInCart is -1 which means there are no items similar to this
* simple add the item in the cart
*/
/**
* if itemInCart is -1 which means there are no items similar to this
* simple add the item in the cart
*/

if(itemInCart == -1) {
this.props.addToCart(allBooks);
}
else {
this.props.updateCart(_id, 1, this.props.cart);
}
}
else {
// if the cart is empty then add the item to the cart
this.props.addToCart(allBooks);
}
if(itemInCart == -1) {
this.props.addToCart(allBooks);
}
else {
this.props.updateCart(_id, 1, this.props.cart);
}
}
else {
// if the cart is empty then add the item to the cart
this.props.addToCart(allBooks);
}
}

render() {
return(
<Well style={{maxHeight: '350px', minHeight: '350px'}}>
<Row>
<Col xs={12} sm={6}>
<Image src={this.props.book.image} responsive/>
</Col>
<Col xs={12} sm={6} md={6}>
<h2>{this.props.book.title}</h2>
{/*
conditionally render the description,
initially only show 50 chars
*/}
<p>
{
(this.props.book.description.length > 50 && this.state.readMore == false)
?(this.props.book.description.substring(0, 40))
:(this.props.book.description)
}
render() {
return(
<Well style={{maxHeight: '350px', minHeight: '350px'}}>
<Row>
<Col xs={12} sm={6}>
<Image src={this.props.book.image} responsive/>
</Col>
<Col xs={12} sm={6} md={6}>
<h2>{this.props.book.title}</h2>
{/*
conditionally render the description,
initially only show 50 chars
*/}
<p>
{
(this.props.book.description.length > 50 && this.state.readMore == false)
?(this.props.book.description.substring(0, 40))
:(this.props.book.description)
}

<button className="read-more-btn" onClick={this._handleReadMore.bind(this)}>
{
(this.state.readMore == false
&& this.props.book.description !== null
&& this.props.book.description.length > 40 )?('read more...'):('read less...')
}
</button>
</p>
<h3>Rs. {this.props.book.price}</h3>
<Button onClick={this._handleBuy.bind(this)} bsStyle="primary">Buy Now</Button>
</Col>
</Row>
</Well>
);
}
<button className="read-more-btn" onClick={this._handleReadMore.bind(this)}>
{
(this.state.readMore == false
&& this.props.book.description !== null
&& this.props.book.description.length > 40 )?('read more...'):('read less...')
}
</button>
</p>
<h3>Rs. {this.props.book.price}</h3>
<Button onClick={this._handleBuy.bind(this)} bsStyle="primary">Buy Now</Button>
</Col>
</Row>
</Well>
);
}
}

function mapStateToProps(state) {
return {
cart: state.cart.cart
}
return {
cart: state.cart.cart
}
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
addToCart: addToCart,
updateCart: updateCart
},dispatch);
return bindActionCreators({
addToCart: addToCart,
updateCart: updateCart
},dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Book);
Loading

0 comments on commit 6b84ad4

Please sign in to comment.