Current Balance Widget Function

package-lock.json

@@ -18,6 +18,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.3.5",
         "bootstrap": "^5.2.3",
         "react": "^18.2.0",
         "react-bootstrap": "^2.7.2",
@@ -5717,6 +5718,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.5.tgz",
+      "integrity": "sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -15119,6 +15143,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -17263,19 +17292,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.5",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",

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> 
+			{/* <img src={logo}></img> 
-			<span>Current Balance: ${props.budget}</span>
+			<span>Current Balance: ${data}</span> */}
-			<button type='button' className='btn btn-primary' onClick={props.handleEditClick}>
+			{/* <button onClick={apiGet()}> TEST</button> */}
-				Edit
+			 <h1>{balance}</h1> 
-			</button>
+			 <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 />