jveebs
3 years ago
parent
ab1db7dbae
commit
e90e8d413e
@ -0,0 +1,168 @@
|
|||||||
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
|
import { AppContext } from '../context/AppContext';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
import './AddExpenseForm.css'
|
||||||
|
import { getSessionKey } from '../utils/utils.js'
|
||||||
|
|
||||||
|
export default function QuickTransaction(props) {
|
||||||
|
const { dispatch } = useContext(AppContext);
|
||||||
|
|
||||||
|
const [cost, setCost] = useState('');
|
||||||
|
const [category, setCategory] = useState('');
|
||||||
|
const [categoryList, setCategoryList] = useState([]);
|
||||||
|
const [transactionType, setTransactionType] = useState('expenses');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getCategoryList();
|
||||||
|
}, [transactionType])
|
||||||
|
|
||||||
|
const toggleTransactionType = () => {
|
||||||
|
if (transactionType == "expenses") {
|
||||||
|
setTransactionType("income");
|
||||||
|
} else {
|
||||||
|
setTransactionType("expenses");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCategoryList = () => {
|
||||||
|
if (transactionType == "expenses") {
|
||||||
|
fetch('https://api.bb.gabefarrell.com/w/budget', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-session-key' : getSessionKey(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.status != 200) {
|
||||||
|
console.log(data.error);
|
||||||
|
} else {
|
||||||
|
let categories = Object.keys(data.expenses_by_category).length > 0 ? Object.keys(data.expenses_by_category) : ["Uncategorized"];
|
||||||
|
|
||||||
|
setCategoryList(categories);
|
||||||
|
setCategory(categories[0])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
fetch('https://api.bb.gabefarrell.com/w/income', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-session-key' : getSessionKey(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.status != 200) {
|
||||||
|
console.log(data.error);
|
||||||
|
} else {
|
||||||
|
let categories = Object.keys(data.income_by_category).length > 0 ? Object.keys(data.income_by_category) : ["Uncategorized"];
|
||||||
|
|
||||||
|
setCategoryList(categories);
|
||||||
|
setCategory(categories[0])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
let currency = "USD"
|
||||||
|
let whole = 0;
|
||||||
|
let decimal = 0;
|
||||||
|
|
||||||
|
|
||||||
|
if (cost.includes(".")) {
|
||||||
|
whole = parseInt(cost.split(".")[0]);
|
||||||
|
decimal = parseInt(cost.split(".")[1]);
|
||||||
|
} else {
|
||||||
|
whole = parseInt(cost);
|
||||||
|
}
|
||||||
|
formData.append('category', category)
|
||||||
|
formData.append('currency', currency);
|
||||||
|
formData.append('whole', whole);
|
||||||
|
formData.append('decimal', decimal);
|
||||||
|
formData.append('type', transactionType)
|
||||||
|
|
||||||
|
try {
|
||||||
|
fetch(`https://api.bb.gabefarrell.com/w/transactions?whole=${whole}&decimal=${decimal}¤cy=${currency}&category=${category}&type=${transactionType}`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData,
|
||||||
|
headers: {
|
||||||
|
'x-session-key' : getSessionKey(),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.status != 200) {
|
||||||
|
console.log(data.error);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch(error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
setCost('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddCategory = () => {
|
||||||
|
const newCategory = prompt('Enter the new category name:');
|
||||||
|
if (newCategory) {
|
||||||
|
if (categoryList.indexOf(newCategory) == -1) {
|
||||||
|
const newCategories = [...categoryList, newCategory];
|
||||||
|
setCategoryList(newCategories);
|
||||||
|
}
|
||||||
|
setCategory(newCategory);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='widget'>
|
||||||
|
<h4>Add Transaction</h4>
|
||||||
|
<div className='row'>
|
||||||
|
<div className='col-md col-lg-4'>
|
||||||
|
<label htmlFor='cost'>Cost</label>
|
||||||
|
<input
|
||||||
|
required='required'
|
||||||
|
type='number'
|
||||||
|
className='form-control'
|
||||||
|
id='cost'
|
||||||
|
min="0.00"
|
||||||
|
step=".01"
|
||||||
|
value={cost}
|
||||||
|
onChange={(event) => setCost(event.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='col-md col-lg-4'>
|
||||||
|
<label htmlFor='category-select'>Category</label>
|
||||||
|
<select className="form-select" id='category-select'
|
||||||
|
value={category}
|
||||||
|
onChange={(event) => setCategory(event.target.value)}>
|
||||||
|
|
||||||
|
{categoryList.map((category) => (
|
||||||
|
<option key={category} value={category}>
|
||||||
|
{category}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='row mt-3'>
|
||||||
|
<div className='col-sm'>
|
||||||
|
<button type='submit' onClick={onSubmit} id="add-transaction-button" className='btn btn-primary' style={{marginRight:"12px"}}>
|
||||||
|
Add {transactionType.substring(0, 1).toUpperCase() + transactionType.substring(1)}
|
||||||
|
</button>
|
||||||
|
<button className='btn btn-primary' onClick={handleAddCategory} style={{marginRight:"12px"}}>
|
||||||
|
Add New Category
|
||||||
|
</button>
|
||||||
|
<button onClick={toggleTransactionType}>
|
||||||
|
{transactionType.toUpperCase()}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in new issue