62 lines
2.0 KiB
JavaScript
62 lines
2.0 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import axios from 'axios';
|
||
|
||
const TaskBoard = () => {
|
||
const [tasks, setTasks] = useState([]);
|
||
|
||
useEffect(() => {
|
||
const fetchTasks = async () => {
|
||
try {
|
||
const response = await axios.get('http://127.0.0.1:8000/tasks/');
|
||
setTasks(response.data);
|
||
} catch (error) {
|
||
console.error('Error fetching tasks:', error);
|
||
}
|
||
};
|
||
|
||
fetchTasks();
|
||
}, []);
|
||
|
||
const [taskData, setTaskData] = useState({
|
||
title: '',
|
||
description: '',
|
||
status: 'В ожидании', // По умолчанию
|
||
});
|
||
|
||
const handleTaskChange = (e) => {
|
||
setTaskData({ ...taskData, [e.target.name]: e.target.value });
|
||
};
|
||
|
||
const handleTaskSubmit = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
const response = await axios.post('http://127.0.0.1:8000/tasks/', taskData);
|
||
console.log('Task created:', response.data);
|
||
// Обновите список задач после создания
|
||
} catch (error) {
|
||
console.error('Error creating task:', error);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<h1>Task Board</h1>
|
||
<form onSubmit={handleTaskSubmit}>
|
||
<input type="text" name="title" placeholder="Task Title" onChange={handleTaskChange} required />
|
||
<textarea name="description" placeholder="Task Description" onChange={handleTaskChange} required />
|
||
<button type="submit">Create Task</button>
|
||
</form>
|
||
<ul>
|
||
{tasks.map(task => (
|
||
<li key={task.id}>
|
||
<h2>{task.title}</h2>
|
||
<p>{task.description}</p>
|
||
<p>Status: {task.status}</p>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TaskBoard; |