refactor: split MainContent into per-concern hooks

Abierto
  • ¿Algo no está bien?
#2 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
55/100
Tipo de issue
Refactorización
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
desktop, developer-experience, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
6
Forks
1
Merge medio
17 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de openidle-dev/queryden

Todos los issues de openidle-dev/queryden

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.