اپلیکیشن مدیریت وظایف

// نمونه کد برای کامپوننت TaskList
import { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTasks, updateTask, deleteTask } from '@/redux/tasksSlice';
import TaskItem from './TaskItem';
import TaskFilter from './TaskFilter';

export default function TaskList() {
  const [filter, setFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');
  const dispatch = useDispatch();
  const { tasks, loading, error } = useSelector(state => state.tasks);
  
  useEffect(() => {
    dispatch(fetchTasks());
  }, [dispatch]);
  
  const handleStatusChange = (taskId, newStatus) => {
    dispatch(updateTask({ id: taskId, status: newStatus }));
  };
  
  const handleDelete = (taskId) => {
    dispatch(deleteTask(taskId));
  };
  
  const filteredTasks = tasks.filter(task => {
    // فیلتر بر اساس وضعیت
    if (filter !== 'all' && task.status !== filter) return false;
    
    // فیلتر بر اساس جستجو
    if (searchTerm && !task.title.toLowerCase().includes(searchTerm.toLowerCase())) return false;
    
    return true;
  });
  
  if (loading) return <div>در حال بارگذاری...</div>;
  if (error) return <div>خطا در بارگذاری وظایف</div>;
  
  return (
    <div>
      <TaskFilter 
        filter={filter} 
        setFilter={setFilter}
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
      />
      
      {filteredTasks.length === 0 ? (
        <div className="text-center py-8 text-gray-500">هیچ وظیفه‌ای یافت نشد</div>
      ) : (
        <div className="space-y-4">
          {filteredTasks.map(task => (
            <TaskItem 
              key={task.id} 
              task={task} 
              onStatusChange={handleStatusChange}
              onDelete={handleDelete}
            />
          ))}
        </div>
      )}
    </div>
  );
}