node_modules/

import React from 'react';

import ReactDOM from 'react-dom';

import { Router,Route,IndexRoute,hashHistory } from 'react-router';

import Layout from './components/common.comp';

import HomeComponent from './components/home.comp';

import ClientComponent from './components/client.comp.jsx';

import ContactComponent from './components/contact.comp.jsx';

import ServiceComponent from './components/service.comp.jsx';

import GetPrice from './components/product.comp';

import DLComponent from './components/driveLicence.comp';

<Router history={hashHistory}>

<Route path="/" component={Layout} >

<IndexRoute component={HomeComponent}/>

<Route path="/services" components={ServiceComponent}>

<Route path="/services/Driver's Licence Check" component={DLComponent}/>

</Route>

<Route path="/services/:doc" component={GetPrice} />

<Route path="/client" component={ClientComponent}/>

<Route path="/contact" component={ContactComponent}/>

</Route>

</Router>,

document.getElementById('app')

import {Alert} from 'react-bootstrap';

import React from 'react';

class MyAlert extends React.Component{

render() {

return(

<Alert bsStyle="info">

<strong>Reminder..</strong> Some information will be here

</Alert>

)

}

export default MyAlert;

import React from 'react';

import ReactDOM from 'react-dom';

import { hashHistory } from 'react-router';

import { Panel,Button,ListGroup,ListGroupItem,Badge ,Modal,Table,InputGroup} from 'react-bootstrap';

class Cart extends React.Component{

constructor(props){

super(props)

this.state = {

cart:{

items: props.cartData.items,

totalPrice: props.cartData.totalPrice

},

showCart: false

}

this.show = this.show.bind(this);

this.hideCart = this.hideCart.bind(this);

this.addMoreDoc = this.addMoreDoc.bind(this);

this.edit = this.edit.bind(this);

this.test = this.test.bind(this);

}

addMoreDoc(event){

event.stopPropagation();

hashHistory.push('/services');

}

show(){

this.setState({

showCart: true

});

console.log(this.state.cart);

}

hideCart(){

this.setState({

showCart:false

})

}

test(e){

e.stopPropagation();

hashHistory.push('/');

localStorage.clear();

}

delete(item){

const newState = this.state.cart.items;

if (newState.indexOf(item) > -1) {

newState.splice(newState.indexOf(item), 1);

this.setState({cart: {items: newState} })

localStorage.cart = JSON.stringify(this.state.cart.items);

}

}

edit(item,event){

const args = event.target.id.split(':');

const elementId = args[0];

const action = args[1];

let updatedCart = this.state.cart.items;

// let itemIndex = updatedCart.indexOf(item);

// let sumOfPrice = 0;

let currentQty = ReactDOM.findDOMNode(this.refs[elementId+':qty']);

if(action === 'add'){

currentQty.value = (parseInt(currentQty.value) + 1);

}else if(action === 'subs'){

if(parseInt(currentQty.value) <= 0){

return;

}

currentQty.value = (parseInt(currentQty.value) - 1);

}

}

componentWillReceiveProps(nextProps){

this.setState({

cart: nextProps.cartData,

});

console.log((nextProps.cartData));

}

render(){

const cartItemRow = this.state.cart.items.map((item) => {

return (

<tr key={item.id} id={item.id}>

<td>{item.id}</td>

<td>{item.doc}</td>

<td>{item.dir}</td>

<td>{item.lang}</td>

<td>

<InputGroup bsSize="small">

<InputGroup.Button>

<Button bsStyle="info" onClick={this.edit.bind(this,item)} id={'item-'+item.id+':add'}>+</Button>

</InputGroup.Button>

<input className="form-control" readOnly type="text" ref={'item-'+item.id+':qty'} defaultValue={item.extraCop}/>

<InputGroup.Button>

<Button bsStyle="info" onClick={this.edit.bind(this,item)} id={'item-'+item.id+':subs'}>-</Button>

</InputGroup.Button>

</InputGroup>

</td>

<td>${item.subTotal}</td>

<td><Button bsStyle="danger" onClick={this.delete.bind(this,item)} id={'btn-'+item.id}>remove</Button></td>

</tr>

)

});

return(

<div >

<Panel style={this.props.panelStyle.tab} header="Shopping Cart" bsStyle="info" >

<ListGroup fill>

<ListGroupItem><Button bsStyle="success" onClick={this.show} >ViewCart <Badge>{this.state.cart.items.length}</Badge></Button></ListGroupItem>

<ListGroupItem><Button onClick={this.test} >CheckOut</Button></ListGroupItem>

</ListGroup>

</Panel>

<Modal show={this.state.showCart} bsSize="large" onHide={this.hideCart}>

<Modal.Header closeButton>

<Modal.Title>Your Orders</Modal.Title>

</Modal.Header>

<Modal.Body>

<Table responsive>

<thead>

<tr>

<th>Id</th>

<th>Document</th>

<th>Direction</th>

<th>Language</th>

<th>Extra Copy</th>

<th>Sub-Total</th>

<th>Action</th>

</tr>

</thead>

<tbody>

{this.state.cart.items.length?cartItemRow :null}

<tr>

<td colSpan="6" className="text-right">Total Price $:</td>

<td >{this.state.cart.totalPrice}</td>

</tr>

</tbody>

</Table>

</Modal.Body>

<Modal.Footer>

<Button bsStyle="success" onClick={this.hideCart}>Close</Button>

<Button bsStyle="success" onClick={this.addMoreDoc}>Continue Shopping</Button>

</Modal.Footer>

</Modal>

</div>

);

}

export default Cart;

import React from 'react';

import store from 'cache-store';

class ClientComponent extends React.Component{

render() {

return (

<div><h1>Client</h1></div>

)

}

export default ClientComponent;

import React from 'react';

import { Link } from 'react-router';

class Layout extends React.Component{

render() {

return (

<div>

<nav className="navbar navbar-default navbar-transparent">

<div className="container-fluid">

<div className="navbar-header">

<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span className="sr-only">Toggle navigation</span>

<span className="icon-bar"></span>

<span className="icon-bar"></span>

<span className="icon-bar"></span>

</button>

<Link className="navbar-brand brand-name " to="/">Ethnolink</Link>

</div>

<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul className="nav navbar-nav menu">

<li>

<Link to="/services">Services</Link>

</li>

<li>

<Link to="/client">Client</Link>

</li>

<li>

<Link to="/contact">Contact</Link>

</li>

</ul>

</div>

</div>

</nav>

<div className="container">

{this.props.children}

</div>

</div>

);

}

export default Layout;

import React from 'react';

class ContactComponent extends React.Component{

render() {

return (

<div><h1>Contact</h1></div>

)

}

export default ContactComponent;