97 lines
3.5 KiB
JavaScript

import { EndPoints, getData, putData } from "../services/AccessAPI";
import { useNavigate, useLocation } from "react-router-dom";
import { useEffect } from "react";
import { useState } from 'react';
import { Routes } from "../services/Routes";
export default function UpdateAccount() {
let navigate = useNavigate();
const search = useLocation().search;
const id = new URLSearchParams(search).get('id')
const [name, setName] = useState("");
//const [owner, setOwner] = useState(0);
const [initBalance, setInitBalance] = useState("");
//const [currency, setCurrency] = useState(0);
const [extNum, setExtNum] = useState("");
const [loading, setLoading] = useState(false);
useEffect(() => {
getData(EndPoints.ACCOUNTS + "/" + id).then(
(result) => {
if (result) {
setName(result.name);
//setOwner(result.ownerId);
setInitBalance(result.initialBalance);
//setCurrency(result.currencyId);
setExtNum(result.externalAccountNumber);
setLoading(false);
}
}
);
}, [id])
function onKeyDown(e) {
if (e.key === 'Enter') {
this.update(false);
}
}
function onUpdateCancel() {
navigate(Routes.ACCOUNTS);
}
function onSubmit(e) {
e.preventDefault();
let accountProfile = {
name: name,
//owner: ownerId,
initialBalance: initBalance,
//currency: currencyId,
externalAccountNumber: extNum,
}
putData(EndPoints.ACCOUNTS + "/" + id, accountProfile).then((result) => {
let responseJson = result;
if (responseJson) {
console.log(responseJson);
navigate(Routes.ACCOUNTS);
}
}
);
}
return(
<div className="row">
<div className="col-md-4">
<h3>Edit Account</h3>
<form onSubmit={onSubmit}>
<div className="form-group">
<label className="control-label">Account Name: </label>
<input className="form-control" type="text" value={name} onChange={(e) => setName(e.target.value)} name="name"
onKeyDown={onKeyDown} ></input>
</div>
<div className="form-group">
<label className="control-label">Initial Balance: </label>
<input className="form-control" type="text" value={initBalance} onChange={(e) => setInitBalance(e.target.value)} name="initBalance"
onKeyDown={onKeyDown} ></input>
</div>
<div className="form-group">
<label className="control-label">External Account Number: </label>
<input className="form-control" type="text" value={extNum} onChange={(e) => setExtNum(e.target.value)} name="extNum"
onKeyDown={onKeyDown} ></input>
</div>
<div className="form-group">
<button onClick={onUpdateCancel} className="btn btn-default">Cancel</button>
<input type="submit" value="Edit" className="btn btn-primary"></input>
</div>
</form>
</div>
</div>
);
}