React Pro - Real World App - Ch8. 02 - Products API

// src/pages/cms/products/CMSProductsPage.tsx
import { get } from '@/services/products/products.api';
import { useReducer } from "react"

function productsReducer(state: any, action: any) {
  switch (action.type) {
    case 'pending':
      return { ...state, pending: action.payload };
    case 'getProductsSuccess':
      return { pending: false, products: action.payload}
  }
  return state;
}

export const initialState = { pending: false, products: [] };

export function CMSProductsPage() {
  const [state, dispatch] = useReducer(productsReducer, initialState);

  async function getProductsHandler() {
    dispatch({ type: 'pending', payload: true } );
    const res = await get();
    dispatch({ type: 'getProductsSuccess', payload: res.items})
  }

  return (
    <div>
      <h1 className="title">CMS</h1>

      Pagina Prodotti

      <hr className="my-8"/>

      {state.pending && <div>loading...</div>}

      <button className="btn primary" onClick={getProductsHandler}>GET</button>

      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  )
}





// services/products/products.api.ts
import { Product } from '@/model/product';
import { pb } from '../../pocketbase';

export function get() {
  return pb.collection('products').getList<Product>();
}

export function remove(id: string) {
  return pb.collection('products').delete(id);
}

export function add(product: Partial<Product>) {
  return pb.collection('products').create<Product>(product);
}

export function edit(product: Partial<Product>) {
  return pb.collection('products').update<Product>(product.id!, product);
}