diff --git a/src/App.js b/src/App.js
index 610e47d694..7ac0e9bc14 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,12 @@ import 'bootstrap/dist/css/bootstrap.min.css';
//Code to import Budget.js
import Budget from './components/Budget';
+import Remaining from './components/Remaining';
+import ExpenseTotal from './components/ExpenseTotal';
+import ExpenseList from './components/ExpenseList';
+import ExpenseItem from './components/ExpenseItem';
+import AllocationForm from './components/AllocationForm';
+
// Add code to import the other components here under
@@ -17,26 +23,47 @@ const App = () => {
<div className='row mt-3'>
{
/* Add Budget component here */
+ // Budget component
+ <div className='col-sm'>
+ <Budget />
+ </div>
}
{
/* Add Remaining component here*/
+ //Remaining component
+ <div className='col-sm'>
+ <Remaining />
+ </div>
}
{
/* Add ExpenseTotal component here */
+ //ExpenseTotal component
+ <div className='col-sm'>
+ <ExpenseTotal />
+ </div>
}
{
/* Add ExpenseList component here */
+ <div className='col-sm'>
+ <ExpenseList />
+ </div>
}
{
/* Add ExpenseItem component here */
+ <div className='col-sm'>
+ <ExpenseItem />
+ </div>
}
{
/* Add AllocationForm component here under */
+ <div className='col-sm'>
+ <AllocationForm />
+ </div>
}
</div>
diff --git a/src/components/AllocationForm.js b/src/components/AllocationForm.js
index 8b13789179..4c4d32c5e4 100644
--- a/src/components/AllocationForm.js
+++ b/src/components/AllocationForm.js
@@ -1 +1,81 @@
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
+const AllocationForm = (props) => {
+ const { dispatch,remaining } = useContext(AppContext);
+
+ const [name, setName] = useState('');
+ const [cost, setCost] = useState('');
+ const [action, setAction] = useState('');
+
+ const submitEvent = () => {
+
+ if(cost > remaining) {
+ alert("The value cannot exceed remaining funds £"+remaining);
+ setCost("");
+ return;
+ }
+
+ const expense = {
+ name: name,
+ cost: parseInt(cost),
+ };
+ if(action === "Reduce") {
+ dispatch({
+ type: 'RED_EXPENSE',
+ payload: expense,
+ });
+ } else {
+ dispatch({
+ type: 'ADD_EXPENSE',
+ payload: expense,
+ });
+ }
+ };
+
+ 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">Department</label>
+ </div>
+ <select className="custom-select" id="inputGroupSelect01" onChange={(event) => setName(event.target.value)}>
+ <option defaultValue>Choose...</option>
+ <option value="Marketing" name="marketing"> Marketing</option>
+ <option value="Sales" name="sales">Sales</option>
+ <option value="Finance" name="finance">Finance</option>
+ <option value="HR" name="hr">HR</option>
+ <option value="IT" name="it">IT</option>
+ <option value="Admin" name="admin">Admin</option>
+ </select>
+
+ <div className="input-group-prepend" style={{ marginLeft: '2rem' }}>
+ <label className="input-group-text" htmlFor="inputGroupSelect02">Allocation</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>
+
+ <input
+ required='required'
+ type='number'
+ id='cost'
+ value={cost}
+ style={{ marginLeft: '2rem' , size: 10}}
+ onChange={(event) => setCost(event.target.value)}>
+ </input>
+
+ <button className="btn btn-primary" onClick={submitEvent} style={{ marginLeft: '2rem' }}>
+ Save
+ </button>
+ </div>
+ </div>
+
+ </div>
+ );
+};
+
+export default AllocationForm;
diff --git a/src/components/Budget.js b/src/components/Budget.js
index 8b13789179..73e2bc1955 100644
--- a/src/components/Budget.js
+++ b/src/components/Budget.js
@@ -1 +1,17 @@
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
+const Budget = () => {
+ const { budget } = useContext(AppContext);
+ const [newBudget, setNewBudget] = useState(budget);
+ const handleBudgetChange = (event) => {
+ setNewBudget(event.target.value);
+ }
+ return (
+<div className='alert alert-secondary'>
+<span>Budget: £{budget}</span>
+<input type="number" step="10" value={newBudget} onChange={handleBudgetChange}></input>
+</div>
+ );
+};
+export default Budget;
diff --git a/src/components/ExpenseItem.js b/src/components/ExpenseItem.js
index 8b13789179..7b9f9919db 100644
--- a/src/components/ExpenseItem.js
+++ b/src/components/ExpenseItem.js
@@ -1 +1,38 @@
+import React, { useContext } from 'react';
+import { TiDelete } from 'react-icons/ti';
+import { AppContext } from '../context/AppContext';
+const ExpenseItem = (props) => {
+ const { dispatch } = useContext(AppContext);
+
+ const handleDeleteExpense = () => {
+ dispatch({
+ type: 'DELETE_EXPENSE',
+ payload: props.id,
+ });
+ };
+
+ const increaseAllocation = (name) => {
+ const expense = {
+ name: name,
+ cost: 10,
+ };
+
+ dispatch({
+ type: 'ADD_EXPENSE',
+ payload: expense
+ });
+
+ }
+
+ return (
+ <tr>
+ <td>{props.name}</td>
+ <td>£{props.cost}</td>
+ <td><button onClick={event=> increaseAllocation(props.name)}>+</button></td>
+ <td><TiDelete size='1.5em' onClick={handleDeleteExpense}></TiDelete></td>
+ </tr>
+ );
+};
+
+export default ExpenseItem;
diff --git a/src/components/ExpenseList.js b/src/components/ExpenseList.js
index 8b13789179..34f88a4028 100644
--- a/src/components/ExpenseList.js
+++ b/src/components/ExpenseList.js
@@ -1 +1,27 @@
+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">Department</th>
+ <th scope="col">Allocated Budget</th>
+ <th scope="col">Increase by 10</th>
+ <th scope="col">Delete</th>
+ </tr>
+ </thead>
+ <tbody>
+ {expenses.map((expense) => (
+ <ExpenseItem id={expense.id} key={expense.id} name={expense.name} cost={expense.cost} />
+ ))}
+ </tbody>
+ </table>
+ );
+};
+
+export default ExpenseList;
diff --git a/src/components/ExpenseTotal.js b/src/components/ExpenseTotal.js
index 8b13789179..dfee1975c9 100644
--- a/src/components/ExpenseTotal.js
+++ b/src/components/ExpenseTotal.js
@@ -1 +1,14 @@
-
+import React, { useContext } from 'react';
+import { AppContext } from '../context/AppContext';
+const ExpenseTotal = () => {
+ const { expenses } = useContext(AppContext);
+ const totalExpenses = expenses.reduce((total, item) => {
+ return (total += item.cost);
+ }, 0);
+ return (
+ <div className='alert alert-primary'>
+ <span>Spent so far: £{totalExpenses}</span>
+ </div>
+ );
+};
+export default ExpenseTotal;
diff --git a/src/components/Remaining.js b/src/components/Remaining.js
index 8b13789179..3b40443bd8 100644
--- a/src/components/Remaining.js
+++ b/src/components/Remaining.js
@@ -1 +1,15 @@
-
+import React, { useContext } from 'react';
+import { AppContext } from '../context/AppContext';
+const Remaining = () => {
+ const { expenses, budget } = useContext(AppContext);
+ const totalExpenses = expenses.reduce((total, item) => {
+ return (total = total + item.cost);
+ }, 0);
+ const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';
+ return (
+ <div className={`alert ${alertType}`}>
+ <span>Remaining: £{budget - totalExpenses}</span>
+ </div>
+ );
+};
+export default Remaining;