Added redux to our components

Author: codingphase

package.json

@@ -34,6 +34,7 @@
     "@babel/plugin-proposal-decorators": "^7.1.6",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-async-to-generator": "^7.1.0",
+    "redux": "^4.0.1",
     "uglify-es": "^3.3.9",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack-dev-server": "^3.1.14"
@@ -67,7 +68,7 @@
     "prettier-loader": "^2.1.1",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
-    "react-redux": "^5.1.0",
+    "react-redux": "^5.1.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.25.1",

public/js/dist/CartComponents.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import allReducers from './reducers/allReducers';
+import CartBtn from './components/CartBtn';
+import CartPopup from './components/CartPopup';
+
+const store = createStore(allReducers);
+
+ReactDOM.render(
+	<Provider store={store}>
+		<CartBtn />
+	</Provider>,
+	document.getElementById('CartBtnRoot')
+);
+ReactDOM.render(
+	<Provider store={store}>
+		<CartPopup />
+	</Provider>,
+	document.getElementById('CartPopupRoot')
+);

public/js/dist/CartPopup.js

@@ -0,0 +1,11 @@
+export const openingCart = () => {
+	return {
+		type: 'OPEN_CART'
+	};
+};
+
+export const closingCart = () => {
+	return {
+		type: 'CLOSE_CART'
+	};
+};

public/js/dist/CartBtn.js renamed to public/js/dist/ProductAddToCart.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { openingCart } from '../actions/allActions';
+
+class CartBtn extends Component {
+	constructor() {
+		super();
+		this.state = {
+			name: 'Joe'
+		};
+	}
+	clickedBtn = () => {};
+	async test() {}
+	render() {
+		return (
+			<a href="#" className="cart-link" onClick={this.props.openingCart}>
+				Cart<div>4</div>
+			</a>
+		);
+	}
+}
+
+const mapStateToProps = state => {
+	console.log(state);
+	return state;
+};
+
+export default connect(
+	mapStateToProps,
+	{
+		openingCart
+	}
+)(CartBtn);

resources/assets/js/CartBtn.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import { closingCart } from '../actions/allActions';
 
 class CartPopup extends Component {
 	constructor() {
@@ -8,11 +9,25 @@ class CartPopup extends Component {
 			name: 'Joe'
 		};
 	}
-	clickedBtn = () => {};
-	async test() {}
+	componentDidUpdate() {
+		if (this.props.globalState.popupCartOpen == true) {
+			console.log(this.props.globalState.popupCartOpen);
+			const cartPopupElement = document.getElementById('cart-popup');
+			document.addEventListener('click', event => {
+				var clickedInside = cartPopupElement.contains(event.target);
+				if (clickedInside) {
+				} else {
+					this.props.closingCart();
+				}
+			});
+		}
+	}
 	render() {
 		return (
-			<section id="cart-popup" className="active">
+			<section
+				id="cart-popup"
+				className={this.props.globalState.popupCartOpen == true ? 'active' : ''}
+			>
 				<div className="cart-title">
 					<div className="title">My Cart</div>
 				</div>
@@ -103,6 +118,13 @@ class CartPopup extends Component {
 	}
 }
 
-const CartPopupRoot = document.getElementById('CartPopupRoot');
+const mapStateToProps = state => {
+	return state;
+};
 
-ReactDOM.render(<CartPopup />, CartPopupRoot);
+export default connect(
+	mapStateToProps,
+	{
+		closingCart
+	}
+)(CartPopup);

resources/assets/js/CartComponents.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class ProductAddToCart extends Component {
+	constructor() {
+		super();
+		this.state = {
+			selectedSize: '',
+			sizes: [
+				4,
+				4.5,
+				5,
+				5.5,
+				6,
+				6.5,
+				7,
+				7.5,
+				8,
+				8.5,
+				9,
+				9.5,
+				10,
+				10.5,
+				11,
+				11.5,
+				12,
+				12.5
+			]
+		};
+	}
+	showAllSizes = () => {
+		return this.state.sizes.map(size => {
+			return (
+				<div
+					key={size}
+					className={`option ${
+						this.state.selectedSize == size ? 'selected' : ''
+					}`}
+					onClick={this.clickedSize.bind(null, size)}
+				>
+					{size}
+				</div>
+			);
+		});
+	};
+	clickedSize = selectedSize => {
+		this.setState(
+			{
+				selectedSize
+			},
+			() => {
+				console.log(this.state);
+			}
+		);
+	};
+	clickedAddToCartBtn = () => {
+		if (this.state.selectedSize !== '') {
+			console.log(`Added Product Size ${this.state.selectedSize}`);
+		} else {
+			console.log(`sorry need to add a size`);
+		}
+	};
+	render() {
+		return (
+			<div className="add-to-cart">
+				<div className="detail-section">
+					<div className="detail">
+						<input type="checkbox" id="size-dropdown" className="toggle" />
+						<label className="title size-title" htmlFor="size-dropdown">
+							Size
+						</label>
+						<div className="content">
+							<div className="sizes">{this.showAllSizes()}</div>
+						</div>
+					</div>
+				</div>
+				<div className="button-area">
+					<div className="button" onClick={this.clickedAddToCartBtn}>
+						Add to cart
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+ReactDOM.render(
+	<ProductAddToCart />,
+	document.getElementById('ProductAddToCartRoot')
+);

resources/assets/js/CartProvider.js

@@ -0,0 +1,4 @@
+import { combineReducers } from 'redux';
+import { appStateReducer } from './appStateReducer';
+
+export default combineReducers({ globalState: appStateReducer });

resources/assets/js/actions/allActions.js

@@ -0,0 +1,26 @@
+const initialState = {
+	popupCartOpen: false
+};
+
+let newState;
+
+export const appStateReducer = (state = initialState, action) => {
+	switch (action.type) {
+		case 'OPEN_CART':
+			newState = Object.assign({}, state, {
+				popupCartOpen: true
+			});
+			return newState;
+			break;
+		case 'CLOSE_CART':
+			newState = Object.assign({}, state, {
+				popupCartOpen: false
+			});
+			return newState;
+			break;
+
+		default:
+			return state;
+			break;
+	}
+};

resources/assets/js/components/CartBtn.js

@@ -29,10 +29,9 @@
 
 
 
-  
-  @!section('javascript')
   <script src="/js/dist/vendors.js"></script>
-  <script src="/js/dist/CartBtn.js"></script>
-  <script src="/js/dist/CartPopup.js"></script>
+  @!section('javascript')
+  
+  <script src="/js/dist/CartComponents.js"></script>
 </body>
 </html>