sorting-live-preview

import { useState } from "react";
import { useList, HttpError } from "@refinedev/core";

interface IProduct {
    id: number;
    name: string;
    material: string;
}

const ProductList: React.FC = () => {
    const [order, setOrder] = useState<"asc" | "desc">("asc");

    const { data, isLoading, isError } = useList<IProduct, HttpError>({
        resource: "products",
        sorters: [
            {
                field: "name",
                order,
            },
        ],
    });

    const products = data?.data ?? [];

    if (isLoading) {
        return <div>Loading...</div>;
    }

    if (isError) {
        return <div>Something went wrong!</div>;
    }

    return (
        <div>
            <button
                onClick={() =>
                    setOrder((prev) => (prev === "asc" ? "desc" : "asc"))
                }
            >
                toggle sort
            </button>

            <ul>
                {products.map((product) => (
                    <li key={product.id}>
                        <h4>
                            {product.name} - ({product.material})
                        </h4>
                    </li>
                ))}
            </ul>
        </div>
    );
};