Creating a Travel Journal App using React

// App.js

import React, { useState } from 'react';
import AddEntry from './components/AddEntry';
import EntryList from './components/EntryList';
import './App.css';
// index.js or App.js

import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
	const [entries, setEntries] = useState([]);
	const [editIndex, setEditIndex] = useState(null);
	// New state to keep track of the index being edited

	const addEntry = (entry) => {
		if (editIndex !== null) {
			// If editIndex is not null, it means we are in edit mode
			const newEntries = [...entries];
			newEntries[editIndex] = entry;
			// Replace the entry at editIndex with the updated entry
			setEntries(newEntries);
			setEditIndex(null);
			// Reset editIndex after editing
		} else {
			setEntries([...entries, entry]);
		}
	};

	const handleDelete = (index) => {
		const newEntries = [...entries];
		newEntries.splice(index, 1);
		setEntries(newEntries);
	};

	const handleEdit = (index) => {
		setEditIndex(index);
		// Set the index of the entry being edited
		/* You may also pre-fill the AddEntry 
			form with the entry details for editing */
	};

	return (
		<div className="container">
			<div className="form-container">
				<h1 className="text-center">
					Travel Journal
				</h1>
				<AddEntry onAdd={addEntry}
					editIndex={editIndex}
					entries={entries} />
			</div>
			<div className="table-container p-4">
				<EntryList entries={entries}
					onDelete={handleDelete}
					onEdit={handleEdit} />
			</div>
		</div>
	);
}

export default App;

// EntryList.js

import React from 'react';

const EntryList = ({ entries, onDelete, onEdit }) => {
	return (
		<div className="table-responsive">
			<table className="table table-striped 
								table-bordered">
				<thead className="thead-dark">
					<tr>
						<th>Title</th>
						<th>Description</th>
						<th>Date</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					{
						entries.map((entry, index) => (
							<tr key={index}>
								<td>{entry.title}</td>
								<td>{entry.description}</td>
								<td>{entry.date}</td>
								<td>
									<button className="btn btn-sm 
													btn-warning mr-2"
										onClick={
											() =>
												onEdit(index)
										}>
										Edit
									</button>
									<button className="btn btn-sm btn-danger"
										onClick={
											() =>
												onDelete(index)
										}>
										Delete
									</button>
								</td>
							</tr>
						))
					}
				</tbody>
			</table>
		</div>
	);
};

export default EntryList;

// AddEntry.js

import React,
{
	useState,
	useEffect
} from 'react';

const AddEntry = ({ onAdd, editIndex, entries }) => {
	const [title, setTitle] = useState('');
	const [description, setDescription] = useState('');
	const [date, setDate] = useState('');

	useEffect(() => {
		if (editIndex !== null) {
			const entryToEdit = entries[editIndex];
			setTitle(entryToEdit.title);
			setDescription(entryToEdit.description);
			setDate(entryToEdit.date);
		}
	}, [editIndex, entries]);

	const handleSubmit = (e) => {
		e.preventDefault();
		if (!title || !description || !date) return;
		onAdd({ title, description, date });
		setTitle('');
		setDescription('');
		setDate('');
	};

	return (
		<div>
			<h2>
				{
					editIndex !== null ?
						'Edit Entry' :
						'Add New Entry'
				}
			</h2>
			<form onSubmit={handleSubmit}>
				<input
					type="text"
					placeholder="Title"
					value={title}
					onChange={
						(e) =>
							setTitle(e.target.value)
					} />
				<textarea
					placeholder="Description"
					value={description}
					onChange={
						(e) =>
							setDescription(e.target.value)
					}>
				</textarea>
				<input
					type="date"
					value={date}
					onChange={
						(e) =>
							setDate(e.target.value)} />
				<button type="submit">
					{
						editIndex !== null ?
							'Edit Entry' :
							'Add Entry'
					}
				</button>
			</form>
		</div>
	);
};

export default AddEntry;