debugfest/mern-book-tracker

Feature Request: Edit Book UI with Optimistic Update

Aberta

#4 aberto em 11 de out. de 2025

Ver no GitHubGuia do colaborador
 (1 comentário) (0 reação) (1 responsável)TypeScript (5 forks)auto 404
enhancementgood first issuehacktoberfest

Métricas do repositório

Stars
 (0 estrela)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

Allow users to edit existing book details using a modal or dedicated edit page. The UI should optimistically update book details while waiting for the server response.

🎯 Proposed Solution

  • Add Edit button on each book card.
  • Create EditBook.tsx or modal-based editor.
  • Pre-fill form with existing data.
  • PUT /api/books/:id for saving updates.
  • Implement optimistic updates and rollback if the request fails.

✅ Expected Behavior

  • User can edit book fields and save.
  • UI updates immediately on save click.
  • Changes persist after backend confirmation.

💻 Technical Notes

  • Maintain a local copy of book data for rollback if needed.
  • Use React Query or manual state updates for optimistic UI.

🧪 Test Steps

  1. Open edit form for a book.
  2. Modify title or author → save changes.
  3. Observe instant update and confirmation after server response.

Guia do colaborador

Direção de pesquisa
Implemente o componente de UI de edição de livro e conecte o ao endpoint PUT /api/books/:id com atualizações otimistas e rollback usando React Query ou gerenciamento de estado manual.
Pilha de tecnologia
typescriptreactnodejsexpressmongodb
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactTypeScriptGit
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70