erksch

// OrderDeleteButton.js
import React from 'react';

function OrderDeleteButton(props) {
  function handleClick() {
    const { order, onClick } = props;
    onClick(order.id);
  }

  return (

erksch

// Orders.js
import React from 'react';
import useOrders from './useOrders';

function Orders() {
  const { orders } = useOrders();

  return (
    <div>
      <h1>Orders</h1>

erksch

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

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

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

erksch

import React from 'react';
import OrderService from './OrderService';

class Orders {
  constructor(props) {
    super(props);

    this.state = {
      orders: [],
    };

erksch

class OrderService {
  static async list() {
    const orders = await api.get('/api/orders');
    return orders;
  }

  static async delete(id) {
    await api.delete(`/api/orders/${id}`);
  }
}