Complete lab shopping application

.gitignore

@@ -127,3 +127,4 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+node_modules

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() {
-  return (
-    <div className="App">
-    </div>
-  );
-}
-
-export default App;
+const App = () => {
+    return (
+        <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;

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;