Did you check expiration of the JWT?
#link budgets with my expenses in my application, MERN stack
spare quail
I hope you share more details ...
I can share my code
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import AddTransaction from '../components/AddTransactions';
import RecentExpenses from '../components/RecentExpenses';
import ExpenseItem from '../components/ExpenseItem'; // Importez le composant ExpenseItem
const TransactionsPage = () => {
const [transactions, setTransactions] = useState([]);
useEffect(() => {
// Code pour charger les transactions récentes depuis le serveur...
}, []);
const handleDeleteExpense = async (expenseId) => {
try {
await axios.delete(`http://localhost:3000/transactions/${expenseId}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
// Mettre à jour la liste des transactions après la suppression
setTransactions(transactions.filter(expense => expense._id !== expenseId));
} catch (error) {
console.error('Erreur lors de la suppression de la dépense:', error.response.data);
}
};
return (
<div>
<h2>Page des Transactions</h2>
<AddTransaction />
{/* Ajout du composant RecentExpenses en lui passant la fonction de suppression */}
<RecentExpenses onDeleteExpense={handleDeleteExpense} />
{/* Boucle de rendu des transactions avec les détails du budget */}
{transactions.map(transaction => (
<ExpenseItem
// Passer les détails du budget à ExpenseItem
handleDelete={handleDeleteExpense}
/>
))}
</div>
);
};
export default TransactionsPage;
my transactions page
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ExpenseItem from './ExpenseItem';
const RecentExpenses = () => {
const [recentExpenses, setRecentExpenses] = useState([]);
useEffect(() => {
fetchRecentExpenses();
}, []);
const fetchRecentExpenses = async () => {
try {
const response = await axios.get('http://localhost:3000/transactions', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
setRecentExpenses(response.data);
} catch (error) {
console.error('Erreur lors de la récupération des dépenses récentes:', error);
}
};
const handleDeleteExpense = async (expenseId) => {
try {
await axios.delete(`http://localhost:3000/transactions/${expenseId}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
await fetchRecentExpenses(); // Mettre à jour les dépenses après la suppression
} catch (error) {
console.error('Erreur lors de la suppression de la dépense:', error);
}
};
useEffect(() => {
fetchRecentExpenses(); // Mettre à jour les dépenses après chaque ajout ou suppression
}, [recentExpenses]);
return (
<div>
<h2>Recent Expenses</h2>
{recentExpenses.map(expense => (
<ExpenseItem key={expense._id} expense={expense} handleDelete={handleDeleteExpense} />
))}
</div>
);
};
export default RecentExpenses;
recentexpenses where i GET and show my recent expenses
// ExpenseItem.js
import React from 'react';
const ExpenseItem = ({ expense, budget, handleDelete }) => {
return (
<div key={expense._id} style={{ border: '1px solid black', padding: '10px', margin: '10px 0' }}>
<p>Name: {expense.name}</p>
<p>Amount: {expense.amount}</p>
{budget && (
<div >
<p>Budget Name: {budget.name}</p>
<p>Budget Amount: {budget.amount}</p>
</div>
)}
<button onClick={() => handleDelete(expense._id)}>Delete</button>
</div>
);
};
export default ExpenseItem;
ExpenseItem file
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
const TransactionsPage = () => {
const navigate = useNavigate();
const [transactions, setTransactions] = useState([]);
const [nouvelTransaction, setNouvelTransaction] = useState({
name: '',
amount: '',
expenseid: ''
});
const [budgets, setBudgets] = useState([]);
const [userBudgets, setUserBudgets] = useState([]);
const [nouvelBudget, setNouvelBudget] = useState({
name: '',
amount: ''
});
useEffect(() => {
fetchBudgets();
}, []);
const fetchBudgets = () => {
axios.get('http://localhost:3000/budget', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
})
.then(response => {
const userBudgets = response.data.filter(budget => budget.userId === localStorage.getItem('userId'));
setBudgets(userBudgets);
setUserBudgets(userBudgets);
})
.catch(error => {
console.error('Erreur lors de la récupération des budgets:', error);
});
};
const ajouterEntite = async () => {
try {
const transactionData = {
...nouvelTransaction,
expenseid: nouvelTransaction.budgetId,
userId: localStorage.getItem('userId') // Inclure l'ID de l'utilisateur
};
const transactionResponse = await axios.post('http://localhost:3000/transactions', transactionData, {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
console.log('Transaction ajoutée avec succès:', transactionResponse.data);
setTransactions([...transactions, transactionResponse.data]);
setNouvelTransaction({ name: '', amount: '', budgetId: '' });
navigate('/transactions');
} catch (transactionError) {
console.error('Erreur lors de l\'ajout de la transaction:', transactionError.response.data);
console.log('Réponse du serveur:', transactionError.response);
}
};
const ajouterNouveauBudget = async () => {
try {
const userId = localStorage.getItem('userId');
const budgetData = {
...nouvelBudget,
userId: userId
};
const budgetResponse = await axios.post('http://localhost:3000/budget', budgetData, {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
my transactions compentents part1
console.log('Nouveau budget ajouté avec succès:', budgetResponse.data);
fetchBudgets();
} catch (error) {
console.error('Erreur lors de l\'ajout du nouveau budget:', error.response.data);
}
};
const handleInputChange = (e) => {
setNouvelTransaction({
...nouvelTransaction,
[e.target.name]: e.target.value,
});
};
const handleNewBudgetChange = (e) => {
setNouvelBudget({
...nouvelBudget,
[e.target.name]: e.target.value,
});
};
return (
<div>
<h2>Add new expense</h2>
<div>
<label>Expense name:
<input type="text" name="name" onChange={handleInputChange} />
</label>
<label>Amount:
<input type="text" name="amount" onChange={handleInputChange} />
</label>
<label>Category:
<select name="budgetId" onChange={handleInputChange}>
<option value="">Select Budget</option>
{budgets.map(budget => (
<option key={budget._id} value={budget._id}>{budget.name} - {budget.amount}</option>
))}
</select>
</label>
</div>
<button onClick={ajouterEntite}>Add Expense</button>
<h2>Add new budget</h2>
<div>
<label>Budget name:
<input type="text" name="name" onChange={handleNewBudgetChange} />
</label>
<label>Amount:
<input type="text" name="amount" onChange={handleNewBudgetChange} />
</label>
</div>
<button onClick={ajouterNouveauBudget}>Add Budget</button>
<h2>Existing Budgets</h2>
<ul>
{userBudgets.map(budget => (
<div key={budget._id} style={{ border: '1px solid black', padding: '10px', margin: '10px 0' }}>
<p>Name: {budget.name}</p>
<p>Amount: {budget.amount}</p>
</div>
))}
</ul>
</div>
);
};
export default TransactionsPage;
PART 2
my backend code
tawny torrent
okay, buddy, let me take a look at your code. I am on the way home.
spare quail
okay bro