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 sercreate(criação de documento) ouupdate(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 valueA 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çãoformat. - Se a operação for
create(criação), ela utiliza o valor denomeCursododata(dados da criação) e o formata. - Se a operação for
update(atualização), ela usa o valor denomeCursodooriginalDoc(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 formatSlugPor 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