Task Service

Pada file taskService.js akankita gunakan sebagai modul untuk berkomunikasi dengan API dengan memanfaatkan Axios. Silakan buka file tersebut kemudian masukkan kode berikut ini:

import axios from "axios";

const API_URL = "http://127.0.0.1:8000/api/tasks";

export const getTasks = async (page = 1) => {
    const response = await axios.get(`${API_URL}?page=${page}`);
    return {
        tasks: response.data.data.data, 
        totalPages: response.data.data.last_page 
    };
};

export const addTask = async (title, category) => {
    const response = await axios.post(API_URL, { title, category });
    return response.data.data;
};


export const updateTask = async (id, title, completed, category) => {
    const response = await axios.put(`${API_URL}/${id}`, { title, completed, category });
    return response.data.data;
};

export const deleteTask = async (id) => {
    await axios.delete(`${API_URL}/${id}`);
};

Base Url

const API_URL = "http://127.0.0.1:8000/api/tasks";

Variabel API_URL menyimpan base URL API, ednpoint diatas merupakaan endpoint yang kita buat sebelumnya dengan laravel. Variabel ini akan digunakan untuk semua http requests seperti contoh untuk get data, update data, create data dan delete data.

getTasks

export const getTasks = async (page = 1) => {
    const response = await axios.get(`${API_URL}?page=${page}`);
    return {
        tasks: response.data.data.data, 
        totalPages: response.data.data.last_page 
    };
};

kode diatas berfungsi untuk mengambil dan menampilkan data task dan juga dilengkapi dengan pagination. adapun response yang diterima seperti berikut ini:

{
    "data": {
        "data": [ {task1}, {task2} ],
        "last_page": 5
    }
}

addTask

export const addTask = async (title, category) => {
    console.log("Title:", title);
    console.log("Category:", category); 
    const response = await axios.post(API_URL, { title, category });
    return response.data.data;
};

Baris kode diatas berfungsi untuk membuat task/data todo pada aplikasi kita, dimana data yang dikirim berupa title dan category dengan menggunakan http POST

updateTask

export const updateTask = async (id, title, completed, category) => {
    const response = await axios.put(`${API_URL}/${id}`, { title, completed, category });
    return response.data.data;
};

Fungsi updateTask bertujuan untuk memperbarui data task berdasarkan id. Dengan menggunakan HTTP PUT untuk mengirim data baru yakni: (title, completed, dan category).

deleteTask

export const deleteTask = async (id) => {
    await axios.delete(`${API_URL}/${id}`);
};

Fungsi deleteTask bertujuan untuk menghapus data task berdasarkan id, dengan menggunakan HTTP DELETE.

Kesimpulan

File taskService.js berisi baris kode yang bertanggung jawab dan juga sebagai implementasi API client menggunakan Axios untuk mengelola tugas (tasks) dalam sistem berbasis Laravel. Fungsinya meliputi:

1. Mengambil daftar task dengan pagination
2. menambahkan task baru
3. Mengupdate data task
4. Menghapus data task

Pada materi berikutnya, kita akan membuat component header.