Skip to content

Latest commit

 

History

History
133 lines (83 loc) · 5.3 KB

30.md

File metadata and controls

133 lines (83 loc) · 5.3 KB

Projeto Blog Pessoal - Componente Deletar Postagens - Estilização

Para fecharmos o consumo do Recurso Postagem, vamos criar a página responsável por apagar postagens do Projeto Blog Pessoal.

Para construirmos esta página, vamos criar um Componente chamado DeletarPostagem, que se encarregará de consumir o Endpoint deletar postagem do Backend, que será responsável por excluir postagens persistidas no Banco de dados. Na imagem abaixo, vemos o resultado esperado:


Passo 01 - Criar o Componente Deletar Postagem


Caution

Não esqueça de inicializar o deploy do Backend no Render. Caso tenha alguma dúvida, consulte o conteúdo: Página de Cadastro - Lógica.


Vamos criar o Componente DeletarPostagem:

  1. Dentro da pasta temas, vamos criar a pasta deletarpostagem.
  2. Dentro desta pasta deletarpostagem, crie o Componente DeletarPostagem.tsx.
  3. Após seguir os passos acima, a estrutura de pastas do seu projeto estará semelhante a imagem abaixo:

Na sequência, vamos adicionar o código abaixo, contendo a estilização do Componente DeletarPostagem:

function DeletarPostagem() {
    return (
        <div className='container w-1/3 mx-auto'>
            <h1 className='text-4xl text-center my-4'>Deletar Postagem</h1>

            <p className='text-center font-semibold mb-4'>
                Você tem certeza de que deseja apagar a postagem a seguir?
            </p>

            <div className='border flex flex-col rounded-2xl overflow-hidden justify-between'>
                <header 
                    className='py-2 px-6 bg-indigo-600 text-white font-bold text-2xl'>
                    Postagem
                </header>
                <div className="p-4">
                    <p className='text-xl h-full'>Título da Postagem</p>
                    <p>Texto da Postagem</p>
                </div>
                <div className="flex">
                    <button 
                        className='text-slate-100 bg-red-400 hover:bg-red-600 w-full py-2'>
                        Não
                    </button>
                    <button 
                        className='w-full text-slate-100 bg-indigo-400 
                        hover:bg-indigo-600 flex items-center justify-center'>
                        Sim
                    </button>
                </div>
            </div>
        </div>
    )
}

export default DeletarPostagem

A Estilização do Componente DeletarPostagem utiliza vários elementos que já foram vistos em outros componentes criados anteriormente. Caso você tenha alguma dúvida sobre alguma das classes utilizadas, consulte a Documentação do Tailwind no Link abaixo.



Passo 02 - Atualizar das Rotas do Componente App

Vamos atualizar o Componente App de modo a exibir a nova página.

  1. Abra o arquivo App.tsx, localizado na pasta src.
  2. Adicione a rota abaixo depois das rotas do Componente FormPostagem:
<Route path="/deletarpostagem/:id" element={<DeletarPostagem />} />
  1. Na imagem abaixo você confere o resultado final:

Passo 03 - Testar o Componente

  1. Abra o Terminal do VSCode.
  2. Execute o projeto através do comando abaixo:
yarn dev
  1. Pressione a combinação de teclas o + enter do seu teclado para abrir o Projeto no Navegador.
  2. Com o projeto aberto no seu Navegador, faça o login na aplicação, informando o Usuário e a Senha:
  1. Na Barra de Endereços do Navegador, digite o endereço: http://localhost:5173/deletarpostagem/1, para visualizar a Estilização do Componente DeletarPostagem.
  1. Na sequência, você será redirecionado para a Tela de Exclusão da postagem. Note que os dados da postagem não serão exibidos, por enquanto:
  1. Clique na opção Sair, para efetuar logout da aplicação.