diff --git a/src/App.js b/src/App.js
index 5d1f338a3..0607c2597 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,39 @@
import React from 'react';
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 (
-
-
+
+
+
Shopping App
+
+
Shopping Cart
+
+
Add Items
+
+
+ Cart Value: {Location}{totalExpenses}
+
+ );
};
export default CartValue;
diff --git a/src/components/ExpenseItem.js b/src/components/ExpenseItem.js
index 067d1824e..138227ff3 100644
--- a/src/components/ExpenseItem.js
+++ b/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 (
+
+ | {props.name} |
+ {props.quantity} |
+ {Location}{parseInt(props.unitprice)} |
+ {Location}{parseInt(props.quantity)*parseInt(props.unitprice)} |
+ |
+
+ );
};
-export default ExpenseItem;
+export default ExpenseItem;
\ No newline at end of file
diff --git a/src/components/ExpenseList.js b/src/components/ExpenseList.js
index 3c7a8af08..1e53f9efa 100644
--- a/src/components/ExpenseList.js
+++ b/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 (
+
+
+
+ | Items |
+ Quantity |
+ Unit Price |
+ Items Price |
+ Remove |
+
+
+
+ {expenses.map((expense) => (
+
+ ))}
+
+
+ );
};
-export default ExpenseList;
+export default ExpenseList;
\ No newline at end of file
diff --git a/src/components/ItemSelected.js b/src/components/ItemSelected.js
index 14045b414..8e71168ca 100644
--- a/src/components/ItemSelected.js
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
setQuantity(event.target.value)}>
+
+
+
+
+
+
+
Location {
+
+ }
+
+ );
};
export default Location;
\ No newline at end of file
diff --git a/src/context/AppContext.js b/src/context/AppContext.js
index 44355a62b..5490e0c06 100644
--- a/src/context/AppContext.js
+++ b/src/context/AppContext.js
@@ -1 +1,101 @@
-import React, { createContext, useReducer } from 'react';
\ No newline at end of file
+import React, { createContext, useReducer } from 'react';
+
+// 5. The reducer - this is used to update the state, based on the action type
+
+export const AppReducer = (state, action) => {
+ let new_expenses = [];
+ switch (action.type) {
+ case 'ADD_QUANTITY' :
+ let updatedqty = false;
+ state.expenses.map((expense)=>{
+ if(expense.name === action.payload.name){
+ expense.quantity = expense.quantity + action.payload.quantity;
+ updatedqty = true;
+ }
+ new_expenses.push(expense);
+ return true;
+
+ })
+ state.expenses = new_expenses;
+ action.type = "DONE";
+ return {
+ ...state,
+ };
+
+ case 'RED_QUANTITY' :
+ state.expenses.map((expense)=>{
+ if (expense.name === action.payload.name){
+ expense.quantity = expense.quantity - action.payload.quantity;
+ }
+ expense.quantity = expense.quantity < 0 ? 0: expense.quantity;
+ new_expenses.push(expense);
+ return true;
+ })
+ state.expenses = new_expenses;
+ action.type = "DONE";
+ return {
+ ...state,
+ };
+
+ case 'DELETE_ITEM' :
+ state.expenses.map((expense)=>{
+ if (expense.name === action.payload.name) {
+ expense.quantity = 0;
+ }
+ new_expenses.push(expense);
+ return true;
+ })
+ state.expenses = new_expenses;
+ action.type = "DONE";
+ return{
+ ...state,
+ };
+ case 'CHG_LOCATION':
+ action.type = "DONE";
+ state.Location = action.payload;
+ return {
+ ...state,
+ }
+ default :
+ return state;
+ }
+};
+
+//1. Sets the initial state when the app loads
+const initialState = {
+ expenses: [
+ {id: "Shirt", name: 'Shirt', quantity: 0, unitprice: 500 },
+ { id: "Jeans", name: 'Jeans', quantity: 0, unitprice: 300 },
+ { id: "Dress", name: 'Dress', quantity: 0, unitprice: 400 },
+ { id: "Dinner set", name: 'Dinner set', quantity: 0, unitprice: 600 },
+ { id: "Bags", name: 'Bags', quantity: 0, unitprice: 200 },
+ ],
+ Location: '$'
+};
+
+//2. Creates the context this is the thing our components will import and use to get the state
+export const AppContext = createContext();
+
+// 3. Provider component - wraps the components we want to give access to the state
+// Accepts the children, which are the nested(wrapped) components
+export const AppProvider = (props) => {
+ // 4. Sets up the app state. takes a reducer, and an initial state
+ const [state, dispatch] = useReducer(AppReducer, initialState);
+
+ const totalExpenses = state.expenses.reduce((total, item) => {
+ return (total = total + (item.unitprice * item.quantity));
+ }, 0);
+state.CartValue = totalExpenses;
+ return (
+
+ {props.children}
+
+ );
+};