Skip to content

feat: move to pinia stores#16

Merged
niklhut merged 3 commits intomainfrom
feat/move-to-pinia
Apr 8, 2026
Merged

feat: move to pinia stores#16
niklhut merged 3 commits intomainfrom
feat/move-to-pinia

Conversation

@niklhut
Copy link
Copy Markdown
Owner

@niklhut niklhut commented Apr 8, 2026

Summary by CodeRabbit

  • Refactoring
    • Moved core auth, ISBN scanner, and library dashboard state to a centralized store system for more reliable and consistent behavior across the app (login/register, scanning, bulk import, and library pages).
  • Chores
    • Integrated the app-wide state management module.
  • Tests
    • Added unit tests covering authentication, scanner, and dashboard flows.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 8, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d8d6e678-c1e8-4e9b-9366-af1beffa8f0b

📥 Commits

Reviewing files that changed from the base of the PR and between 0942c43 and 65ed5cd.

📒 Files selected for processing (3)
  • test/unit/auth-store.test.ts
  • test/unit/isbn-scanner-store.test.ts
  • test/unit/library-dashboard-state.test.ts
✅ Files skipped from review due to trivial changes (1)
  • test/unit/auth-store.test.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • test/unit/library-dashboard-state.test.ts
  • test/unit/isbn-scanner-store.test.ts

📝 Walkthrough

Walkthrough

This PR migrates several composable-based state modules to Pinia stores (auth, ISBN scanner, library dashboard), extracts the auth client to a new utility, updates components/pages/tests to consume the new stores via useXStore() and storeToRefs(), and enables Pinia in Nuxt config and package deps.

Changes

Cohort / File(s) Summary
Auth Store Migration
app/components/AppHeader.vue, app/pages/(auth)/login.vue, app/pages/(auth)/register.vue, app/pages/index.vue
Components/pages now call useAuthStore() and use storeToRefs(authStore) for reactive auth state; actions (signIn, signUp, signOut) are taken from the store instance.
Auth Store Definition & Plugin
app/stores/auth.ts, app/utils/auth-client.ts, app/plugins/auth.ts
Replaced composable useAuth with Pinia useAuthStore; moved authClient instantiation to app/utils/auth-client.ts; plugin import adjusted to use the new util.
ISBN Scanner Store Migration
app/components/BulkScanReview.vue, app/components/add/BulkImportTab.vue, app/components/add/CameraScanTab.vue
Components switched from useIsbnScanner() composable to useIsbnScannerStore() and use storeToRefs() for scanner state; scanner actions now come from the store.
ISBN Scanner Store Definition
app/stores/isbnScanner.ts
Converted useIsbnScanner() composable into useIsbnScannerStore Pinia store; updated dashboard sync to call dashboard store methods directly.
Library Dashboard Store Migration
app/components/add/IsbnLookupTab.vue, app/pages/library/[id].vue, app/pages/library/index.vue
Replaced useLibraryDashboardState() with useLibraryDashboardStore(); components now derive dashboard refs with storeToRefs() and call store actions.
Library Dashboard Store Definition
app/stores/libraryDashboard.ts
Reimplemented composable as Pinia useLibraryDashboardStore, migrating useState state to Pinia ref()s and exporting DashboardPagination interface.
Infrastructure Setup
nuxt.config.ts, package.json
Added pinia and @pinia/nuxt to dependencies and registered the Pinia Nuxt module.
Tests
test/unit/auth-store.test.ts, test/unit/isbn-scanner-store.test.ts, test/unit/library-dashboard-state.test.ts
Added/updated unit tests to initialize Pinia per-test, mock the auth client and fetch/toast calls, and assert store behavior via storeToRefs() and direct store method calls.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 Hopping through code with a cheerful snort,

Pinia gardens now hold the fort.
Composables tucked in a cozy burrow,
State now steady, no more furrow.
🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: move to pinia stores' directly and clearly summarizes the main objective of the changeset—migrating from composables/useState to Pinia stores across the entire application.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/move-to-pinia

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
app/stores/isbnScanner.ts (1)

1-1: Consider using the ~~ alias for consistency with other imports.

The import uses a relative path ../../shared/utils/schemas while other files in the codebase use ~~/shared/... for shared module imports. Using the alias improves readability and is consistent with Nuxt conventions.

Suggested fix
-import { extractIsbn } from '../../shared/utils/schemas'
+import { extractIsbn } from '~~/shared/utils/schemas'
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/stores/isbnScanner.ts` at line 1, The import statement for extractIsbn
uses a relative path which is inconsistent with the project's alias usage;
update the import in isbnScanner.ts to use the project alias (e.g., change from
'../../shared/utils/schemas' to '~~/shared/utils/schemas') so extractIsbn is
imported via the alias and matches other files' imports.
test/unit/library-dashboard-state.test.ts (1)

16-16: Consider updating the describe block name to match the store name.

The describe block is still named 'useLibraryDashboardState' but the store has been renamed to useLibraryDashboardStore. Updating this would improve test clarity and maintainability.

Suggested fix
-describe('useLibraryDashboardState', () => {
+describe('useLibraryDashboardStore', () => {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/unit/library-dashboard-state.test.ts` at line 16, Update the test
describe block title to match the renamed store: change the string in the
describe(...) from 'useLibraryDashboardState' to 'useLibraryDashboardStore' so
the test suite name reflects the actual store under test (look for the describe
block that currently reads 'useLibraryDashboardState' in the test file and
replace it with 'useLibraryDashboardStore').
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@test/unit/auth-store.test.ts`:
- Around line 43-45: Tests assign to globalThis.useNuxtApp and never restore it,
causing cross-test leakage; fix by capturing the original value (e.g., const
_origUseNuxtApp = (globalThis as any).useNuxtApp) before stubbing
globalThis.useNuxtApp = () => ({ $authSession: session }) and add an afterEach
hook that restores it: if _origUseNuxtApp is undefined delete
globalThis.useNuxtApp else set globalThis.useNuxtApp = _origUseNuxtApp; apply
the same pattern for the other stubbed occurrence.

In `@test/unit/isbn-scanner-store.test.ts`:
- Around line 20-22: The tests overwrite globals like globalThis.useToast and
globalThis.$fetch (mocked values such as toastAdd) but never restore them,
causing leaks across suites; fix by saving the originals before mocking (e.g.,
const _origUseToast = (globalThis as any).useToast; const _orig$fetch =
(globalThis as any).$fetch) and restore them in an afterEach/afterAll hook
(e.g., afterEach(() => { (globalThis as any).useToast = _origUseToast;
(globalThis as any).$fetch = _orig$fetch; })), or use jest.spyOn/restoreAllMocks
to isolate the mocks for tests that set useToast/toastAdd/$fetch. Ensure you
reference the existing mocked symbols (useToast, $fetch, toastAdd) when
saving/restoring.

---

Nitpick comments:
In `@app/stores/isbnScanner.ts`:
- Line 1: The import statement for extractIsbn uses a relative path which is
inconsistent with the project's alias usage; update the import in isbnScanner.ts
to use the project alias (e.g., change from '../../shared/utils/schemas' to
'~~/shared/utils/schemas') so extractIsbn is imported via the alias and matches
other files' imports.

In `@test/unit/library-dashboard-state.test.ts`:
- Line 16: Update the test describe block title to match the renamed store:
change the string in the describe(...) from 'useLibraryDashboardState' to
'useLibraryDashboardStore' so the test suite name reflects the actual store
under test (look for the describe block that currently reads
'useLibraryDashboardState' in the test file and replace it with
'useLibraryDashboardStore').
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4726e950-a098-4923-aeec-adecfd706f88

📥 Commits

Reviewing files that changed from the base of the PR and between a24d773 and 0942c43.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (20)
  • app/components/AppHeader.vue
  • app/components/BulkScanReview.vue
  • app/components/add/BulkImportTab.vue
  • app/components/add/CameraScanTab.vue
  • app/components/add/IsbnLookupTab.vue
  • app/pages/(auth)/login.vue
  • app/pages/(auth)/register.vue
  • app/pages/index.vue
  • app/pages/library/[id].vue
  • app/pages/library/index.vue
  • app/plugins/auth.ts
  • app/stores/auth.ts
  • app/stores/isbnScanner.ts
  • app/stores/libraryDashboard.ts
  • app/utils/auth-client.ts
  • nuxt.config.ts
  • package.json
  • test/unit/auth-store.test.ts
  • test/unit/isbn-scanner-store.test.ts
  • test/unit/library-dashboard-state.test.ts
💤 Files with no reviewable changes (1)
  • app/plugins/auth.ts

@niklhut
Copy link
Copy Markdown
Owner Author

niklhut commented Apr 8, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 8, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@niklhut niklhut merged commit 1b90a4b into main Apr 8, 2026
3 checks passed
@niklhut niklhut deleted the feat/move-to-pinia branch April 8, 2026 02:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant