Chris
3 years ago
parent
8cbb8ee963
commit
572166e82b
@ -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;
|
||||||
@ -1,17 +1,108 @@
|
|||||||
import React from 'react';
|
import React, {useState, useEffect} from 'react';
|
||||||
import './css/ViewBudget.css'
|
import './css/ViewBudget.css'
|
||||||
import logo from './widget_logos/current_balance_logo.png';
|
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 (
|
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;
|
|
||||||
Loading…
Reference in new issue