React To-do Uygulaması API ile Görev Güncelleme #4

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

Bu yazıda, React to-do uygulamasında API ile görev güncelleme adımını öğreneceğiz. Daha önceki yazılarda görevleri API’den listelemeyi, ekleme yapmayı ve kullanıcıya göstermeyi öğrendik. Şimdi ise kullanıcının mevcut görevlerin güncellemesini ve bunların API’ye iletilerek yapılmasını sağlayacağız.

Adım 1: TodoItem Componentini Güncelleme

Öncelikle, her bir görevi temsil eden TodoItem componentini güncelleyeceğiz. Bu component, görevleri güncellemek için bir düzenleme işlevselliği sağlayacak.

import React, { useState } from 'react';
import axios from 'axios';

function TodoItem({ todo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [title, setTitle] = useState(todo.title);

  const handleInputChange = (e) => {
    setTitle(e.target.value);
  };

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = async () => {
    try {
      await axios.put(`https://localhost:5065/api/todos/${todo.id}`, { title });
      setIsEditing(false);
      // Görev başarıyla güncellendiğinde yapılacak işlemler
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <li>
      {isEditing ? (
        <>
          <input type="text" value={title} onChange={handleInputChange} />
          <button onClick={handleSave}>Kaydet</button>
        </>
      ) : (
        <>
          <span>{todo.title}</span>
          <button onClick={handleEdit}>Düzenle</button>
        </>
      )}
    </li>
  );
}

export default TodoItem;

Yukarıdaki kodda, TodoItem componentinde isEditing ve title adında iki adet state ve setter’ı tanımlıyoruz. isEditing state’i, görevin düzenleme modunda olup olmadığını tutacak. title state’i ise görevin başlığını tutacak.

handleInputChange fonksiyonu, giriş alanındaki değişiklikleri yakalar ve setTitle aracılığıyla title state’ini günceller.

handleEdit fonksiyonu, düzenleme modunu açar ve isEditing state’ini true olarak ayarlar.

handleSave fonksiyonu, düzenlenen görevi API’ye göndererek günceller. Axios PUT isteği kullanarak görevi güncelleriz. Görev başarıyla güncellendikten sonra setIsEditing aracılığıyla düzenleme modunu kapatırız. Hata durumunda, hatayı konsola yazdırırız.

Render işlemi, isEditing state’ine göre farklı içerikler gösterir. Eğer düzenleme moduna geçiş yaptıysak, giriş alanını ve kaydet düğmesini, değilsek görevin başlığını ve düzenle düğmesini render ederiz.

Adım 2: TodoList Componentini Güncelleme

Şimdi, TodoList componentini güncelleyerek her bir görevi temsil eden TodoItem componentini kullanacağız ve kullanıcının görevleri güncellemesini sağlayacağız.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import TodoItem from './TodoItem';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('https://localhost:5065/api/todos');
      setTodos(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

export default TodoList;

Yukarıdaki kodda, TodoList componentinde todos adında bir state ve setter’ı tanımlıyoruz. Bu state, API’den alınan görevleri tutacaktır.

useEffect kullanarak, componentin yüklendiği anda fetchData fonksiyonunu çağırıyoruz. Bu fonksiyon, API’den görevleri getirir ve todos state’ini günceller.

Render işlemi, todos state’indeki her bir görev için TodoItem componentini render eder.

Adım 3: App Componentini Güncelleme

Son olarak, App componentimizi güncelleyerek TodoList componentini kullanacağız ve kullanıcının görevleri güncellemesini sağlayacağız.

import React from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

function App() {
  return (
    <div className="App">
      <h1>React To-do Uygulaması</h1>
      <AddTodo />
      <TodoList />
    </div>
  );
}

export default App;

Bu şekilde, React to-do uygulamasında kullanıcının görevleri güncellemesini ve bunları API’ye kaydetmesini sağlamış oluruz. Bir sonraki yazıda görevleri tamamlamayı öğreneceğiz.

Umarım faydalı olur.

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