Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Completed first CA_TLA view with no functionality #499

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,4 @@ dmypy.json

# Pyre type checker
.pyre/
node_modules
81 changes: 39 additions & 42 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,44 @@
import React from 'react';
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import 'bootstrap/dist/css/bootstrap.min.css';
import { AppProvider } from "./context/AppContext";
import Budget from "./components/Budget";
import ExpenseTotal from "./components/ExpenseTotal";
import ExpenseList from "./components/ExpenseList";
import AllocationForm from "./components/AllocationForm";
import RemainingBudget from "./components/Remaining";

//Code to import Budget.js
import Budget from './components/Budget';

// Add code to import the other components here under


import { AppProvider } from './context/AppContext';
const App = () => {
return (
<AppProvider>
<div className='container'>
<h1 className='mt-3'>Company's Budget Allocation</h1>
<div className='row mt-3'>
    {
/* Add Budget component here */
}

    {
/* Add Remaining component here*/
}

    {
/* Add ExpenseTotal component here */
}

    {
/* Add ExpenseList component here */
}

    {
/* Add ExpenseItem component here */
}

    {
/* Add AllocationForm component here under */
}

</div>
</div>
</AppProvider>
);
return (
<AppProvider>
<div className="container">
<h1 className="mt-3">Company's Budget Allocation</h1>
<div className="row mt-3">
<div className="col-sm">
<Budget />
</div>
<div className="col-sm">
<RemainingBudget />
</div>
<div className="col-sm">
<ExpenseTotal />
</div>
</div>
<h3 className="mt-3">Allocation</h3>
<div className="row ">
<div className="col-sm">
<ExpenseList />
</div>
</div>
<h3 className="mt-3">Change allocation</h3>
<div className="row mt-3">
<div className="col-sm">
<AllocationForm />
</div>
</div>
</div>
</AppProvider>
);
};

export default App;
110 changes: 110 additions & 0 deletions src/components/AllocationForm.js
Original file line number Diff line number Diff line change
@@ -1 +1,111 @@
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;
21 changes: 21 additions & 0 deletions src/components/Budget.js
Original file line number Diff line number Diff line change
@@ -1 +1,22 @@
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;
40 changes: 40 additions & 0 deletions src/components/ExpenseItem.js
Original file line number Diff line number Diff line change
@@ -1 +1,41 @@
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;
31 changes: 31 additions & 0 deletions src/components/ExpenseList.js
Original file line number Diff line number Diff line change
@@ -1 +1,32 @@
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;
15 changes: 14 additions & 1 deletion src/components/ExpenseTotal.js
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 15 additions & 1 deletion src/components/Remaining.js
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/context/AppContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const initialState = {
{ id: "Human Resource", name: 'Human Resource', cost: 40 },
{ id: "IT", name: 'IT', cost: 500 },
],
currency: '£'
currency: '$'
};

// 2. Creates the context this is the thing our components import and use to get the state
Expand Down
Loading