fix clerk provider usage

[narthur]

The clerk provider was used within the main App component but that resulted in an issue since that component also used the useClerk hook which needs to be used inside the provider. The provider has been moved to allow useClerk usage to remain where it is.

Summary by CodeRabbit

• Refactor

  • Reorganized app-level providers to improve structure; the authentication provider now wraps the app at a higher level.
  • Routing, navigation, and UI behavior remain unchanged.

• Chores

  • Internal adjustments to provider order for maintainability.
  • No public APIs were modified; no user-facing impact.

[coderabbitai]

Walkthrough

ClerkProvider was moved out of App’s internal provider tree into a new AppWithRouter wrapper that now wraps App with ClerkProvider. App retains its internal routing and providers (e.g., QueryClientProvider, theme) without ClerkProvider. No exported signatures changed; behavior remains functionally equivalent with a shifted provider scope.

Changes

Cohort / File(s)	Summary of Changes
Provider restructuring src/App.tsx	Introduced AppWithRouter that wraps App with ClerkProvider. Removed ClerkProvider and appearance config from inside App. Preserved routing/layout logic within App. Export signatures unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• invalidate query cache on auth change #184 — Adjusts Clerk usage inside App (adds a useOnClerkEvent listener), intersecting with this PR’s relocation of ClerkProvider and potentially affecting hook context.

Poem

In burrows of code I hop and weave,
Moving keys to the outer sheave—
Clerk now guards the garden gate,
While routes inside still navigate.
Thump-thump! Providers fall in line,
Carrots compiled—everything’s fine.
🥕✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ 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 “fix clerk provider usage” accurately and concisely reflects the core change in this pull request, namely relocating the Clerk provider so that useClerk can be called properly.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch payment-method-prompt

---

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

[github-actions]

Outdated dependencies

┌────────────────────────────────────────┬─────────────────┬───────────────┐
│ Package                                │ Current         │ Latest        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @clerk/themes                          │ 2.4.7           │ 2.4.23        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ dayjs                                  │ 1.11.13         │ 1.11.18       │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ humanize-duration                      │ 3.33.0          │ 3.33.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ vite (dev)                             │ 7.1.2           │ 7.1.7         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @clerk/clerk-react                     │ 5.41.0          │ 5.49.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @clerk/types (dev)                     │ 4.89.0          │ 4.90.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @eslint/compat (dev)                   │ 1.3.2           │ 1.4.0         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @eslint/js (dev)                       │ 9.33.0          │ 9.36.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @stripe/stripe-js                      │ 7.8.0           │ 7.9.0         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @testing-library/jest-dom (dev)        │ 6.6.4           │ 6.9.0         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @typescript-eslint/eslint-plugin (dev) │ 8.39.1          │ 8.45.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @typescript-eslint/parser (dev)        │ 8.39.1          │ 8.45.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ eslint (dev)                           │ 9.33.0          │ 9.36.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ knip (dev)                             │ 5.62.0          │ 5.64.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ prettier (dev)                         │ 3.3.3           │ 3.6.2         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ query-string                           │ 9.2.2           │ 9.3.1         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/icons-material                    │ 5.18.0          │ 7.3.2         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/material                          │ 5.18.0          │ 7.3.2         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/x-date-pickers                    │ 7.29.4          │ 8.12.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @types/node (dev)                      │ 22.17.1         │ 24.6.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @types/react (dev)                     │ 18.3.23         │ 19.1.16       │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @types/react-dom (dev)                 │ 18.3.7          │ 19.1.9        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @vitest/ui (dev)                       │ 2.1.9           │ 3.2.4         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ eslint-plugin-testing-library (dev)    │ 6.5.0           │ 7.11.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ globals (dev)                          │ 15.15.0         │ 16.4.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ jsdom (dev)                            │ 24.1.3          │ 27.0.0        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react                                  │ 18.3.1          │ 19.1.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react-dom                              │ 18.3.1          │ 19.1.1        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react-router-dom                       │ 6.30.1          │ 7.9.3         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ react-toastify                         │ 10.0.6          │ 11.0.5        │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ rollup-plugin-visualizer (dev)         │ 5.14.0          │ 6.0.3         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ type-fest (dev)                        │ 4.41.0          │ 5.0.1         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ vitest (dev)                           │ 2.1.9           │ 3.2.4         │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ @mui/lab                               │ 5.0.0-alpha.173 │ 7.0.0-beta.17 │
├────────────────────────────────────────┼─────────────────┼───────────────┤
│ vitest-fetch-mock (dev)                │ 0.3.0           │ 0.4.5         │
└────────────────────────────────────────┴─────────────────┴───────────────┘

[github-actions]

Bundle Stats

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
5	1.75 MB → 1.75 MB (-416 B)	-0.02%

Changeset

File	Δ	Size
src/App.tsx	📉 -416 B (-8.21%)	4.95 kB → 4.54 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

Asset	File Size	% Changed
assets/index.js	493.08 kB → 492.67 kB (-416 B)	-0.08%

Unchanged

Asset	File Size	% Changed
assets/dom.js	144.67 kB	0%
assets/material.js	636.95 kB	0%
assets/diffToNow.js	55.09 kB	0%
assets/DueForm.js	465.88 kB	0%

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Repository: TaskRatchet/coderabbit/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc094b8 and 01a6bc0.

📒 Files selected for processing (1)

• src/App.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/App.tsx (4)

src/components/HOCs/AndTheme.tsx (1)

• AndTheme (32-70)

src/components/organisms/NavBar.tsx (1)

• NavBar (27-115)

src/components/organisms/PaymentMethodAlert.tsx (1)

• PaymentMethodAlert (9-60)

__mocks__/@clerk/clerk-react.tsx (3)

• RedirectToSignIn (11-13)
• RedirectToSignUp (15-17)
• ClerkProvider (3-5)

🔇 Additional comments (1)

src/App.tsx (1)

65-146: Confirm production entrypoint imports the default AppWithRouter
Tests correctly import the named App and wrap it in MemoryRouter and QueryClientProvider; there are no extra BrowserRouter or ClerkProvider usages in the app itself. Please verify your index .tsx (or main .tsx) imports the default from ./App (i.e. import App from './App') and renders that wrapped component via createRoot/ReactDOM.render.