Remix :: CRUD com Supabase - Parte 06 - Testando a insero de novos registros
Nesta parte iremos testar se o nosso formulrio est funcionando.
Vamos editar novamente o arquivo index.tsx
e colocar o nosso menu que ir para rea de postagens, onde iremos visualizar e inserir novas postagens
Re-editando o arquivo index.tsx
Abra seu arquivo routes/index.tsx
, apague os imports
e importe apenas o componente Link
do Remix:
import { Link } from 'remix'
Agora edite o componente Index
, deixando-o assim:
export default function Index() { return ( <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}> <h1>Blog Remix com Supabase</h1> <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'row', gap: '8px', }} > <li> <Link to={'posts'} style={{ textDecoration: 'none', backgroundColor: '#ef62df', color: '#fff', padding: '8px', borderRadius: '4px', fontSize: '14px', }} > Visualizar Posts </Link> </li> </ul> </div> )}
Por ltimo, vamos adicionar um componente ErrorBoundary
para "capturar" os erros na Index
de forma que no quebre o resto da aplicao.
export function ErrorBoundary({ error }: { error: Error }) { return ( <div className='error-container'> <h1> App Error</h1> <pre> {error.message}</pre> </div> )}
Testando a aplicao
Finalmente estamos prontos para testar a nossa aplicao, para isto rode npm run dev
e se tudo deu certo voc ver no navegador algo parecido com a imagem abaixo:
Clique no link Visualizar Posts
e voc ser direcionado para a pgina de visulizao, que tambm ser nossa pgina de inserao de novos posts.
A pgina que ser aberta deve ser algo parecido com a imagem abaixo:
Clique no boto Novo
e repare que o formulrio abrir logo acima da visualizao dos posts e isto se deve a mgica do componente <Outlet/>
que inserimos na parte 05 enquanto estvamos editando o componente Posts
.
Clique em novo, preencha todos os dados e depois clique em enviar
. Se tudo deu certo at aqui, um novo post aparecer abaixo dos botes Home
e Novo
.
Com isto finalizamos esta primeira parte do tutorial, na parte 07 instalaremos a lib https://chakra-ui.com/ para melhorar a aparncia da nossa aplicao. Te vejo l!
Original Link: https://dev.to/juniormartinxo/remix-crud-com-supabase-parte-06-testando-a-insercao-de-novos-registros-2m64
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To