Created context and components. Made components use context

.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';
+import ExpenseItem from './components/ExpenseItem';
 
-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 mt-3'>
+          <div className='col-sm'>
+            <ExpenseList />
+          </div>
+          <div className='col-sm'>
+            <ItemSelected />
+          </div>
+        </div>
+      </div>
+    </AppProvider>
   );
 }
-
 export default App;
+
+//Here, you are importing different components,adding a bootstrap container 
+//that helps you center your App on the page. 
+//Importing your AppProvider and nested your components in the AppProvider element.

src/components/CartValue.js

@@ -1,7 +1,21 @@
 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;
+
+
+//Here, you are importing AppContext from your Context.Import the useContext hook, and pass your AppContext to it
+// - this is how a component connects to the context in order to get values from global state. 
+//The Bootstrap Alert classes are used to give a nice gray background by adding some text and hard coding a value.
+//Now if you change the budget in AppContext and reload your browser, you will see the budget updates on the UI.

src/components/ExpenseItem.js

@@ -1,8 +1,29 @@
 import React, { useContext } from 'react';
 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;
+
+//In ExpenseItem you are importing dispatch from Context, which allows you to dispatch 
+//a delete action. 
+//You are creating a function that gets called when the delete icon is clicked.

src/components/ExpenseList.js

@@ -1,7 +1,29 @@
 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;
+
+//In ExpenseList you are importing your AppContext and useContext hook like before. 
+//Here, you are creating a list, using the map function to iterate over the expenses, 
+//and displaying an ExpenseItem component.

src/components/ItemSelected.js

@@ -1,7 +1,71 @@
 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;
+
+//In ItemSelected, you are importing AppContext and useContext as usual and 
+//getting dispatch from your global state. 
+//You are creating an event to reduce or add quantity.
+//You are dispatching an action, with a type and your payload. 
+//The type tells the reducer how to update the state.

src/components/Location.js

@@ -1,7 +1,28 @@
 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;
 
-export default Location;
+//In Location.js, you are importing AppContext and adding changeLication class to 
+//change the location along with its currencies.
+// When you change the Location, currencies will be updated at all the required places.