generated from lucien/api-template
add: added receivers
This commit is contained in:
parent
94e4d5750f
commit
f0881f2025
6 changed files with 275 additions and 25 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { User, Accounts, Cards, Transfers } from '../types';
|
||||
import { User, Accounts, Cards, Transfers, Receivers } from '../types';
|
||||
import axios from 'axios';
|
||||
|
||||
import TopBar from '../components/TopBar';
|
||||
|
|
@ -11,10 +11,13 @@ export default function Home () {
|
|||
const [transfers, setTransfers] = useState<Transfers>([]);
|
||||
const [accounts, setAccounts] = useState<Accounts>([]);
|
||||
const [cards, setCards] = useState<Cards>([]);
|
||||
const [receivers, setReceivers] = useState<Receivers>([]);
|
||||
const [accountId, setAccountId] = useState<number>(0);
|
||||
const [accountToId, setAccountToId] = useState<number>(0);
|
||||
const [amount, setAmount] = useState<number>(0);
|
||||
const [message, setMessage] = useState<string>("");
|
||||
const [receiverId, setReceiverId] = useState<number>(0);
|
||||
const [receiverName, setReceiverName] = useState<string>("");
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
function sendMoney (e: React.FormEvent) {
|
||||
|
|
@ -29,6 +32,8 @@ export default function Home () {
|
|||
name: message
|
||||
})
|
||||
.then(() => {
|
||||
setAmount(0);
|
||||
setMessage("");
|
||||
axios
|
||||
.post("/api/@me/accounts", { token: token })
|
||||
.then((response) => {
|
||||
|
|
@ -40,12 +45,70 @@ export default function Home () {
|
|||
.catch(() => {
|
||||
console.error("Failed to fetch accounts");
|
||||
});
|
||||
|
||||
axios
|
||||
.post("/api/@me/transfers", { token: token })
|
||||
.then((response) => {
|
||||
setTransfers(response.data);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error("Failed to fetch transfers");
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to send money", error.response.data);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteReceiver (id: number) {
|
||||
if (!window.confirm("Are you sure you want to delete this receiver?")) {
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.post("/api/@me/remove-receiver", {
|
||||
token: token,
|
||||
id: id
|
||||
})
|
||||
.then(() => {
|
||||
axios
|
||||
.post("/api/@me/receivers", { token: token })
|
||||
.then((response) => {
|
||||
setReceivers(response.data);
|
||||
setAccountToId(response.data[0].account_id);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error("Failed to fetch receivers");
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to delete receiver", error.response.data);
|
||||
});
|
||||
}
|
||||
|
||||
function addReceiver (e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
axios
|
||||
.post("/api/@me/add-receiver", {
|
||||
token: token,
|
||||
account_id: receiverId,
|
||||
name: receiverName,
|
||||
})
|
||||
.then(() => {
|
||||
axios
|
||||
.post("/api/@me/receivers", { token: token })
|
||||
.then((response) => {
|
||||
setReceivers(response.data);
|
||||
setAccountToId(response.data[0].account_id);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error("Failed to fetch receivers");
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to add receiver", error.response.data);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const storedToken = localStorage.getItem("token");
|
||||
if (storedToken) {
|
||||
|
|
@ -87,6 +150,16 @@ export default function Home () {
|
|||
.catch(() => {
|
||||
console.error("Failed to fetch cards");
|
||||
});
|
||||
|
||||
axios
|
||||
.post("/api/@me/receivers", { token: storedToken })
|
||||
.then((response) => {
|
||||
setReceivers(response.data);
|
||||
setAccountToId(response.data[0].account_id);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error("Failed to fetch receivers");
|
||||
});
|
||||
} else {
|
||||
navigate("/login");
|
||||
}
|
||||
|
|
@ -116,7 +189,7 @@ export default function Home () {
|
|||
<ul>
|
||||
{transfers.map((transfer) => (
|
||||
<li key={transfer.id}>
|
||||
Transfer ID: {transfer.id}, Amount: {transfer.value}
|
||||
Message: {transfer.name}, Amount: {transfer.value}, From: {transfer.sender_name}, To: {transfer.receiver_name} {transfer.receiver_lastname}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -124,7 +197,7 @@ export default function Home () {
|
|||
<p>No transfers found.</p>
|
||||
)}
|
||||
</div>
|
||||
{accounts.length > 0 && (
|
||||
{accounts.length > 0 && receivers.length > 0 && (
|
||||
<div className='bank-section'>
|
||||
<h2>Send money</h2>
|
||||
<form onSubmit={sendMoney}>
|
||||
|
|
@ -136,7 +209,14 @@ export default function Home () {
|
|||
))}
|
||||
</select>
|
||||
<input type="number" placeholder="Amount" onChange={(e) => setAmount(Number(e.target.value))} value={amount}/>
|
||||
<input type="text" placeholder="Recipient Account ID" onChange={(e) => setAccountToId(Number(e.target.value))} value={accountToId}/>
|
||||
|
||||
<select name="" id="" value={String(accountToId)} onChange={(e) => setAccountToId(Number(e.target.value))}>
|
||||
{receivers.map((receiver: any) => (
|
||||
<option key={receiver.id} value={receiver.account_id}>
|
||||
{receiver.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input type="text" placeholder="Message" onChange={(e) => setMessage(e.target.value)} value={message}/>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
|
|
@ -145,13 +225,13 @@ export default function Home () {
|
|||
<div className='bank-section'>
|
||||
<h2>Your Accounts</h2>
|
||||
{accounts.length > 0 ? (
|
||||
<ul>
|
||||
{accounts.map((account) => (
|
||||
<li key={account.id}>
|
||||
Account ID: {account.id}, Balance: {account.balance}, Interest: {account.interest}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
accounts.map((account) => (
|
||||
<div key={account.id}>
|
||||
<p>
|
||||
<strong>Name:</strong> {account.name} - <strong>Balance:</strong> {account.balance} - <strong>Interest:</strong> {account.interest} - <strong>Account ID:</strong> {account.id}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>No accounts found.</p>
|
||||
)}
|
||||
|
|
@ -159,17 +239,40 @@ export default function Home () {
|
|||
<div className='bank-section'>
|
||||
<h2>Your Cards</h2>
|
||||
{cards.length > 0 ? (
|
||||
<ul>
|
||||
{cards.map((card) => (
|
||||
<li key={card.id}>
|
||||
Card ID: {card.id}, Account ID: {card.account_id}, Number: {card.number}, Expiration: {card.expiration}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
cards.map((card: any) => (
|
||||
<div key={card.id}>
|
||||
<p>
|
||||
<strong>Card Account:</strong> {card.account_name} - <strong>Card Number:</strong> {card.number} - <strong>Expiration:</strong> {card.expiration} - <strong>CVC:</strong> {card.cvc}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>No cards found.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className='bank-section'>
|
||||
<h2>Your Receivers</h2>
|
||||
{receivers.length > 0 ? (
|
||||
receivers.map((receiver: any) => (
|
||||
<div key={receiver.id}>
|
||||
<p>
|
||||
<strong>Receiver Name:</strong> {receiver.name} - <strong>Account ID:</strong> {receiver.account_id}
|
||||
</p>
|
||||
<button onClick={() => deleteReceiver(receiver.id)}>Delete</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p>No receivers found.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className='bank-section'>
|
||||
<h2>Add Receiver</h2>
|
||||
<form onSubmit={addReceiver}>
|
||||
<input type="text" placeholder="Receiver Name" onChange={(e) => setReceiverName(e.target.value)} value={receiverName}/>
|
||||
<input type="number" placeholder="Amount" onChange={(e) => setReceiverId(Number(e.target.value))} value={receiverId}/>
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -194,7 +194,7 @@ export default function UserPage() {
|
|||
accounts.map((account: any) => (
|
||||
<div key={account.id}>
|
||||
<p>
|
||||
<strong>Name:</strong> {account.name} - <strong>Balance:</strong> {account.balance} - <strong>Interest:</strong> {account.interest}
|
||||
<strong>Name:</strong> {account.name} - <strong>Balance:</strong> {account.balance} - <strong>Interest:</strong> {account.interest} - <strong>Account ID:</strong> {account.id}
|
||||
</p>
|
||||
<button onClick={() => deleteAccount(account.id)}>Delete account</button>
|
||||
</div>
|
||||
|
|
@ -232,7 +232,7 @@ export default function UserPage() {
|
|||
cards.map((card: any) => (
|
||||
<div key={card.id}>
|
||||
<p>
|
||||
<strong>Card Account:</strong> {card.account_name} - <strong>Card Number:</strong> {card.number} - <strong>Expiration:</strong> {card.expiration} - <strong>CVC:</strong> {card.cvc}
|
||||
<strong>Card Account:</strong> {card.account_name} - <strong>Card Number:</strong> {card.number} - <strong>Expiration:</strong> {card.expiration} - <strong>CVC:</strong> {card.cvc}
|
||||
</p>
|
||||
<button onClick={() => deleteCard(card.id)}>Delete card</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ export type Transfer = {
|
|||
account_to_id: number;
|
||||
name: string;
|
||||
value: number;
|
||||
sender_name: string;
|
||||
receiver_name: string;
|
||||
receiver_lastname: string;
|
||||
}
|
||||
|
||||
export type Transfers = Transfer[];
|
||||
|
|
@ -39,3 +42,12 @@ export type Card = {
|
|||
}
|
||||
|
||||
export type Cards = Card[];
|
||||
|
||||
export type Receiver = {
|
||||
id: number;
|
||||
user_id: number;
|
||||
account_id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export type Receivers = Receiver[];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue