Add redux exercise

basic-react-redux/.babelrc

+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}
\ No newline at end of file

basic-react-redux/.gitignore

+node_modules
+dist
+.eslintrc.js
+
+
+
+
+
+

basic-react-redux/README.md

+# basic-react-redux-webpack4-boilerplate
+Basic React-Webpack4 boilerplate with file structure for React-Redux application (last update 13.03.2019).
+
+### Usage
+
+```
+git clone https://github.com/Lavitr/basic-react-redux-webpack4-boilerplate.git
+cd basic-react-redux-webpack4-boilerplate 
+npm install
+npm start
+open http://localhost:8080  (should start automatically )
+```
+
+### Available Commands
+
+```
+
+npm start - start the dev server
+npm run dev - create a developer build in `dist` folder
+npm run build - create a production ready build in `dist` folder
+npm test - run all tests
+
+```

basic-react-redux/package.json

+{
+  "name": "reduxasync",
+  "version": "1.0.0",
+  "description": "simple App Redux Async App",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --mode development --open",
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production"
+  },
+  "author": "Ron Lavit",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "redux-logger": "^3.0.6",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "3.7.2"
+  },
+  "dependencies": {
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0"
+  }
+}

basic-react-redux/productData.json

+{
+    "name": "smartPhone",
+    "description": "MOTOROLA MOBILE PHONE",
+    "variants": [
+      {
+        "name": "smartPhone",
+        "image": "./src/img/chivas.jpg",
+        "description": "MOTOROLA MOBILE PHONE ",
+        "sku": "113355",
+        "type": "1",
+        "price": 4.99,
+        "inventory": 10
+      },
+      {
+        "name": "NOKIA",
+        "image": "./src/img/images.jpeg",
+        "description": "SAMSUNG MOBILE PHONE",
+        "sku": "224466",
+        "type": "2",
+        "price": 12.99,
+        "inventory": 15
+      },
+      {
+        "name": "LG",
+        "image": "./src/img/LG.jpg",
+        "description": "IPHONE MOBILE PHONE",
+        "sku": "779900",
+        "type": "3",
+        "price": 34.99,
+        "inventory": 30
+      },
+      {
+        "name": "SUMSUNG",
+        "image": "./src/img/samsung.jpg",
+        "description": "HOLAS MOBILE PHONE",
+        "sku": "123123",
+        "type": "4",
+        "price": 21.99,
+        "inventory": 17
+      },
+      {
+        "name": "Digit",
+        "image": "./src/img/chivas.jpg",
+        "description": "MOTOROLA MOBILE PHONE",
+        "sku": "123456",
+        "type": "5",
+        "price": 60.99,
+        "inventory": 30
+      },
+      {
+        "name": "LG",
+        "image": "./src/img/LG.jpg",
+        "description": "IPHONE MOBILE PHONE",
+        "sku": "779900",
+        "type": "6",
+        "price": 34.99,
+        "inventory": 13
+      }
+    ]
+}
+  
\ No newline at end of file

basic-react-redux/src/actions/cart_actions.js

+export const addItemToCart = () => ({
+    type: "ADD_CART_ITEM"
+})
+
+
+export const removeCartItem = () => ({
+    type: "REMOVE_CART_ITEM"
+})

basic-react-redux/src/actions/index.js

+//This file contatins 'ACTION-CREATOR' functions 
+//In Redux, 'ACTION-CREATOR'  return an  ACTION(plain JavaScript object)
+
+//example of simple 'ACTION-CREATOR'
+
+export const sayHello = () => ({
+    type: "HELLO_REACT"
+})
+
+
+export const evenIncrement = () => ({
+    type: "EVEN_INCREMENT"
+})
+
+

basic-react-redux/src/actions/inventory_actions.js

+export const incrementInventory = (total) => ({
+    type: "INCREMENT_INVENTORY",
+    payload: total
+})
+
+
+export const decrementInventory = (total) => ({
+    type: "DECREMENT_INVENTORY",
+    payload: total
+})

basic-react-redux/src/components/App.js

+import React from 'react'
+import Button from '../containers/Button'
+import Cart from '../containers/Cart';
+
+
+let App = () => (
+  <div >
+    <Button />
+    <Cart />
+  </div>
+
+)
+
+export default App;
+

basic-react-redux/src/containers/Button.js

+import React from 'react'
+import { connect } from 'react-redux'
+import { sayHello, evenIncrement } from '../actions'
+import { addItemToCart, removeCartItem } from '../actions/cart_actions'
+
+
+let Button = ({ whatsUp, stateObject, saySomething, evenNumsOnly, count=0, addItemToCart, removeCartItem, data}) => (
+
+
+
+
+  <div >
+    <button onClick={saySomething}>PRESS TO DISPATCH FIRST ACTION</button>
+    <h2>{whatsUp}</h2>
+    <button onClick={() => console.log('Redux State:',stateObject)} >Press to inspect STATE in console panel</button>
+    <button onClick={evenNumsOnly}>click me</button>
+    <p>Even Count: {count}</p>
+
+
+  </div>
+
+
+
+)
+
+const mapStateToProps = (state) => ({
+  stateObject: state,
+  whatsUp: state.say,
+  count: state.count,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  saySomething: () => { dispatch(sayHello())},
+  evenNumsOnly: () => { dispatch(evenIncrement())},
+})
+
+Button = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Button)
+
+export default Button;

basic-react-redux/src/containers/Cart.js

+import React from 'react';
+import { connect } from 'react-redux';
+import { addItemToCart, removeCartItem } from '../actions/cart_actions';
+import { incrementInventory, decrementInventory } from '../actions/inventory_actions';
+
+
+
+let Cart = ({addItemToCart, removeCartItem, data, cartTotal }) => {
+    
+    const checkTotal = () => {
+        if (cartTotal <= 0) {
+            return;
+        } else {
+            removeCartItem();
+        }
+    }
+
+    const updateInventory = () => {
+
+    }
+
+
+    const products = data.variants.map((product, key) => 
+        <div key={key}>
+            <ul>
+                <img src={product.image}></img>
+                <p>{product.name}</p>
+                <p>{product.desciption}</p>
+                {/* <button onClick={() => addItemToCart(product)}>Add to cart</button> */}
+                <button onClick={addItemToCart}>Add to cart</button>
+                <button onClick={checkTotal}>Remove item</button>
+            </ul>
+        </div>
+    )
+
+    // debugger
+
+    return (
+        <div>
+            <h3>CART</h3>
+            <h4>Cart Total: {cartTotal}</h4>
+            <div>{products}</div>
+        </div>
+    )
+    
+}
+
+
+const mapSTP = (state) => {
+    console.log(state)
+    const { cartReducer, inventoryReducer } = state;
+    return {
+        data: cartReducer.data,
+        cartTotal: cartReducer.cartTotal,
+        productTotal: inventoryReducer.productTotal
+    }
+}
+
+
+
+const mapDTP = (dispatch) => ({
+    addItemToCart: () => { dispatch(addItemToCart()) },
+    removeCartItem: () => { dispatch(removeCartItem()) },
+    incrementInventory: (total) => { dispatch(incrementInventory(total)) },
+    decrementInventory: (total) => { dispatch(decrementInventory(total)) }
+})
+
+
+Cart = connect(mapSTP, mapDTP)(Cart)
+
+export default Cart;
\ No newline at end of file

basic-react-redux/src/css/styles.css

+* {
+    box-sizing: border-box;
+}
+body{
+    background-color: beige;
+}

basic-react-redux/src/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>React HTML template</title>
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>

basic-react-redux/src/index.js

+import React from 'react'
+import { render } from 'react-dom'
+import { createStore, applyMiddleware } from 'redux'
+import { Provider } from 'react-redux'
+// import reducer from './reducers/index'
+import './css/styles.css'
+import App from "./components/App"
+import logger from "redux-logger"
+import rootReducer from './reducers/root_reducer';
+
+
+const store = createStore(rootReducer, applyMiddleware(logger))
+// const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)
+

basic-react-redux/src/reducers/cart_reducer.js

+import productData from '../../productData.json';
+
+const initialState = {
+    data: productData,
+    cartTotal: 0,
+
+}
+
+const cartReducer = (state = initialState, action) => {
+
+    switch (action.type) {
+      case 'ADD_CART_ITEM':
+          return { ...state, cartTotal :  state.cartTotal + 1};
+      case 'REMOVE_CART_ITEM':
+          return { ...state, cartTotal : state.cartTotal - 1 };
+      default:
+        return state;
+    }
+    
+  };
+  
+  export default cartReducer;
+  
\ No newline at end of file

basic-react-redux/src/reducers/index.js

+import productData from '../../productData.json';
+
+
+const demoReducer = (state = { count: 0, data: productData }, action) => {
+
+  console.log('initial state', productData)
+  
+    switch (action.type) {
+      case 'HELLO_REACT':
+        return { ...state, say : 'Hello World Redux'  };
+      case 'EVEN_INCREMENT':
+        return { ...state, count : state.count + 2 };
+      case 'ADD_CART_ITEM':
+        if (state.name === 'smartPhone') {
+          return { ...state, data :  state.inventory + 1};
+        }
+      case 'REMOVE_CART_ITEM':
+          return { ...state, data : state.inventory - 1 };
+      default:
+        return state;
+    }
+    
+  };
+  
+  export default demoReducer;
+  
\ No newline at end of file

basic-react-redux/src/reducers/inventory_reducer.js

+import productData from '../../productData.json';
+
+const initialState = {
+    total: productData,
+}
+
+const inventoryReducer = (state = initialState, action) => {
+
+    console.log('data', action)
+
+    switch (action.type) {
+      case 'INCREMENT_INVENTORY':
+          return { ...state, total :  state.inventory + 1};
+      case 'DECREMENT_INVENTORY':
+          return { ...state, total : state.inventory - 1 };
+      default:
+        return state;
+    }
+    
+  };
+  
+  export default inventoryReducer;
\ No newline at end of file

basic-react-redux/src/reducers/root_reducer.js

+import { combineReducers } from 'redux';
+import demoReducer from './index';
+import cartReducer from './cart_reducer';
+import inventoryReducer from './inventory_reducer';
+
+const rootReducer = combineReducers ({
+    demoReducer,
+    cartReducer,
+    inventoryReducer
+})
+
+
+export default rootReducer;
\ No newline at end of file

basic-react-redux/webpack.config.js

+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "./src/index.html",  
+        })
+    ],
+    devtool: 'inline-source-map',
+    module: {
+        rules: [
+            { test: /\.css$/, use:['style-loader', 'css-loader']},
+            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
+            {
+                test: /\.html$/,
+                use: [
+                  {
+                    loader: "html-loader",
+                    options: { minimize: true }
+                  }
+                ]
+              }
+        ]
+    }
+};
+
+
+
+
+
+

package-lock.json

+{
+  "name": "redux-btn",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

package.json

+{}