Uma aplicação de exemplo para demonstrar autenticação, navegação e consumo da API do GitHub utilizando React, React Router e Ant Design.
Nota:
Esta documentação foi gerada automaticamente pelo documentation.js.
Atualize a documentação modificando os comentários no código.
- PrivateRoute
- AppContent
- App
- Header
- SideMenu
- confirmSearch
- AuthProvider
- login
- logout
- useAuth
- Listagem
- fetchData
- goToProfile
- Componente de Login
- handleLogin
- Perfil
- SingleGithub
- fetchUserRepos
- fetchUserProfile
- Como Instalar e Executar o Projeto
Protege uma rota, renderizando seu conteúdo somente se o usuário estiver autenticado. Caso contrário, redireciona para a raiz (/).
Tipo: React.FC<{ children: React.ReactNode }>
- children: Elemento JSX que será renderizado se o usuário estiver autenticado.
Retorna um elemento JSX representando a rota protegida.
Componente que renderiza o conteúdo da aplicação, gerenciando rotas públicas e protegidas.
Tipo: React.FC<{ searchTerm: string }>
- searchTerm: Termo de busca para a listagem.
Retorna um elemento JSX representando a área principal de conteúdo.
Componente principal da aplicação.
Configura o Router com o AuthProvider, SideMenu e a área de conteúdo.
Tipo: React.FC
Retorna um elemento JSX representando a aplicação inteira.
Componente de cabeçalho da aplicação.
Renderiza um header com fundo branco, texto preto e um ícone de menu na lateral esquerda.
Tipo: React.FC
Retorna um elemento JSX representando o cabeçalho.
Componente de menu lateral que oferece navegação e funcionalidades de pesquisa.
Exibe diferentes opções de menu com base no estado de autenticação do usuário e ajusta seu layout conforme o estado de colapso.
Tipo: React.FC<SideMenuProps>
- collapsed: Indica se o menu lateral está colapsado.
- onCollapse: Função chamada quando o menu é colapsado ou expandido.
- onSearchChange: Função chamada para atualizar o termo de busca quando a pesquisa é confirmada.
Retorna um elemento JSX representando o menu lateral com opções de navegação e um campo de pesquisa.
Confirma a pesquisa e chama a função onSearchChange com o valor atual do localSearchTerm.
Provider do React Context responsável por armazenar o estado de autenticação do usuário e fornecer as funções de login e logout.
Tipo: React.FC<{ children: React.ReactNode }>
- children: Elemento JSX a ser renderizado dentro do contexto de autenticação.
Retorna o elemento JSX representando o contexto de autenticação.
Realiza o login com base nas credenciais fornecidas.
- username:
string– Nome de usuário. - password:
string– Senha.
Retorna boolean: true se o login for bem-sucedido, false caso contrário.
Realiza o logout do usuário.
Define o estado de autenticação como falso e remove o usuário do estado e do localStorage.
Hook que fornece o contexto de autenticação atual.
Lança um erro se utilizado fora de um AuthProvider.
Retorna o contexto de autenticação, incluindo as funções de login e logout.
Componente que exibe os resultados da busca na API do GitHub.
Utiliza useEffect para buscar repositórios e usuários sempre que o searchTerm for alterado.
Exibe as listas de repositórios e usuários, gerenciando estados de carregamento e erro.
Tipo: React.FC<ListagemProps>
- searchTerm: Termo de busca para filtrar os resultados.
Retorna um elemento JSX exibindo os resultados da busca (repositórios e usuários).
Realiza uma busca na API do GitHub com base no termo de busca fornecido e atualiza os estados de repositories e users.
- query:
string– Termo de busca.
Lança um erro se a chamada à API falhar.
Retorna a lista de repositórios e usuários obtida na API.
Navega para a página de perfil de um usuário do GitHub.
- username:
string– Nome do usuário para navegação.
Componente de login da aplicação.
Renderiza um formulário de login com campos para usuário e senha.
Chama o hook login com as credenciais fornecidas e redireciona para /listagem se o login for bem-sucedido; caso contrário, exibe uma mensagem de erro.
Tipo: React.FC
Retorna um elemento JSX representando o formulário de login.
Função chamada ao submeter o formulário de login.
Invoca o hook login com as credenciais fornecidas e redireciona para /listagem se o login for bem-sucedido; caso contrário, exibe uma mensagem de erro.
Componente de perfil do usuário do GitHub.
Busca e exibe os dados do perfil, incluindo nome, avatar, bio, seguidores, seguindo, repositórios e localização.
Também busca e exibe o README do repositório do usuário com estilo semelhante ao GitHub.
Tipo: React.FC
- username: Nome de usuário do GitHub para o perfil.
Retorna um elemento JSX representando o perfil do usuário.
Componente que exibe o perfil de um usuário do GitHub e lista seus repositórios públicos.
Tipo: React.FC
- username: Nome de usuário do GitHub.
Retorna um elemento JSX exibindo o perfil do usuário e seus repositórios.
Busca os repositórios de um usuário do GitHub.
- username:
string– Nome do usuário.
Lança um erro se a chamada à API falhar.
Retorna uma lista dos repositórios do usuário.
Busca o perfil de um usuário do GitHub.
- username:
string– Nome do usuário.
Lança um erro se a chamada à API falhar.
Retorna os dados do perfil do usuário.
- Node.js (versão 14 ou superior recomendada)
- npm ou yarn
-
Clone o repositório:
git clone https://github.com/seu-usuario/nome-do-repositorio.git
-
Acesse o diretório do projeto:
cd nome-do-repositorio -
Instale as dependências: npm install
-
Execução Para iniciar a aplicação em modo de desenvolvimento, execute:
Usando npm:
npm run dev