حذف، ویرایش و تیک‌زدن وظایف

مقدمه

در درس قبل، ما رابط کاربری اولیه اپلیکیشن خود را ساختیم. در این درس، با پیاده‌سازی منطق اصلی CRUD (Create, Read, Update, Delete)، اپلیکیشن خود را کاملاً تعاملی خواهیم کرد. ما توابع handler لازم برای افزودن، حذف کردن و تغییر وضعیت (تیک زدن) وظایف را در کامپوننت والد (TodoApp) ایجاد کرده و آنها را از طریق props به کامپوننت‌های فرزند پاس خواهیم داد.

۱. افزودن یک وظیفه جدید

ابتدا، تابع addTodo را در کامپوننت TodoApp پیاده‌سازی می‌کنیم. این تابع یک متن را دریافت کرده، یک شیء وظیفه جدید با id منحصر به فرد می‌سازد و آن را به لیست todos اضافه می‌کند.

JAVASCRIPT (React)

function TodoApp() {
  const [todos, setTodos] = useState([/* ... */]);

  const addTodo = text => {
    const newTodo = {
      id: Date.now(), // Simple way to get a unique ID
      text: text,
      completed: false
    };
    setTodos([...todos, newTodo]);
  };
  
  return (
    <div>
      {/* ... */}
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} />
    </div>
  );
}

ما تابع addTodo را به عنوان prop به کامپوننت TodoForm پاس می‌دهیم. همانطور که در درس قبل دیدیم، TodoForm این تابع را پس از ارسال فرم، با مقدار ورودی فراخوانی خواهد کرد. ما از Date.now() برای تولید یک id ساده و منحصر به فرد استفاده کرده‌ایم و با سینتکس spread (...todos) یک آرایه جدید با وظیفه جدید در انتهای آن می‌سازیم.

۲. تغییر وضعیت (تیک زدن) یک وظیفه

برای تغییر وضعیت completed یک وظیفه، ما یک تابع handler به نام toggleTodo می‌سازیم. این تابع id وظیفه‌ای که باید تغییر کند را دریافت کرده، با استفاده از map یک آرایه جدید می‌سازد و وضعیت completed آن وظیفه خاص را معکوس می‌کند.

JAVASCRIPT (React)

// In TodoApp component
const toggleTodo = id => {
  setTodos(
    todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  );
};

ما این تابع را به TodoList و سپس به هر کامپوننت TodoItem پاس می‌دهیم تا بتواند با کلیک روی وظیفه، آن را فراخوانی کند.

۳. حذف یک وظیفه

منطق حذف یک وظیفه نیز بسیار شبیه به تغییر وضعیت آن است. ما یک تابع handler به نام deleteTodo می‌سازیم که id وظیفه مورد نظر را دریافت کرده و با استفاده از filter، یک آرایه جدید بدون آن وظیفه ایجاد می‌کند.

JAVASCRIPT (React)

// In TodoApp component
const deleteTodo = id => {
  setTodos(todos.filter(todo => todo.id !== id));
};

این تابع نیز از طریق props به هر TodoItem ارسال می‌شود تا به دکمه حذف آن متصل شود.

در این درس، ما با پیاده‌سازی منطق CRUD، اپلیکیشن مدیریت کارهای خود را کاملاً تعاملی و کاربردی کردیم. دیدیم که چگونه با تعریف توابع handler در کامپوننت والد و پاس دادن آنها به عنوان props، می‌توانیم state اصلی برنامه را از کامپوننت‌های فرزند تغییر دهیم. در درس بعدی، به «ذخیره‌سازی داده‌ها با localStorage» خواهیم پرداخت تا وظایف کاربر حتی پس از بستن و باز کردن مجدد مرورگر، حفظ شوند.