munch-ease-frontend/refactor-strategy.md

# Refactor Strategy

This document outlines a pragmatic, step-by-step refactor plan to improve structure, readability, and maintainability. Each step includes a clear outcome and a checkbox to track progress.

Last updated: 2025-10-18

## Goals
- Separate concerns (routing, HTTP/API, mapping/normalization, UI logic)
- Improve readability and testability
- Establish light-weight standards (naming, lint/format) without blocking development
- Keep changes incremental and safe

## Phases and Steps

### Phase 1 — Routing and Auth (Foundational)
- [x] Extract router into `src/router/index.js` with named routes
- [x] Add route meta `requiresAuth` and a global auth guard
- [x] Remove auth-redirect from `App.vue` (handled by guard instead)
- [x] Convert top-level nav to use route names consistently (optional)

Outcome: Routing logic is centralized and testable; pages redirect consistently based on auth.

### Phase 2 — API Layer Split (Incremental)
- [x] Add `src/api/http.js` wrapper for JSON fetch with error handling and env-based base URL
- [x] Add `src/api/mappers/mealMapper.js` to normalize Meal data (dates)
- [x] Add `src/api/meals.js` and migrate MealPlan API calls (get upcoming, mark consumed, delete)
- [x] Create `src/api/recipes.js` and migrate recipe endpoints
- [x] Create `src/api/shopping.js` and migrate shopping endpoints
- [x] Create `src/api/auth.js` and migrate auth endpoints

Outcome: Feature modules call cohesive services; logic for mapping/normalization is isolated and testable.

### Phase 3 — Composables (UI-Facing Logic)
- [ ] Add `src/composables/useAuth.js` (user ref, ensureAuth)
- [ ] Add `src/composables/useMeals.js` (fetch and mutate meals)
- [ ] Refactor pages to use composables and `<script setup>` where appropriate

Outcome: Components get smaller and easier to read; business logic is reusable.

### Phase 4 — Tooling and Standards
- [ ] Add Prettier config and .editorconfig; wire Prettier with ESLint
- [ ] Upgrade ESLint (if/when convenient) and align with Vue 3 rules
- [ ] Ensure Volar is used (dev environment) for Vue 3 type intelligence

Outcome: Stable formatting and consistent linting across contributors.

### Phase 5 — Tests (Targeted)
- [ ] Add a unit test runner (Vitest or Jest)
- [ ] Test mappers (dates/reference wiring)
- [ ] Test `units.js` conversions and totals

Outcome: Confidence in refactors and easier onboarding.

## Environment
- Prefer `VUE_APP_API_BASE` for backend base URL (fallback to `/api` for dev). Optionally set a devServer proxy in `vue.config.js`.

## Progress Log
- 2025-10-18:
  - Extracted router with names and auth guard
  - Removed `App.vue` auth redirect
  - Added `api/http.js`, `api/mappers/mealMapper.js`, `api/meals.js`
  - Updated `MealPlanPage.vue` to use meals API
  - Added `api/mappers/recipeMapper.js`, `api/recipes.js`; updated recipes components
  - Added `api/mappers/shoppingListMapper.js`, `api/shopping.js`; updated shopping components
  - Added `api/auth.js` and `api/persons.js`; router uses auth API