useOrders hook with decorated deletable orders

useOrders.js

// useOrders.js
import { useState, useEffect } from 'react';
import OrderService from './OrderService';

function useOrders() {
  const [orders, setOrders] = useState([]);

  function createDeleteHandler(id) {
    return async function () {
      await OrderService.delete(id);
      setOrders(orders.filter(order => order.id !== id));
    }
  }

  function getDeletableOrders() {
    return orders.map(order => ({
      ...order,
      delete: createDeleteHandler(order.id),
    });
  }

  async function fetchOrders() {
    const apiOrders = await OrderService.get();
    setOrders(apiOrders);
  }

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

  return {
    orders: getDeletableOrders(),
  };
}

export default useOrders;