silv4b/slides-list

Projeto pessoal para listar apresentações usadas em sala de aula das disciplinas que leciono no IFRN.

Hey there 👋

Hello, I'm Bruno Silva, Professor, UI Designer and Developer 🚀 from Brazil.

• 🗺️ I live in Caicó, RN.
• 👨🏽‍💻 I currently work as a teacher at IFRN.
• 🌱 Always learning about UI, ReactJS through photosynthesis.
• 🎨 Sometimes I create themes for VSCode.
• 📫 How to contact me: @silv4b or My Card Page.

Developer

Tools that I currently study

⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀

Social Media

⠀ ⠀ ⠀ ⠀

slides-list's Issues

Página de disciplina

Uma página para acessar cada turma individualmente. Inicialmente, ela erá exibir dados referentes à turma e os materiais adicionados para ela em específico.

• Requisição dos ids dos materiais da turma da tabela material_turma.
• Requisição dos materiais da tabela material com base nos ids recuperados do ponto acima.
• Recuperar dados da turma a partir do identificador/código usado na url.
• Adicionar os mesmo direcionamentos (suap e gsa) presentes nos cards das turmas na página /courses em /courses/:id

Doc

Links úteis

• O ERRO mais comum no React (você já fez isso) - Derived States

Adequar retornos de erros dos cotrollers

Nos controllers, algumas funções de tem retornos diferentes, isso atrapalha a manutenção do código e torna o código mais suscetível a estar bagunçado.

Uma sugestão colhida em call com um amigo foi usar:

throw new Error(`${error}`);

ou

throw error;;

Deploy no netlify dando erro

Usando o deploy automático configurado no netlify web, não está dando certo, porém, quando o deploy é feito via CLI, direto na máquina, funciona, é necessário identificar o motivo de localmente funcionar e na plataforma web não e corrigir.

Autentificação por email, github ou google

A plataforma contém uma página que não pode ser acessada por todos, deverá ser implementada uma autentificação, pode ser email e senha, Google ou github.

O supabase proporciona esse tipo de serviço., a documentação pode ser acessada a partir desses links:

• Use Supabase Auth with React
• Auth UI
• Tutorial exemplo de como fazer Auth com supabase + react

Organizar o projeto, separando componentes de páginas

Atualmente o projeto está concentrado todo na pasta components, e nela se tem, componentes e páginas, deve haver uma separação, um exemplo a ser seguido/analisado, pode ser o desse post do TabNews.

Organizar estilização dos componentes

Alguns componentes vão precisar ser "reutilizados", porém, em testes, foi percebido que a estilização está bagunçada, funcionando corretamente em uma página, em outra nem tanto, principalmente no que diz respeito a responsividade.

O problema foi identificado inicialmente no componente .

Refatoração da tela de gerenciar materiais

Na tela de gerenciamento de materiais, já é possível fazer as operações básicas de CRUD (editar, consultar, remover e adicionar), porém a necessidade é que seja possível controlar as turmas das quais os materiais podem ser acessados. Atualmente, por turma, já possível visualizar esse filtro (turmas -> materiais dessa turma), porém ao cadastrar/editar um novo material, essa distinção ainda não é observada, visto isso, surge a necessidade de poder:

• Ao cadastrar um novo material, escolher as disciplinas para as quais o material está disponível.
• Ao editar um material, poder escolher as disciplinas para as quais o material estará disponível.
• Ao remover um material, remover esse "contrato" do banco de dados, para o material removido.

1. A edição pode ser feita adicionando as turmas vinculadas ao material em um lado da tela onde é possível escolher (marcando como um check-box) quais turmas serão vinculadas ou não.
   1.1 A lógica deve feita removendo os vínculos presentes no supabase.

Nova ideia:

Refazer o crud da tela de gerenciamento de materiais de forma que a ação de adicionar um novo material fique separada da edição de um material existente.
[em construção ...]

Criar dialog de confirmação para operações de remoção e edição

As ações de remover e editar slides estão sendo executadas sem breve confirmação do usuário, é interessante que se tenha uma confirmação até para evitar que o usuário clique sem querer antes de verificar os dados que vão ser removidos ou alterados.

Componente de notificação

Atualmente a plataforma usa o alert do navegador para informar sobre erros e dar retornos sobre as ações feitas no sistema, seria interessante criar um componente que satisfaça essa necessidade.

Uma possibilidade é o uso do pacote react-notifications-component um bom artigo sobre o assunto pode ser lido na digital ocean, aqui.

Página de turmas

As turmas deveram ser listas na página inicial, cada turma deverá ter uma página com seus materiais.