Current Balance Widget Function

src/components/MostRecentFunctioningViewBudget.txt

@@ -0,0 +1,58 @@
+import React, {useState, useEffect} from 'react';
+import './css/ViewBudget.css'
+import logo from './widget_logos/current_balance_logo.png';
+
+function FetchAPI() {
+	const [data, setData] = useState('')
+
+	
+	useEffect(() => {
+	const apiGet = () => {
+		fetch('http://127.0.0.1:3030/w/balance', {
+			METHOD: 'GET',
+			headers: {
+				'x-session-key': "b36efa01-7824-4f61-a274-63131b58d8fe"
+			}
+		}
+		)
+		.then((response) => response.json())
+		.then(data => setData(data.balance));
+	};
+	apiGet();
+
+	}, [])
+		
+	function saveData() {
+		let item = {data}
+		console.warn(data.balance);
+		// fetch('http://127.0.0.1:3030/w/balance', {
+		// 	METHOD: 'POST',
+		// 	headers: {
+		// 		'x-session-key': "b36efa01-7824-4f61-a274-63131b58d8fe"
+		// 	},
+		// 	body:JSON.stringify(data)
+		// }
+		// )
+		// .then((response) => response.json())
+		// .then(data => setData(data.balance));
+	}
+	return (
+		<>
+			{/* <img src={logo}></img> 
+			<span>Current Balance: ${data}</span> */}
+			{/* <button onClick={apiGet()}> TEST</button> */}
+			 <div>{JSON.stringify(data)}</div> 
+			 <div>
+				<input type="text" data="data" value={data.balance} onChange={(e)=>{setData(e.target.value)}}></input>
+			 	<button type="button" onClick={saveData}>Update Balance</button>
+			</div>
+			 
+			{/* <div> {data && data.map((item) => <p>{data.body}</p>)}</div> */}
+			{/* <button type='button' className='btn btn-primary' onClick={props.handleEditClick}>
+				Edit
+			</button> */}
+		</>
+	);
+};
+
+export default FetchAPI;

src/components/ViewBudget.js

@@ -1,17 +1,108 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import './css/ViewBudget.css'
 import logo from './widget_logos/current_balance_logo.png';
 
-const ViewBudget = (props) => {
+export default function FetchAPI() {
+	const [whole, setWhole] = useState('');
+	const [decimal, setDecimal] = useState('')
+	const [balance, setBalance] = useState('');
+
+	function getSessionKey() {
+		var cookies = document.cookie.split(';');
+		for (let i = 0; i < cookies.length; i++) {
+		  const cookie = cookies[i].trim(); // Remove any leading or trailing whitespace
+		  if (cookie.startsWith('session=')) {
+			return cookie.substring('session='.length, cookie.length); // Extract the value of the cookie
+		  }
+		}
+		return null;
+	  }
+
+	async function getBalance() {
+		try {
+		  const response = await fetch('http://127.0.0.1:3030/w/balance', {
+			method: 'GET',
+			headers: {
+			  'x-session-key': getSessionKey(),
+			},
+		  });
+		  const data = await response.json();
+		  const whole = data.balance.whole;
+		  const decimal = data.balance.decimal;
+		  const balance = whole + '.' + decimal;
+		  console.log(balance); 
+		  return balance;
+		} catch (error) {
+		  console.error(error);
+		}
+	  }
+	async function fetchBalance() {
+            const name = await getBalance();
+            setBalance(name);
+        }
+	useEffect(() => {
+		
+        fetchBalance();
+	}, [])
+		
+	function handleSubmit(event) {
+		// const form = document.getElementById('form');
+		event.preventDefault();
+		// const payload = new FormData(form);
+		const balance = whole.split('.')
+		if (balance.length < 2)
+			balance.push(0);
+		else if (balance[1].length < 1)
+			balance.push(0);
+		// console.log([...payload])
+		// const formData = new FormData();
+        // formData.append('whole', whole);
+		// console.log(formData)
+		var details = {
+			// 'currency' : currency,
+			'whole' : balance[0],
+			'decimal' : balance[1]
+		};
+		var formBody = []
+		for (var property in details) {
+			var encodedKey = encodeURIComponent(property);
+			var encodedValue = encodeURIComponent(details[property]);
+			formBody.push(encodedKey + "=" + encodedValue);
+		  }
+		  formBody = formBody.join("&");
+
+		fetch('http://127.0.0.1:3030/w/balance', {
+		  method: 'POST',
+		  body: formBody,
+		  headers: {
+			'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+			'x-session-key': getSessionKey()
+		  }
+		})
+		.then((response) => response.json())
+		.then((data) => {
+			console.log(data)
+			if (data.status == 200)
+				fetchBalance();
+		});
+	  }
 	return (
 		<>
-			<img src={logo}></img> 
-			<span>Current Balance: ${props.budget}</span>
-			<button type='button' className='btn btn-primary' onClick={props.handleEditClick}>
-				Edit
-			</button>
+			{/* <img src={logo}></img> 
+			<span>Current Balance: ${data}</span> */}
+			{/* <button onClick={apiGet()}> TEST</button> */}
+			 <h1>{balance}</h1> 
+			 <form id="form" onSubmit={handleSubmit}>
+      			<input 
+				type = "text"
+					 className="form-control" 
+					 placeholder="Enter Balance" 
+					 value={whole} 
+					onChange={(event) => setWhole(event.target.value)}
+					 required />
+      			<button type="submit">Submit</button>
+    		</form>
 		</>
+		
 	);
-};
-
-export default ViewBudget;
+};

src/context/AppContext.js

@@ -27,7 +27,7 @@ export const AppReducer = (state, action) => {
 };
 
 const initialState = {
-	budget: 2000,
+	budget: 0,
 	expenses: [
 		
 		

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 Budget from '../components/Budget';
+import FetchAPI from '../components/budget';
 import ExpenseTotal from '../components/ExpenseTotal';
 import ExpenseList from '../components/ExpenseList';
 import AddExpenseForm from '../components/AddExpenseForm';
@@ -16,7 +16,7 @@ export default function Dashboard() {
 				<h1 className='mt-3'>My Budget Planner</h1>
 				<div className='row mt-3'>
 					<div className='col-sm'>
-						<Budget />
+						<FetchAPI />
 					</div>
 					<div className='col-sm'>
 						<RemainingBudget />