Desenvolvedores
src_
hooks_
formatSlug.ts

Explicação do Código

1. Importação do Hook do Payload 📦

import { FieldHook } from 'payload'

Aqui, estamos importando o FieldHook do Payload CMS. O FieldHook é uma função que permite modificar ou validar os dados antes de serem armazenados no banco de dados durante as operações de criação, atualização ou exclusão de documentos.

2. Função format 🔧

const format = (val: string): string =>
  val
    .replace(/ /g, '-')
    .replace(/[^\w-/]+/g, '')
    .toLowerCase()

A função format recebe uma string como entrada e a converte para um formato slug. Um slug é uma versão amigável de uma string, geralmente usada em URLs. A função realiza as seguintes operações:

  • replace(/ /g, '-'): Substitui todos os espaços por hífens (-).
  • replace(/[^\w-/]+/g, ''): Remove caracteres não alfanuméricos, exceto hífens e barras.
  • toLowerCase(): Converte todos os caracteres para minúsculas.

Essa transformação é útil para gerar URLs amigáveis a partir de textos, como nomes de cursos ou outros campos.

3. Função formatSlug 🔄

const formatSlug: FieldHook = ({ value, data, originalDoc, operation }) => {

Aqui definimos a função formatSlug, que é um FieldHook. Ela recebe um objeto contendo várias informações sobre a operação:

  • value: O valor atual do campo.
  • data: Os dados completos que estão sendo inseridos ou atualizados.
  • originalDoc: O documento original, antes de ser atualizado.
  • operation: O tipo de operação, que pode ser create (criação de documento) ou update (atualização de documento).

4. Lógica de Formatação do slug ⚙️

  if (typeof value === 'string' && value) {
    return format(value)
  }
 
  if (operation === 'create' && data?.['nomeCurso']) {
    return format(data['nomeCurso'])
  }
 
  if (operation === 'update' && originalDoc?.['nomeCurso']) {
    return format(originalDoc['nomeCurso'])
  }
 
  return value

A lógica da função é a seguinte:

  • Se o value (valor do campo) for uma string e não estiver vazio, a função formata esse valor utilizando a função format.
  • Se a operação for create (criação), ela utiliza o valor de nomeCurso do data (dados da criação) e o formata.
  • Se a operação for update (atualização), ela usa o valor de nomeCurso do originalDoc (documento original) para gerar o slug.
  • Se nenhuma dessas condições for atendida, a função simplesmente retorna o valor original sem alterações.

5. Exportação do Hook 📤

export default formatSlug

Por fim, o hook formatSlug é exportado como o valor padrão para que possa ser utilizado em outros arquivos ou componentes dentro do projeto.

Código Completo 📜

import { FieldHook } from 'payload'
 
const format = (val: string): string =>
  val
    .replace(/ /g, '-')
    .replace(/[^\w-/]+/g, '')
    .toLowerCase()
 
const formatSlug: FieldHook = ({ value, data, originalDoc, operation }) => {
  if (typeof value === 'string' && value) {
    return format(value)
  }
 
  if (operation === 'create' && data?.['nomeCurso']) {
    return format(data['nomeCurso'])
  }
 
  if (operation === 'update' && originalDoc?.['nomeCurso']) {
    return format(originalDoc['nomeCurso'])
  }
 
  return value
}
 
export default formatSlug