gabehf
/
BudgetBuddy
mirror of https://github.com/gabehf/BudgetBuddy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Current Balance Widget Function

Browse Source
main
Chris 3 years ago
parent 8cbb8ee963
commit 572166e82b
6 changed files with 192 additions and 26 deletions
Show Stats Download Patch File Download Diff File

42
package-lock.json generated
Unescape View File

@ -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",

1
package.json
Unescape View File

@ -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",

58
src/components/MostRecentFunctioningViewBudget.txt
Unescape View File

@ -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;

109
src/components/ViewBudget.js
Unescape View File

@ -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;

2
src/context/AppContext.js
Unescape View File

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

4
src/pages/Dashboard.jsx
Unescape View File

@ -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 />

Write Preview
Loading…
Cancel
Save