Fazendo a busca de posts funcionar

[rcmonteiro]

Eu tomei a liberdade de isolar a parte de busca em um componente separado, o BlogSearch e nele usei o zod para montar o esquema e validação do formulário. Também usei o react-hook-form para controlar o campo de busca, reset e estado do formulário.

O código deste componente ficou assim:

const searchFormSchema = z.object({
  query: z.string(),
})

type IsearchFormSchema = z.infer<typeof searchFormSchema>

export const BlogSearch = () => {
  const postCount = useContextSelector(BlogContext, (context) => {
    return context.postCount
  })

  const fetchPosts = useContextSelector(BlogContext, (context) => {
    return context.fetchPosts
  })

  const { register, handleSubmit } = useForm<IsearchFormSchema>({
    resolver: zodResolver(searchFormSchema),
  })

  const handleSearch = async (data: IsearchFormSchema) => {
    await fetchPosts(data.query)
  }

  return (
    <BlogSearchContainer>
      <div>
        <h2>Publicações</h2>
        <span>
          {postCount} {postCount === 1 ? 'publicação' : 'publicações'}
        </span>
      </div>
      <form onSubmit={handleSubmit(handleSearch)}>
        <input type="text" placeholder="Buscar posts" {...register('query')} />
      </form>
    </BlogSearchContainer>
  )
}