shopping application lab completed

.gitignore

@@ -3,6 +3,9 @@ __pycache__/
 *.py[cod]
 *$py.class
 
+#node_modules
+node_modules
+
 # C extensions
 *.so
 

src/App.js

@@ -1,16 +1,40 @@
 import React from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css'; 
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
 import { AppProvider } from './context/AppContext';
 import CartValue from './components/CartValue';
 import ExpenseList from './components/ExpenseList';
 import ItemSelected from './components/ItemSelected';
 import Location from './components/Location';
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-    </div>
+    <AppProvider>
+      <div className='container'>
+        <h1 className='mt-3'>Shopping App</h1>
+        <div className='row mt-3'>
+          <div className='col-sm'>
+            <CartValue />
+          </div>
+          <div className='col-sm'>
+            <Location />
+          </div>
+        </div>
+        <h3 className='mt-3'>Shopping Cart</h3>
+        <div className='row '>
+          <div className='col-sm'>
+            <ExpenseList />
+          </div>
+        </div>
+        <h3 className='mt-3'>Add Items</h3>
+        <div className='row mt-3'>
+          <div className='col-sm'>
+            <ItemSelected />
+          </div>
+        </div>
+      </div>
+    </AppProvider>
   );
-}
-
-export default App;
+};
+export default App;

src/components/CartValue.js

@@ -2,6 +2,16 @@ import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
 
 const CartValue = () => {
+    const { expenses, Location } = useContext(AppContext);
+    const totalExpenses = expenses.reduce((total, item) => {
+        return (total += (item.unitprice * item.quantity));
+    }, 0);
+
+    return (
+        <div className='alert alert-primary'>
+            <span>Cart Value: {Location}{totalExpenses}</span>
+        </div>
+    );
 };
 
-export default CartValue;
+export default CartValue;

src/components/ExpenseItem.js

@@ -3,6 +3,29 @@ import { AppContext } from '../context/AppContext';
 import { FaTimesCircle } from 'react-icons/fa';
 
 const ExpenseItem = (props) => {
+    const { dispatch, Location } = useContext(AppContext);
+
+    const handleDeleteItem = () => {
+        const item = {
+            name: props.name,
+        };
+
+        dispatch({
+            type: 'DELETE_ITEM',
+            payload: item,
+        });
+    };
+
+
+    return (
+        <tr>
+            <td>{props.name}</td>
+            <td>{props.quantity}</td>
+            <td>{Location}{parseInt(props.unitprice)}</td>
+            <td>{Location}{parseInt(props.quantity) * parseInt(props.unitprice)}</td>
+            <td><FaTimesCircle size='2.2em' color="red" onClick={handleDeleteItem}></FaTimesCircle></td>
+        </tr>
+    );
 };
 
-export default ExpenseItem;
+export default ExpenseItem;

src/components/ExpenseList.js

@@ -1,7 +1,28 @@
 import React, { useContext } from 'react';
+import ExpenseItem from './ExpenseItem';
 import { AppContext } from '../context/AppContext';
 
 const ExpenseList = () => {
+    const { expenses } = useContext(AppContext);
+
+    return (
+        <table className='table'>
+            <thead className="thead-light">
+                <tr>
+                    <th scope="col">Items</th>
+                    <th scope="col">Quantity</th>
+                    <th scope="col">Unit Price</th>
+                    <th scope="col">Items Price</th>
+                    <th scope="col">Remove</th>
+                </tr>
+            </thead>
+            <tbody>
+                {expenses.map((expense) => (
+                    <ExpenseItem id={expense.id} key={expense.id} name={expense.name} quantity={expense.quantity} unitprice={expense.unitprice} />
+                ))}
+            </tbody>
+        </table>
+    );
 };
 
-export default ExpenseList;
+export default ExpenseList;

src/components/ItemSelected.js

@@ -2,6 +2,76 @@ import React, { useContext, useState } from 'react';
 import { AppContext } from '../context/AppContext';
 
 const ItemSelected = (props) => {
+    const { dispatch } = useContext(AppContext);
+
+    const [name, setName] = useState('');
+    const [quantity, setQuantity] = useState('');
+    const [action, setAction] = useState('');
+
+
+    const submitEvent = () => {
+
+        const item = {
+            name: name,
+            quantity: parseInt(quantity),
+        };
+
+        if (action === "Reduce") {
+            dispatch({
+                type: 'RED_QUANTITY',
+                payload: item,
+            });
+        } else {
+            dispatch({
+                type: 'ADD_QUANTITY',
+                payload: item,
+            });
+        }
+    };
+
+    return (
+        <div>
+            <div className='row'>
+
+                <div className="input-group mb-3" style={{ marginLeft: '2rem' }}>
+                    <div className="input-group-prepend">
+                        <label className="input-group-text" htmlFor="inputGroupSelect01">Items</label>
+                    </div>
+                    <select className="custom-select" id="inputGroupSelect01" onChange={(event) => setName(event.target.value)}>
+                        <option defaultValue>Choose...</option>
+                        <option value="Shirt" name="Shirt"> Shirt</option>
+                        <option value="Dress" name="Dress">Dress</option>
+                        <option value="Jeans" name="Jeans">Jeans</option>
+                        <option value="Dinner set" name="Dinner set">Dinner set</option>
+                        <option value="Bags" name="Bags">Bags</option>
+                    </select>
+
+                    <div className="input-group-prepend" style={{ marginLeft: '2rem' }}>
+                        <label className="input-group-text" htmlFor="inputGroupSelect02">Quantity</label>
+                    </div>
+                    <select className="custom-select" id="inputGroupSelect02" onChange={(event) => setAction(event.target.value)}>
+                        <option defaultValue value="Add" name="Add">Add</option>
+                        <option value="Reduce" name="Reduce">Reduce</option>
+                    </select>
+                    <span className="eco" style={{ marginLeft: '2rem', marginRight: '8px' }}></span>
+
+                    <input
+                        required='required'
+                        type='number'
+                        id='cost'
+                        value={quantity}
+                        style={{ size: 10 }}
+                        onChange={(event) => setQuantity(event.target.value)}>
+                    </input>
+
+                    <button className="btn btn-primary" onClick={submitEvent} style={{ marginLeft: '2rem' }}>
+                        Save
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    );
 };
 
-export default ItemSelected;
+export default ItemSelected;

src/components/Location.js

@@ -2,6 +2,27 @@ import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
 
 const Location = () => {
+    const { dispatch } = useContext(AppContext);
+
+    const changeLocation = (val) => {
+        dispatch({
+            type: 'CHG_LOCATION',
+            payload: val,
+        })
+    }
+
+
+    return (
+        <div className='alert alert-secondary'> Location {
+            <select name="Location" id="Location" onChange={event => changeLocation(event.target.value)}>
+                <option value="£">Uk(£)</option>
+                <option value="₹">India(₹)</option>
+                <option value="€">Europe(€)</option>
+                <option value="CAD">Canada(CAD)</option>
+            </select>
+        }
+        </div>
+    );
 };
 
 export default Location;