Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 18, 2022 08:32 pm GMT

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:
Image description
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:
Image description
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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To