frontend/src/components/TasksList.tsx - master - PashigorevAY/TestFastAPI

frontend/src/components/TasksList.tsx
61 строка2 KB
Pashigorev
Initial commit
05 июл 2026, 21:43
05 июл 2026, 21:4319770a6
import { useState, useEffect } from 'react';
import { Task } from '../types';
import { api } from '../api';

interface TasksListProps {
  catalogName: string;
  onSelectTask: (taskId: string) => void;
  onCreateTask: (task: Task) => void;
  onBack: () => void;
}

export function TasksList({ catalogName, onSelectTask, onCreateTask, onBack }: TasksListProps) {
  const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    loadTasks();
  }, [catalogName]);

  async function loadTasks() {
    const data = await api.getTasks(catalogName);
    setTasks(data.tasks);
  }

  async function handleCreateTask() {
    const task = await api.createTask(catalogName);
    onCreateTask(task);
  }

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', alignItems: 'center' }}>
        <button onClick={onBack} style={{ backgroundColor: '#e0e0e0' }}>← Назад</button>
        <h2 style={{ flex: 1 }}>Каталог: {catalogName}</h2>
        <button onClick={handleCreateTask} style={{ backgroundColor: '#4CAF50', color: 'white' }}>
          Создать задачу
        </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '20px' }}>
        {tasks.map((task) => (
          <div
            key={task.id}
            onClick={() => onSelectTask(task.id)}
            style={{
              padding: '20px',
              border: '1px solid #ddd',
              borderRadius: '8px',
              cursor: 'pointer',
              transition: 'box-shadow 0.2s',
            }}
            onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)')}
            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}
          >
            <h4 style={{ margin: 0, color: '#666' }}>{task.id}</h4>
            <p style={{ margin: '8px 0 0 0', fontWeight: '500' }}>{task.title}</p>
          </div>
        ))}
      </div>
    </div>
  );
}