Finish Month Expenses Widget

src/components/ExpenseTotal.js

@@ -1,19 +1,31 @@
-import React, { useContext } from 'react';
-import { AppContext } from '../context/AppContext';
+import React, { useState, useEffect } from 'react';
+import { getSessionKey } from "../utils/utils";
 import logo from './widget_logos/expenses_logo.png';
 import './css/ExpenseTotal.css'
 
 const ExpenseTotal = () => {
-	const { expenses } = useContext(AppContext);
+	const [expense, setExpense] = useState(0.0);
 
-	const total = expenses.reduce((total, item) => {
-		return (total += item.cost);
-	}, 0);
+	useEffect(() => {
+		fetch('https://api.bb.gabefarrell.com/w/expenses/month', {
+			method: 'GET',
+			headers: {
+			  'x-session-key': getSessionKey(),
+			},
+		})
+		.then(data => data.json())
+		.then((data) => {
+			let monthExpense = data.whole
+			monthExpense += (data.decimal / 100)
+			setExpense(monthExpense)
+		})
+		.catch(console.log)
+	}, [])
 
 	return (
 		<div className='widget p-4'>
-			<img src={logo}></img>
-			<span>This Month's Expenses: ${total}</span>
+			<img src={logo} className='expenseTotalIcon'></img>
+			<span className='widgetText'>This Month's Expenses: ${expense}</span>
 		</div>
 	);
 };

src/components/css/ExpenseTotal.css

@@ -0,0 +1,4 @@
+.widgetText {
+    padding-left: 1em;
+    color: #333;
+}