Desenvolvedores
src_
app_
(app)
cursos
page.js

📚 Documentação do Arquivo page.js - Cursos

📜 Descrição

O arquivo page.js da pasta cursos é uma página React que exibe uma lista de cursos e permite ao usuário pesquisar entre eles. Ele utiliza o contexto de cursos, fornecido pelo hook useCourses, para obter a lista de cursos e o estado de carregamento e erro. O usuário pode filtrar os cursos através de um campo de pesquisa.

🧰 Código

'use client'
import React, { useState } from 'react'
import { useCourses } from '@/components/context/CoursesContext'
import { Input } from '@/components/ui/input'
import CourseList from '@/components/CourseList'
 
const CoursesPage = () => {
  const { courses, loading, error } = useCourses()
  const [searchTerm, setSearchTerm] = useState('')
 
  const filteredCourses = courses.filter((course) =>
    course.nomeCurso.toLowerCase().includes(searchTerm.toLowerCase()),
  )
 
  if (loading) {
    return <div>Carregando...</div>
  }
 
  if (error) {
    return <div>Erro ao carregar os cursos: {error}</div>
  }
 
  return (
    <div className="container mx-auto px-8 py-4">
      <div className="mb-4 flex justify-center">
        <Input
          type="text"
          placeholder="Pesquisar cursos..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full md:w-1/2"
        />
      </div>
      <CourseList courses={filteredCourses} />
    </div>
  )
}

🔑 Importações

import React, { useState } from 'react'
import { useCourses } from '@/components/context/CoursesContext'
import { Input } from '@/components/ui/input'
import CourseList from '@/components/CourseList'
  • React: Biblioteca essencial para construir a interface.
  • useState: Hook usado para gerenciar o estado local, neste caso o termo de pesquisa.
  • useCourses: Hook personalizado que fornece o estado de cursos, incluindo a lista de cursos, o estado de carregamento e o erro.
  • Input: Componente de entrada de texto utilizado para a pesquisa de cursos.
  • CourseList: Componente que renderiza a lista de cursos filtrados.

⚙️ Funcionamento

🔍 Estado e Filtragem

const [searchTerm, setSearchTerm] = useState('')
const filteredCourses = courses.filter((course) =>
  course.nomeCurso.toLowerCase().includes(searchTerm.toLowerCase()),
)
  • searchTerm: Armazena o termo de pesquisa inserido pelo usuário.
  • Filtragem: A lista de cursos é filtrada com base no termo de pesquisa, exibindo apenas os cursos que contêm o nome correspondente.

⚠️ Condicionais

if (loading) {
  return <div>Carregando...</div>
}
 
if (error) {
  return <div>Erro ao carregar os cursos: {error}</div>
}
  • loading: Se loading for true, exibe "Carregando...".
  • error: Se ocorrer um erro, exibe a mensagem "Erro ao carregar os cursos".

🎨 Renderização

<Input
  type="text"
  placeholder="Pesquisar cursos..."
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
  className="w-full md:w-1/2"
/>
<CourseList courses={filteredCourses} />
  • O campo de entrada Input permite que o usuário insira um termo de pesquisa.
  • O componente CourseList é renderizado com os cursos filtrados.

🎨 Estilo

O componente utiliza o Tailwind CSS para estilização:

  • container mx-auto px-8 py-4: Define o layout do container.
  • mb-4 flex justify-center: Estiliza o campo de pesquisa, centralizando-o e aplicando margem inferior.
  • w-full md:w-1/2: Define a largura do campo de pesquisa, 100% em dispositivos móveis e 50% em dispositivos maiores.

🚀 Exportação

export default CoursesPage;

O componente CoursesPage é exportado como exportação padrão do módulo, tornando-o disponível para ser utilizado em outras partes da aplicação.

📦 Código Completo

'use client'
import React, { useState } from 'react'
import { useCourses } from '@/components/context/CoursesContext'
import { Input } from '@/components/ui/input'
import CourseList from '@/components/CourseList'
 
const CoursesPage = () => {
  const { courses, loading, error } = useCourses()
  const [searchTerm, setSearchTerm] = useState('')
 
  const filteredCourses = courses.filter((course) =>
    course.nomeCurso.toLowerCase().includes(searchTerm.toLowerCase()),
  )
 
  if (loading) {
    return <div>Carregando...</div>
  }
 
  if (error) {
    return <div>Erro ao carregar os cursos: {error}</div>
  }
 
  return (
    <div className="container mx-auto px-8 py-4">
      <div className="mb-4 flex justify-center">
        <Input
          type="text"
          placeholder="Pesquisar cursos..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full md:w-1/2"
        />
      </div>
      <CourseList courses={filteredCourses} />
    </div>
  )
}
 
export default CoursesPage;
page.jspage.js