Generating TypeScript Models

TypeScript
// Basic model.ts structure
import useLoading from '@/hooks/use-loading';
import { message } from 'antd';
import { useState } from 'react';
import { getItemsController, createItemController } from './item.controller';

export default () => {
  const [items, setItems] = useState([]);
  const { loading, startLoading, stopLoading } = useLoading();
  
  const getItems = async (...args: Parameters<typeof getItemsController>) => {
    try {
      startLoading();
      const response = await getItemsController(...args);
      setItems(response.data);
    } catch (error) {
      message.error('Não foi possível obter os dados');
      return Promise.reject();
    } finally {
      stopLoading();
    }
  };

  return { items, loading, getItems };
};

Progress:

• Analyze controller functions and their parameters
• Determine data structure (pagination vs array)
• Generate state management with appropriate type
• Create CRUD functions matching controller signatures
• Add error handling with generic messages
• Return hook interface with camelCase naming

Step 1: Analyze Controllers

Look for controller files (*.controller.ts) and identify available CRUD operations:

• getXController → getX function
• createXController → createX function
• updateXController → updateX function
• deleteXController → deleteX function

Step 2: Determine State Structure

With pagination:

TypeScript
const [items, setItems] = useState<App.Pagination<Type>>(defaultPaginationValues);

Without pagination:

TypeScript
const [items, setItems] = useState<Type[]>([]);

Step 3: Generate CRUD Functions

GET function pattern:

TypeScript
const getItems = async (...args: Parameters<typeof getItemsController>) => {
  try {
    startLoading();
    const response = await getItemsController(...args);
    const { data } = response;
    setItems(data);
  } catch (error) {
    message.error('Não foi possível obter os dados');
    return Promise.reject();
  } finally {
    stopLoading();
  }
};

CREATE function pattern:

TypeScript
// With pagination
setItems((previousData) => ({
  ...previousData,
  results: [data, ...(previousData?.results || [])],
  count: previousData.count + 1,
}));

// Without pagination
setItems((previousData) => [data, ...previousData]);

UPDATE function pattern:

TypeScript
const nArray = updateArrayItem({
  arr: items.results || items, // depends on pagination
  identification: args[parameterIndex], // check controller signature
  values: data,
  targetField: 'id',
});

DELETE function pattern:

TypeScript
// With pagination
setItems((previousData) => ({
  ...previousData,
  count: previousData.count - 1,
  results: previousData.results.filter((r) => r.id !== args[parameterIndex]),
}));

// Without pagination  
setItems((previousData) => previousData.filter((p) => p.id !== args[parameterIndex]));

Example 1: With Pagination Controller: getAreasController(qsParams), updateAreaController(id, params)

TypeScript
// args[0] is id for update/delete
const nArray = updateArrayItem({
  identification: args[0],
  // ...
});

Example 2: With Parameters
Controller: updateItemController(versao, id, params)

TypeScript
// args[1] is id when versao is first parameter
const nArray = updateArrayItem({
  identification: args[1],
  // ...
});

Example 3: Return Interface

TypeScript
return {
  itemLoading: loading,
  items,
  getItems,
  createItem,
  updateItem,
  deleteItem,
};