Notes

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { fetchTaskById, updateTask} from '../utils/api'
import { Task } from '../types';
import './EditTaskForm.css';

const EditTaskForm: React.FC = () => {
const { id } = useParams<{id: string}>();
const [task, setTask] = useState<Task | null>(null);
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [dueDate, setDueDate] = useState('');
const [status, setStatus] = useState('');
const navigate = useNavigate();

useEffect(() => {
const fetchTask = async () => {
if (id) {
const fetchedTask = await fetchTaskById(id);
if (fetchedTask) {
setTask(fetchedTask);
setTitle(fetchedTask.title);
setDescription(fetchedTask.description);
setDueDate(fetchedTask.dueDate);
setStatus(fetchedTask.status);
} else {
console.error('Task not found');
}
} else {
console.error('Invalid task ID');
}

};

fetchTask();
}, [id]);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (task && id) {
const updatedTask: Task = {
...task,
title,
description,
dueDate,
status,
};
await updateTask(id, updatedTask);
console.log('Task updated successfully');
navigate(`/task/${id}`);
}

};

if (!task) {
return <div>Loading...</div>
}

return (
<form className="task-form" onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="title">Title</label>
<input
type="text"
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="form-group">
<label htmlFor="description">Description</label>
<textarea
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
></textarea>
</div>
<div className="form-group">
<label htmlFor="dueDate">Due Date</label>
<input
type="date"
id="dueDate"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
/>
</div>
<div className="form-group">
<label htmlFor="status">Status</label>
<select
id="status"
value={status}
onChange={(e) => setStatus(e.target.value)}
>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
</select>
</div>
<button type="submit">Update Task</button>
</form>
);
};
export default EditTaskForm;