add cart and inventory file

basic-react-redux-webpack4-boilerplate-master/.babelrc

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

basic-react-redux-webpack4-boilerplate-master/.gitignore

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

basic-react-redux-webpack4-boilerplate-master/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-webpack4-boilerplate-master/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-webpack4-boilerplate-master/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 increment = () => ({
+    type: "INCREMENT"
+})
+
+export const decrement = () => ({
+    type: "DECREMENT"
+})
+
+export const addToCart = (phone) => ({
+    type: "ADDTOCART",
+    phone
+})

basic-react-redux-webpack4-boilerplate-master/src/components/App.js

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

basic-react-redux-webpack4-boilerplate-master/src/containers/Button.js

+import React from 'react'
+import { connect } from 'react-redux'
+import { increment, decrement} from '../actions'
+
+let Button = ({ count, increment, decrement}) => (
+
+  <div >
+    <h1>Counter: {count}</h1>
+    <button onClick={increment}>Increment</button>
+    <button onClick={decrement}>decrement</button>
+  </div>
+
+)
+
+const mapStateToProps = (state) => ({
+  count: state.count,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  increment: () => {dispatch(increment())},
+  decrement: () => {dispatch(decrement())},
+})
+
+Button = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Button)
+
+export default Button;

basic-react-redux-webpack4-boilerplate-master/src/containers/Cart.js

+import React from 'react'
+import { connect } from 'react-redux'
+
+let Cart = ({items}) =>{
+    const cartItem = items.map((product) => 
+        <div>
+            <p>{product.name}</p>
+        </div>
+    )
+    return(
+    <div>
+        <h1>This is Inventory</h1>
+        <div>{cartItem}</div>
+    </div>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    items: state.Carts
+})
+
+const mapDispatchToProps = (dispatch) => ({
+
+})
+
+
+Cart = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Cart)
+
+export default Cart

basic-react-redux-webpack4-boilerplate-master/src/containers/Inventory.js

+import React from 'react'
+import { connect } from 'react-redux'
+import { addToCart } from '../actions'
+
+let Inventory = ({smartPhone, addToCart}) =>{
+
+    const products = smartPhone.map((product) => 
+        <ul>
+            <p>{product.name} {product.price}</p>
+            <button onClick={addToCart(product)}>Add to cart</button>
+        </ul>
+    )
+    return(
+    <div>
+        <h1>This is Inventory</h1>
+        <div>{products}</div>
+    </div>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    smartPhone: state.smartPhone,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+    addToCart: (phone)=>{dispatch(addToCart(phone))}
+})
+
+Inventory = connect(mapStateToProps,
+    mapDispatchToProps)(Inventory)
+
+export default Inventory
\ No newline at end of file

basic-react-redux-webpack4-boilerplate-master/src/css/styles.css

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

basic-react-redux-webpack4-boilerplate-master/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-webpack4-boilerplate-master/src/index.js

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

basic-react-redux-webpack4-boilerplate-master/src/reducers/index.js

+const data = {
+  name: 'smartPhone',
+  description: 'MOTOROLA MOBILE PHONE ',
+
+  variants: [
+    {
+      name: 'smartPhone',
+      image: 'chivas.jpg',
+      description: 'MOTOROLA MOBILE PHONE ',
+      sku: '113355',
+      type: '1',
+      price: 4.99,
+      inventory: 10
+    },
+    {
+      name: 'NOKIA',
+      image: 'images.jpeg',
+      description: 'SAMSUNG MOBILE PHONE',
+      sku: '224466',
+      type: '2',
+      price: 12.99,
+      inventory: 15
+    },
+    {
+      name: 'LG',
+      image: 'LG.jpg',
+      description: 'IPHONE MOBILE PHONE',
+      sku: '779900',
+      type: '3',
+      price: 34.99,
+      inventory: 30
+    },
+    {
+      name: 'SUMSUNG',
+      image: 'samsung.jpg',
+      description: 'HOLAS MOBILE PHONE',
+      sku: '123123',
+      type: '4',
+      price: 21.99,
+      inventory: 17
+    },
+    {
+      name: 'Digit',
+      image: 'chivas.jpg',
+      description: 'MOTOROLA MOBILE PHONE',
+      sku: '123456',
+      type: '5',
+      price: 60.99,
+      inventory: 30
+    },
+    {
+      name: 'LG',
+      image: 'LG.jpg',
+      description: 'IPHONE MOBILE PHONE',
+      sku: '779900',
+      type: '6',
+      price: 34.99,
+      inventory: 13
+    },
+  ]
+}
+
+const {variants: smartPhone} = data
+
+const initProduct = {
+  count:0,
+  smartPhone,
+  Carts:[],
+}
+
+const reducer = (state = initProduct, action) => {
+
+    switch (action.type) {
+      case 'INCREMENT':
+        return { ...state, count : state.count+1  };
+      
+      case 'DECREMENT':
+        return { ...state, count : state.count-1  };
+
+      case 'ADDTOCART':
+        let item = {name: action.name}
+        state.Carts.push(item)
+        console.log(state.Carts)
+        return {...state}
+  
+      default:
+        return state;
+    }
+    
+  };
+  
+  export default reducer;
+  
\ No newline at end of file

basic-react-redux-webpack4-boilerplate-master/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 }
+                  }
+                ]
+              }
+        ]
+    }
+};
+
+
+
+
+
+