refactor: split MainContent into per-concern hooks

Aperta
  • Qualcosa non va?
#2 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Refactoring
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
desktop, developer-experience, frontend

Direzione di ricerca

Start with src/components/layout/MainContent.tsx and choose one listed extraction: useEditorTabs(), useQueryExecution(), usePsqlSession() (around lines 580–700), or the toolbar component. Read the relevant state and call sites, then add a Vitest test for one path and run the TypeScript checks, tests, and build. Done means the extracted module owns its concern, the parent passes data through props, and app behavior remains unchanged.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

good first issue help wanted refactor

src/components/layout/MainContent.tsx is 2,474 lines — by far the largest component in the app. It manages editor tabs, query execution, the integrated psql shell, results state, tool buttons, AI assist, compare/clone/definition modals, and history navigation. New contributors hit this file first and bounce.

What to extract

Any one of these is a complete, mergeable PR:

  1. useEditorTabs() — tab state, switching, persistence, the + button.
  2. useQueryExecution() — executeQuery, the active execution state, cancellation, history-writing.
  3. usePsqlSession() — CLI path detection, \c handling, cliExecStmt, the psql output buffer. Roughly lines 580–700.
  4. <Toolbar> — the top button strip (Save, Format, Run, Tools, AI, Compare, Clone, etc.) as a sub-component.

Suggested approach

  • Hooks live in src/hooks/editor/ (new directory).
  • Sub-components live next to MainContent.tsx (src/components/layout/).
  • Aim to remove ~300–500 lines from MainContent.tsx per PR. Stop there; don't try to refactor everything in one shot.

Done criteria

  • Behavior unchanged when running the app manually.
  • The extracted hook/component is the only thing that owns its concern — the parent passes data down via props, not via in-line state.
  • TypeScript clean, tests clean, build clean.
  • Add a Vitest test exercising at least one path of the new module.

Out of scope

  • Replacing Zustand with Redux/TanStack Query.
  • Reworking the panel-resize layout.
  • Touching the results grid logic (covered in a future ticket).

Audit reference

K2 in the pre-launch audit.

Lingua principale
TypeScript
Stelle
6
Fork
1
Merge medio
17m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di openidle-dev/queryden

Tutte le issue di openidle-dev/queryden

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.