import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
const Investments = () => {
const [investments, setInvestments] = useState([]);
const [amount, setAmount] = useState('');
const [price, setPrice] = useState('');
const [type, setType] = useState('');
const [bitcoinHistory, setBitcoinHistory] = useState([]);
const [error, setError] = useState('');
const token = localStorage.getItem('token');
useEffect(() => {
const fetchData = async () => {
try {
const [investmentsRes, bitcoinHistoryRes] = await Promise.all([
axios.get('https://rockefeller-finance-backend.onrender.com/api/investments', {
headers: { Authorization: `Bearer ${token}` },
}),
axios.get('https://rockefeller-finance-backend.onrender.com/api/bitcoin-history'),
]);
setInvestments(investmentsRes.data);
setBitcoinHistory(bitcoinHistoryRes.data);
} catch (err) {
setError(err.response?.data?.error || 'Lỗi lấy dữ liệu');
}
};
fetchData();
}, [token]);
const handleAddInvestment = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
'https://rockefeller-finance-backend.onrender.com/api/investments',
{ amount: parseFloat(amount), price: parseFloat(price), type },
{ headers: { Authorization: `Bearer ${token}` } }
);
setInvestments(response.data);
setAmount('');
setPrice('');
setType('');
} catch (err) {
setError(err.response?.data?.error || err.response?.data?.warning || 'Lỗi thêm đầu tư');
}
};
const handleDeleteInvestment = async (index) => {
try {
const response = await axios.delete(
`https://rockefeller-finance-backend.onrender.com/api/investments/${index}`,
{ headers: { Authorization: `Bearer ${token}` } }
);
setInvestments(response.data);
} catch (err) {
setError(err.response?.data?.error || 'Lỗi xóa đầu tư');
}
};
const chartData = {
labels: bitcoinHistory.map((data) => data.date),
datasets: [
{
label: 'Giá Bitcoin (USD)',
data: bitcoinHistory.map((data) => data.price),
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
},
],
};
return (
Quản lý đầu tư
{error &&{error}
}Lịch sử đầu tư
-
{investments.map((investment, index) => (
- {investment.date}: {investment.type} - {investment.amount} VND @ {investment.price} USD ))}