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}`);
  }
}

erksch

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

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

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

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

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

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

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

erksch

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

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

  return (

erksch

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

function OrdersListItem(props) {
  const { order } = props;

  return (
    <li>
      <h2>{order.title}</h2>

erksch

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

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

    this.state = {
      orders: [],

erksch

// Orders.js

return (
  ...
  <OrdersList
    orders={orders}
    onRemoveItem={this.handleRemove}
  />
  ...
);

erksch

// useOrders.js
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

// 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);