Primer Test

api.js

import { HTTPError } from "./errors";

const BASE_API_ENDPOINT = import.meta.API_END_POINT;
const AUTH_TOKEN = import.meta.env.VITE_API_TOKEN;

const todosAPIClient = createTodosAPIClient();

export async function getTodos() {
    try {
        const res = await todosAPIClient();

        if (!res.ok) {
            throw new HTTPError("Oops! something went wrong fetching the todos", res.status, res.statusText);
        }

        const data = await res.json();

        return data;
    } catch (error) {
        console.error(error);
        throw error;
    }
}

export async function createNewTodo(content) {
    try {
        const newTodo = { content };

        const res = await todosAPIClient(BASE_API_ENDPOINT, "POST", JSON.stringify(newTodo));

        if (!res.ok) {
            throw new HTTPError("Oops! something went wrong while creating a new todo", res.status, res.statusText);
        }
    } catch (error) {
        console.error(error);
        throw error;
    }
}


export async function completeTodo(id) {
    try {

        const res = await todosAPIClient(`${BASE_API_ENDPOINT}/${id}/close`, "POST");

        if (!res.ok) {
            throw new HTTPError("Oops! something went wrong while attempting to close a todo", res.status, res.statusText);
        }
    } catch (error) {
        console.error(error);
        throw error;
    }
}

function createTodosAPIClient() {
    const headers = {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${AUTH_TOKEN}`
    };

    return (url = BASE_API_ENDPOINT, method = "GET", body = undefined) => {
        return fetch(url, {
            headers,
            method,
            ...(body ? { body } : {})
        });
    }
}

errors.js

export class HTTPError extends Error {
    constructor(message, statusCode, statusText,) {
        super(message);
        this.statusCode = statusCode;
        this.statusText = statusText;
        this.name = 'HTTPError';
    }
}

useTodos.jsx

import { useState, useEffect, useCallback } from "react";
import { getTodos, createNewTodo, completeTodo } from "./api";

export function useTodos() {
    const [todos, setTodos] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const fetchTodos = useCallback(async () => {
        try {
            setLoading(true);
            setError(null);
            const todos = await getTodos();
            setTodos(todos);
            setLoading(false);
        } catch (error) {
            setError(error);
            setLoading(false);
        } 
    }, []);

    const addTodo = useCallback(async (content) => {
        try {
            setLoading(true);
            setError(null);
            await createNewTodo(content);
            await fetchTodos();
        } catch (error) {
            setError(error);
            setLoading(false);
        } 
    }, []);

    const setTodoToDone = useCallback(async (id) => {
        try {
            setLoading(true);
            setError(null);
            await completeTodo(id);
            await fetchTodos();
        } catch (error) {
            setError(error);
            setLoading(false);
        } 
    }, []);
  
  
    useEffect(() => {
     fetchTodos();
    }, []);
  
    return {
      todos,
      loading,
      error,
      addTodo,
      setTodoToDone
    }
  }