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 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çãoformat
. - Se a operação for
create
(criação), ela utiliza o valor denomeCurso
dodata
(dados da criação) e o formata. - Se a operação for
update
(atualização), ela usa o valor denomeCurso
dooriginalDoc
(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