No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ejemplo de CRUD

16/22
Recursos

Aportes 20

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

tuve problema con la libreria de faker, y lo solucione de la siguiente manera:

el import entre corchetes, (ya no es default):

import {faker} from '@faker-js/faker';

y algunas props ahora estan en otros lados:

color: faker.color.human(),
tags: faker.helpers.arrayElements(),
size: faker.helpers.arrayElement(['M', 'S', 'XL', 'L']),

Para los que tuvieron errores en la implementacion de faker, yo lo resolvi de esta forma:

import {faker} from '@faker-js/faker';
import { addProduct, products } from "./products/product.service";

for (let index = 0; index < 50; index++) {
    addProduct({
        id: faker.datatype.uuid(),
        title: faker.commerce.productName(),
        description: faker.commerce.productDescription(),
        image: faker.image.imageUrl(),
        size: faker.helpers.arrayElement(['M','S','L', 'XL']),
        color: faker.commerce.color(),
        isNew: faker.datatype.boolean(),
        tags: faker.helpers.arrayElement(),
        price: parseInt(faker.commerce.price()),
        createAt: faker.date.recent(),
        updateAt: faker.date.recent(),
        stock: faker.datatype.number({min: 10, max: 100}),
        category: {
            id: faker.datatype.uuid(),
            name: faker.commerce.department(),
            createAt: faker.date.recent(),
            updateAt: faker.date.recent(),
        }
    })   
}

console.log(products)

De nada XD

En caso de que se les dificulte crear la funcion de Update, Read y Delete del CRUD, ac谩 les dejo mi aporte.

Para no repetir codigo, cree el tipo Id en el archivo Base.model para mantener ese tipado mejor.

export type Id = string | number

Tambi茅n cree una funcion que retorna el index y otro que lanza un error. en el archivo product.service

const getIndex = (id: Id) => products.findIndex(product => product.id === id)
const throwError = (error: string) => new Error(error)

Ac谩 la funcion update: updateProduct

export const updateProduct = (id: Id, changes: object) => {
  const index: number = getIndex(id)
  const product: Product = products[index]
 index === -1 && throwError('Product not Found')

  products[index] = {
    ...product,
    ...changes
  }
  return products[index]
}

Ac谩 la funci贸n delete: deleteProduct

export const deleteProduct = (id: Id) => {
  const index: number = getIndex(id)
  index === -1 && throwError('Product not Found')
  products.splice(index, 1)
  return id
}

finalemnte la funcion Find: findProduct

export const findProduct = (id: Id) => {
  const index: number = getIndex(id)
  index === -1 && throwError('Product not Found')
  return products[index]
}

Espero les sirva.

ahora array elements y array element estan dentro de helpers.

faker.helpers.arrayElements(),

Les dejo mis soluciones para las funciones getProduct(), updateProduct() y deleteProduct()
Decid铆 hacerlas por mi cuenta para ver c贸mo me iba. Primero les doy un poco de contexto de lo que us茅 y algo que cambi茅:
.

<h5>Overloading</h5>

Utilic茅 en todas las funciones overloading, ya que quise que getProduct() retornara un string si no encontraba el producto con el ID indicado.
Y las dem谩s tienen overloading ya que utilizan a getProduct()
.

<h5>Cambios en product.model.ts</h5>

Concretamente modifiqu茅 Product interface, ya que al utilizar updateProduct() no quer铆a modificar el id ni tampoco createdAt; no ten铆a sentido hacer esas modificaciones.
Entonces, Product interface cambi贸 por ProductEdit interface.
Y cre茅 un nuevo Product interface que extiende de BaseModel interface y de ProductEdit interface. Al hacer esto tuve que agregar updatedAt en ProductEdit interface y funciona todo perfecto.
.
Ahora s铆, les dejo cada funci贸n:

let products: Product[] = []; // cambi茅 el `const` por `let`


// getProduct()
function getProduct(id: string): Product;
function getProduct(id: string): string;

function getProduct(id: string): unknown {
  const product = products.find(product => product.id === id);

  return product ?? `Product with ID '${id}' does not exist.`;
}


// updateProduct()
function updateProduct(id: string, changes: ProductEdit): Product;
function updateProduct(id: string, changes: ProductEdit): string;

function updateProduct(id: string, changes: ProductEdit):unknown {
  const product = getProduct(id);

  if (product) {
    products.map(product => {
      product.id === id && Object.assign(product, changes);
    });
  }

  return product;
}


// deleteProduct()
function deleteProduct(id: string):Product;
function deleteProduct(id: string):string;

function deleteProduct(id: string):unknown {
  const product = getProduct(id);

  if (product) {
    products = products.filter(product => product.id !== id);
  }

  return product;
}

Espero les sirva馃榿

Algunos m茅todos han cambiado de ruta en la librer铆a de faker.

En la API Reference pueden buscar cada m茅todo que no sea accesible como lo se帽ala la clase.

Les dejo como qued贸 mi main.ts, m谩s que nada por si alguno tambi茅n tuvo problemas con ciertas funciones que estaban deprecadas o que no exist铆an en la propiedad usada.
/


/
Primero que nada el import no tiene que ser default, deber铆a ser as铆:

import { faker } from '@faker-js/faker';

/


/
Ya para el producto que vamos a crear usando faker-js hay algunas funciones que fueron colocadas en otras propiedades.

  • color, por ejemplo:
addProduct({
	...
	color: faker.commerce.color(),
	...
})

Ya no se encuentra en la propiedad commerce, sino que tiene su propia propiedad color con varias funciones. Para la clase us茅 human(), que es la misma funci贸n que ten铆a commerce.

addProduct({
	...
	color: faker.color.human(),
	...

/


/
Y as铆 con otras propiedades y/o funciones. Les dejo mi addProduct({鈥) a continuaci贸n:

addProduct({
    id: faker.datatype.uuid(),
    title: faker.commerce.productName(),
    category: {
      id: faker.datatype.uuid(),
      name: faker.commerce.department(),
      createdAt: faker.date.recent(),
      updatedAt: faker.date.recent(),
    },
    price: parseFloat(faker.commerce.price()),
    stock: faker.datatype.number({min: 10, max: 100}),
    isNew: faker.datatype.boolean(),
    image: faker.image.imageUrl(),
    description: faker.commerce.productDescription(),
    tags: faker.helpers.arrayElements(),
    size: faker.helpers.arrayElement(['S', 'M', 'L', 'XL']),
    color: faker.color.human(),
    createdAt: faker.date.recent(),
    updatedAt: faker.date.recent(),
  });

Espero les sirva 馃槃

Faker cambio la forma de utilizar arrayElement a:

faker.helpers.arrayElement(['16','S','M','L','XL'])

Con color lo mismo:

faker.color.human()

As铆 creo que podr铆a ser para delete y get (en get podemos buscar un producto por su ID o por su t铆tulo):

import { Product } from "./product.model"

export const products: Product[] = []

export const addProduct = (data: Product) => {
  products.push(data)
}

export const updateProduct = (id: string | number, changes: Product) => {

}

export const deleteProduct = (id: string | number) => {

}

export const getProduct = (id?: string | number, title?: string) => {

}

npm install --save-dev @faker-js/faker

Ac谩 esta mi soluci贸n para el CRUD, espero que a alguien le sirva

export const addProduct = (data: Product): void => {
    products.push(data);
}
export const getProduct = (productID: string): any => {
    let product = products.filter(product => product.id === productID)
    return product
}
export const uploadProduct = (productID: string, data: object): void => {
    let newData = {...data, updatedAt: new Date() }
    let productIndex = products.findIndex(product => product.id === productID)
    Object.assign(products[productIndex], newData) 
}
export const deleadProduct = (productID: string): void => {
    let productIndex = products.findIndex(product => product.id === productID)
    products.splice(productIndex, 1)
}

En enero del 2022 paso algo curioso con el creador de la lib
Faker.js, saboteo su propio repositorio en simbolo protesta, dejo de funcionar y muchas big companies tambien se vieron afectadas, les dejo mi articulo acerca de ello, tiene muucho que ver con los ideales del opensource鈥

https://cr0wg4n.medium.com/es-un-buen-momento-para-hablar-de-ideales-en-el-mundo-del-software-f8f618a6bfb6

en las nuevas versiones usar:

faker.color.human()

en vez de: faker.commerce.color()

Aqu铆 les dejo mi funci贸n para el update:

export const updateProduct = (id: string, changes: Product) => {
  let index = products.findIndex(item => {
    id === item.id
  })

  products.splice(index, 1, changes)
}

A

OLD

faker.random.arrayElements()

NEW

faker.helpers.arrayElements()

Pocos entender谩n:

Para los tags lo implemente asi: le di un array de opciones鈥 el toma el random en cantidades y tipos y los asigna:

tags: faker.helpers.arrayElements(['perro','gato','raton','pajaro','culebra','peces','pollito']),

Por alguna raz贸n la nueva versi贸n de faker no encontre la manera de hacer un array de string, ya que el m茅todo est谩 en dataType y retorna, (string | number)[] as铆 que hice un peque帽o m茅todo para rellenar los tags, de una manera m谩s natural鈥 este fue el c贸digo que utilice

const productTagsArray = (times: number): string[] => {
  let productsArray: string[] = [];
  for(let i=0; i<times; i++){
    productsArray.push(faker.commerce.productAdjective());
  }
  return productsArray;
}

Lo agregue a product service.ts y lo importe a main.ts este es un resultado de ejemplo:

 tags: [
      'Small',      'Generic',
      'Luxurious',  'Awesome',
      'Gorgeous',   'Tasty',
      'Recycled',   'Luxurious',
      'Electronic', 'Rustic'
    ]

Librer铆a Faker

Instalaci贸n
npm install @faker-js/faker --save-dev

Importando Librer铆a
import faker from '@faker-js/faker';

Los otros templates que faltan son delete y get.

const deleteProduct = (id: string): void => {
  //code
}

const getProduct = (id: string): void => {
  //code
}