custom hook api

TodoList.js

import React from "react";
import "./style.css";
import useApi from "./useApi.js";
import Loader from "./Loader";
const { useRef, useEffect } = React;

export default function TodoList(props) {
  const BASE_URL = `https://guysgv.wixsite.com/todo-api/_functions/todo/${
    props.selectedList.id
  }`;

  const [data, isQuerying, api] = useApi(BASE_URL);

  return (
    <div className="toDoApp">
      <div className="header">To Do List ({props.selectedList.title})</div>
      <div className="listContainer">
        {isQuerying && (
          <div className="loaderContainer">
            <Loader />
          </div>
        )}
        {data && (
          <div className="list">
            {data.map(item => {
              return (
                <div className="listItem" key={item.id}>
                  {item.title}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

useApi.js

const { useState } = React;
 
export default function useApi(baseUrl) {
	const [data, setData] = useState([]);
	const [isQuerying, setIsQuerying] = useState(false);

	const list = async () => {
		setIsQuerying(true);
		const res = await fetch(baseUrl);
			const resData = await res.json();
			setData([...resData]);
		setIsQuerying(false);
	 };

	const add = async title => {
		 setIsQuerying(true);
		 const res = await fetch(baseUrl, {
			 method: "POST",
			 headers: {
				 Accept: "application/json",
				 "Content-Type": "application/json"
			 },
			 body: JSON.stringify({ title })
		 });
		 const resData = await res.json();
		 setData([...data, { id: resData.id, title }]);
		 setIsQuerying(false);
	 };
 
	 const edit = async (id, newTitle) => {
		 setIsQuerying(true);
		 await fetch(baseUrl, {
			 method: "PUT",
			 headers: {
				 Accept: "application/json",
				 "Content-Type": "application/json"
			 },
			 body: JSON.stringify({ id, newTitle })
		 });
		 const copy = [...data];
		 const index = copy.findIndex(item => item.id === id);
		 copy[index].title = newTitle;
		 setData(copy);
		 setIsQuerying(false);
	 };

	 const remove = async id => {
		 setIsQuerying(true);
		 await fetch(`${baseUrl}?item=${id}`, {
			 method: "DELETE"
		 });
		 const copy = [...data];
		 copy.splice(copy.findIndex(item => item.id === id), 1);
		 setData(copy);
		 setIsQuerying(false);
	 };

	 const api = {
		 list,
		 add,
		 edit,
		 remove
	 };

	return [data, isQuerying, api];
}