React To-do Uygulaması API ile Görev Tamamlama #5

Merhaba arkadaşlar, bu yazımda sizlere React To-do Uygulaması API ile Görev Tamamlama konusundan bahsedeceğim.

Daha önce görevleri API’den listelemeyi, ekleme yapmayı, güncelleme yapmayı öğrendik. Şimdi ise kullanıcının görevleri tamamlamasını ve bunların API ile kaydedilmesini sağlayacağız.

Adım 1: TodoItem Componentini Güncelleme

İlk olarak, TodoItem componentimizi güncelleyerek tamamlama işlevselliğini ekleyeceğiz. Bu işlevsellik, kullanıcının bir görevi tamamlamasını ve tamamlanan görevin durumunu API ile kaydetmesini sağlayacak.

import React from 'react';
import axios from 'axios';

function TodoItem({ todo }) {
  const handleComplete = async () => {
    try {
      const updatedTodo = { ...todo, completed: true };
      await axios.put(`https://localhost:5065/todos/${todo.id}`, updatedTodo);
      // Görev başarıyla tamamlandığında yapılacak işlemler
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <li>
      <span>{todo.title}</span>
      {!todo.completed && <button onClick={handleComplete}>Tamamla</button>}
    </li>
  );
}

export default TodoItem;

Yukarıdaki kodda, TodoItem componentini güncelledik ve handleUpdate adında bir fonksiyon ekledik. Bu fonksiyon, görev başlığının güncellenmesini sağlar. Ayrıca, handleComplete fonksiyonunu da içerisine aldık, böylece görev tamamlanma işlevselliği ve güncelleme işlevselliği aynı bileşende bulunur.

handleUpdate fonksiyonunda, kullanıcının görev başlığını değiştirmesi durumunda yapılacak işlemler yer alır. Axios PUT isteği ile API’ye güncellenen görevi göndererek görevin başlığını güncelleme işlemini gerçekleştiririz.

TodoItem componentinde, görev başlığını düzenlemek için bir metin girişi (input) kullanırız. defaultValue özelliği ile mevcut başlığı gösteririz. Kullanıcı metin girişinden çıktığında (onBlur olayı), handleUpdate fonksiyonunu tetikleriz.

Bu şekilde, TodoItem componenti hem görev güncellemeyi hem de tamamlamayı gerçekleştirebilir. Uygulama içerisinde bu bileşeni kullanarak kullanıcılar görevleri düzenleyebilir, tamamlayabilir ve güncellemeleri API ile kaydetmiş oluruz.

Bir sonraki adımlarda görevleri silmeyi ve uygulamayı yayınlamayı öğreneceğiz.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…