OpenLake/canonforces

Refactor questions/[id].tsx - 527-line monolith combining 8 responsibilities

Open

#164 aperta il 5 apr 2026

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)TypeScript (38 fork)auto 404
enhancementhelp wanted

Metriche repository

Star
 (10 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

Issue

src/pages/questions/[id].tsx is 527 lines of JSX + TypeScript combining:

  • Data fetching (Firestore getDoc for problem)
  • Code execution (API call to execute code)
  • Codeforces submission verification
  • AI Hint generation and display
  • Comment section
  • Streak tracking
  • State management for 15+ useState hooks

Problems

  1. Hard to test - This component cannot be unit tested in isolation
  2. Performance - Every state change re-renders the entire page
  3. Maintainability - Adding a new feature (like hints) required touching 400+ lines of existing code

Suggestion

Extract into composable hooks and components:

  • useProblem(questionId) - Fetches and caches problem data
  • useCodeExecution(language, code, testCases) - handles run/submit
  • useAiHints(questionId) - handles hint fetching and coin deduction
  • <ProblemDescription> - Left panel with problem text
  • <CodeEditor> - IDE-like component
  • <SubmissionHistory> - Past submissions list
  • <CommentsSection> - Threaded discussion

Guida contributor

Direzione di ricerca
Comprendi la struttura attuale del componente monolitico. Identifica le diverse responsabilità (recupero dati, esecuzione del codice, suggerimenti AI, commenti, ecc.). Progetta hook personalizzati e componenti più piccoli come suggerito. Assicurati che nessuna funzionalità si rompa durante l'estrazione.
Tech stack
typescriptreact
Dominio
frontenddeveloper experience
Tipo issue
Refactoring
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-2 giorni
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
GitReactTypeScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60