Expenses by Category and Add Transaction Widgets

src/components/AddExpenseForm.js

@@ -11,6 +11,7 @@ const AddExpenseForm = (props) => {
 	const [cost, setCost] = useState('');
 	const [category, setCategory] = useState('');
 	const [categoryList, setCategoryList] = useState([]);
+	const [isExpense, setIsExpense] = useState(true);
 
 	useEffect(() => {
         try {
@@ -25,13 +26,35 @@ const AddExpenseForm = (props) => {
 				if (data.status != 200) {
 					console.log(data.error);
 			  	} else {
-					setCategoryList(data.categories);
+					isExpense 
+						? setCategoryList(Object.keys(data.expenses))
+						: setCategoryList(Object.keys(data.income));
 			  	}
 			})
 		} catch(error) {
 			console.error(error);
 		}
 	}, [])
+  
+	const toggleTransactionType = () => {
+		setIsExpense(!isExpense);
+		fetch('https://api.bb.gabefarrell.com/w/budget', {
+			  method: 'GET',
+			  headers: {
+				'x-session-key' : getSessionKey(),
+			}
+		})
+		.then(response => response.json())
+		.then(data => {
+			if (data.status != 200) {
+				console.log(data.error);
+			} else {
+				isExpense 
+					? setCategoryList(Object.keys(data.expenses))
+					: setCategoryList(Object.keys(data.income));
+		  	}
+		})
+	};
 
 	const onSubmit = (event) => {
 		event.preventDefault();
@@ -41,7 +64,7 @@ const AddExpenseForm = (props) => {
 		let currency = "USD"
 		let whole = 0;
 		let decimal = 0;
-		let type = 'expenses';
+		let type = isExpense ? 'expenses' : 'income';
 
 
 		if (cost.includes(".")) {
@@ -76,19 +99,6 @@ const AddExpenseForm = (props) => {
 			console.error(error);
 		}
 
-		/*
-		const expense = {
-			id: uuidv4(),
-			name,
-			cost: parseInt(cost),
-		};
-
-		dispatch({
-			type: 'ADD_EXPENSE',
-			payload: expense,
-		});
-		*/
-
 		setName('');
 		setCost('');
 	};
@@ -106,23 +116,7 @@ const AddExpenseForm = (props) => {
 
 	return (
 		<div className='widget'>
-			<h4>Add Expense</h4>
+			<h4>Add Transaction</h4>
-			<form onSubmit={onSubmit}>
-				<div className='row'>
-					{/*
-					<div className='col-md col-lg-4'>
-						<label htmlFor='name'>Name</label>
-						<input
-							required='required'
-							type='text'
-							className='form-control'
-							id='name'
-							value={name}
-							onChange={(event) => setName(event.target.value)}
-						></input>
-					</div>  
-					*/}
-				</div>
 				<div className='row'>
 					<div className='col-md col-lg-4'>
 						<label htmlFor='cost'>Cost</label>
@@ -153,15 +147,17 @@ const AddExpenseForm = (props) => {
 				</div>
 				<div className='row mt-3'>
 					<div className='col-sm'>
-						<button type='submit' className='btn btn-primary'>
+						<button type='submit' onClick={onSubmit} className='btn btn-primary' style={{marginRight:"12px"}}>
-							Add Expense
+							Add {isExpense ? 'Expense' : 'Income'}
 						</button>
-						<button className='btn btn-primary mx-3' onClick={handleAddCategory}>
+						<button className='btn btn-primary' onClick={handleAddCategory} style={{marginRight:"12px"}}>
 							Add New Category
 						</button>
+						<button onClick={toggleTransactionType}>
+							{isExpense ? 'EXPENSE' : 'INCOME'}
+						</button>
 					</div>
 				</div>
-			</form>
 		</div>
 	);
 };

src/components/CategorizedBudget.js

@@ -3,7 +3,8 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend, defaults } from 'chart.j
 
 import { AppProvider } from "../context/AppContext";
 import  { useState, useEffect } from 'react'
-import { getSessionKey } from '../utils/utils.js'
+import { calculateValue, getSessionKey } from '../utils/utils.js'
+import { Minimize } from "@material-ui/icons";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
@@ -16,7 +17,7 @@ export default function CategorizedBudget() {
           fetch('https://api.bb.gabefarrell.com/w/budget', {
             method: 'GET',
             headers: {
-              'x-session-key' : 'b36efa01-7824-4f61-a274-63131b58d8fe',
+              'x-session-key' : getSessionKey(),
             }
           })
           .then(response => response.json())
@@ -24,27 +25,25 @@ export default function CategorizedBudget() {
             if (data.status != 200) {
               console.log(data.error);
             } else {
+              
+              console.log(typeof data.expenses_by_category);
               const chartData = {
-                labels: [data.categories.length > 0 ? data.categories : "no expenses"],
+                labels: Object.keys(data.expenses).length > 0 ? Object.keys(data.expenses) : [ "no expenses"],
                 datasets: [
                   {
-                    data: data.expenses_by_category.length > 0 
+                    data: Object.values(data.expenses_by_category).map(category => {
-                      ? data.expenses_by_category.map(category => {
+                      return calculateValue(category);
-                          return category['whole']
+                    }),
-                        })
-                      : [1],
                     backgroundColor: [
-                      'rgba(255, 99, 132, 0.2)',
+                      '#FFC857',
-                      'rgba(54, 162, 235, 0.2)',
+                      '#ED8146',
-                      'rgba(255, 206, 86, 0.2)',
+                      '#DB3A34',
-                      'rgba(75, 192, 192, 0.2)',
+                      '#5672C7',
-                      'rgba(153, 102, 255, 0.2)',
-                      'rgba(255, 159, 64, 0.2)',
                     ],
                     borderColor: [
-                      "black"
+                      "white"
                     ],
-                    borderWidth: 1,
+                    borderWidth: 2,
                   },
                 ],
               }

src/pages/Dashboard.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import { AppProvider } from '../context/AppContext';
-import FetchAPI from '../components/budget';
+import FetchAPI from '../components/Budget';
 import ExpenseTotal from '../components/ExpenseTotal';
 import ExpenseList from '../components/ExpenseList';
 import AddExpenseForm from '../components/AddExpenseForm';

src/utils/utils.js

@@ -41,4 +41,8 @@ export async function getName() {
 export function handleLogout() {
   document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
   window.location.href='/welcome';
+}
+
+export function calculateValue(category) {
+  return category.whole + category.decimal * 0.01;
 }