📖 Descrição do Arquivo
O arquivo CoursesContext.jsx gerencia o estado relacionado aos cursos da aplicação. Ele é um contexto React que facilita o acesso e a manipulação das informações de cursos em qualquer parte da árvore de componentes. Além disso, ele trata o carregamento e possíveis erros durante a recuperação dos dados da API.
🔧 Configuração do Componente
'use client'
import { createContext, useContext, useState, useEffect } from 'react'
const CoursesContext = createContext()
export const useCourses = () => {
return useContext(CoursesContext)
}
export const CoursesProvider = ({ children }) => {
const [courses, setCourses] = useState([]) // Lista de cursos
const [loading, setLoading] = useState(true) // Estado de carregamento
const [error, setError] = useState(null) // Estado para erro
useEffect(() => {
const fetchCourses = async () => { // Função para buscar os cursos
try {
const apiUrl = process.env.NEXT_PUBLIC_SERVER_URL
const response = await fetch(`${apiUrl}/api/cursos`) // Requisição para API
if (!response.ok) {
throw new Error(`Erro: ${response.statusText}`) // Lança erro em caso de falha
}
const data = await response.json()
setCourses(data.docs || []) // Atualiza lista de cursos
} catch (err) {
setError(err.message) // Atualiza o erro, caso haja
} finally {
setLoading(false) // Atualiza o estado de carregamento
}
}
fetchCourses() // Chama a função para carregar os cursos
}, []) // Efeito colateral executado uma vez ao montar o componente
return (
<CoursesContext.Provider value={{ courses, loading, error }}>
{children} {/* Renderiza os filhos com o contexto de cursos */}
</CoursesContext.Provider>
)
}📦 Componentes e Funções
1. CoursesContext
- Criado usando
createContext()para armazenar e fornecer o estado dos cursos aos componentes filhos.
2. useCourses()
- Um hook personalizado que permite acessar facilmente o contexto de cursos em qualquer componente, utilizando
useContext(CoursesContext).
3. CoursesProvider
- Um componente que encapsula a lógica para carregar os cursos da API e fornece esse estado através do
CoursesContext.Provider.
⚙️ Funcionamento
Estado
O CoursesProvider mantém três estados principais:
- courses: Lista de cursos carregados da API.
- loading: Booleano que indica se os dados estão sendo carregados.
- error: Mensagem de erro, caso a recuperação dos cursos falhe.
Efeito Colateral
O useEffect executa uma requisição para a API e atualiza o estado com os dados obtidos. Se houver falha, o erro será capturado e mostrado.
Provedor de Contexto
O CoursesProvider fornece os estados de cursos, carregamento e erro para todos os componentes filhos dentro do componente que o envolve.
🎯 Considerações Finais
Este contexto permite gerenciar o estado de forma eficiente, tornando fácil para os componentes acessarem os dados dos cursos sem duplicar lógica. Ele melhora a escalabilidade e manutenção da aplicação.
🧑💻 Código Completo:
'use client'
import { createContext, useContext, useState, useEffect } from 'react'
const CoursesContext = createContext()
export const useCourses = () => {
return useContext(CoursesContext)
}
export const CoursesProvider = ({ children }) => {
const [courses, setCourses] = useState([]) // Lista de cursos
const [loading, setLoading] = useState(true) // Estado de carregamento
const [error, setError] = useState(null) // Estado para erro
useEffect(() => {
const fetchCourses = async () => { // Função para buscar os cursos
try {
const apiUrl = process.env.NEXT_PUBLIC_SERVER_URL
const response = await fetch(`${apiUrl}/api/cursos`) // Requisição para API
if (!response.ok) {
throw new Error(`Erro: ${response.statusText}`) // Lança erro em caso de falha
}
const data = await response.json()
setCourses(data.docs || []) // Atualiza lista de cursos
} catch (err) {
setError(err.message) // Atualiza o erro, caso haja
} finally {
setLoading(false) // Atualiza o estado de carregamento
}
}
fetchCourses() // Chama a função para carregar os cursos
}, []) // Efeito colateral executado uma vez ao montar o componente
return (
<CoursesContext.Provider value={{ courses, loading, error }}>
{children} {/* Renderiza os filhos com o contexto de cursos */}
</CoursesContext.Provider>
)
}