// src/components/TransactionItem.
jsx
import React, { useContext } from 'react';
import { TransactionContext } from '../context/TransactionContext';
const TransactionItem = ({ transaction }) => {
// Access context function to delete transactions
const { deleteTransaction } = useContext(TransactionContext);
// Function to handle transaction deletion
const handleDelete = () => {
deleteTransaction([Link]);
};
return (
<li className="transaction-item">
<span>{[Link]}</span>
<span>{[Link]}</span>
<span>{[Link]}</span>
<span>{[Link]}</span>
<button onClick={handleDelete}>Delete</button>
</li>
);
};
export default TransactionItem;
@@@@@@@@
// src/components/[Link]
import React, { useState, useContext } from 'react';
import { TransactionContext } from '../context/TransactionContext';
const AddTransactionForm = ({ initialTransaction, editMode }) => {
// Access context functions to add or update transactions
const { addTransaction, updateTransaction } = useContext(TransactionContext);
// State to hold form data, including type and date
const [transaction, setTransaction] = useState(initialTransaction || { title: '', amount: 0, type: 'Expense',
date: '' });
// State to hold form validation errors
const [errors, setErrors] = useState({});
// Function to handle form submission
const handleSubmit = (event) => {
[Link]();
if (validateForm()) {
if (editMode) {
updateTransaction(transaction); // Update the transaction if in edit mode
} else {
addTransaction({ ...transaction, id: [Link]() }); // Add a new transaction if not in edit mode
}
setTransaction({ title: '', amount: 0, type: 'Expense', date: '' }); // Reset form after submission
};
// Function to handle input changes
const handleInputChange = (event) => {
const { name, value } = [Link];
setTransaction({ ...transaction, [name]: value }); // Update form data in state
};
// Function to validate form fields
const validateForm = () => {
let isValid = true;
const errors = {};
if (![Link]()) {
[Link] = 'Title is required';
isValid = false;
if ([Link] <= 0 || isNaN([Link])) {
[Link] = 'Amount must be a positive number';
isValid = false;
}
if (![Link]) {
[Link] = 'Date is required';
isValid = false;
setErrors(errors);
return isValid;
};
return (
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="title">Title:</label>
<input
type="text"
id="title"
name="title"
value={[Link]}
onChange={handleInputChange}
placeholder="Enter title"
className={[Link] ? 'is-invalid' : ''}
required
/>
{[Link] && <div className="invalid-feedback">{[Link]}</div>}
</div>
<div className="form-group">
<label htmlFor="amount">Amount:</label>
<input
type="number"
id="amount"
name="amount"
value={[Link]}
onChange={handleInputChange}
placeholder="Enter amount"
className={[Link] ? 'is-invalid' : ''}
required
/>
{[Link] && <div className="invalid-feedback">{[Link]}</div>}
</div>
<div className="form-group">
<label htmlFor="type">Type:</label>
<select
id="type"
name="type"
value={[Link]}
onChange={handleInputChange}
className="form-control"
required
>
<option value="Expense">Expense</option>
<option value="Income">Income</option>
<option value="Saving">Saving</option>
</select>
</div>
<div className="form-group">
<label htmlFor="date">Date:</label>
<input
type="date"
id="date"
name="date"
value={[Link]}
onChange={handleInputChange}
className={[Link] ? 'is-invalid' : ''}
required
/>
{[Link] && <div className="invalid-feedback">{[Link]}</div>}
</div>
<button type="submit" className="btn btn-primary">
{editMode ? 'Update Transaction' : 'Add Transaction'}
</button>
</form>
);
};
export default AddTransactionForm;
@@@@@@
// src/context/[Link]
import React, { createContext, useState } from 'react';
// Create the context
export const TransactionContext = createContext();
// Context provider component
export const TransactionProvider = ({ children }) => {
// State to hold all transactions
const [transactions, setTransactions] = useState([]);
// Function to add a new transaction
const addTransaction = (transaction) => {
setTransactions([...transactions, transaction]);
};
// Function to update an existing transaction
const updateTransaction = (updatedTransaction) => {
setTransactions(
[Link]((transaction) =>
[Link] === [Link] ? updatedTransaction : transaction
)
);
};
// Function to delete a transaction
const deleteTransaction = (id) => {
setTransactions([Link](transaction => [Link] !== id));
};
// Context value to provide to consumers
const contextValue = {
transactions,
addTransaction,
updateTransaction,
deleteTransaction,
};
// Provide the context value to child components
return (
<[Link] value={contextValue}>
{children}
</[Link]>
);
};