From ae58e973155d630d2deb4e5d99e38ed1e78221c6 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Tue, 30 Sep 2025 11:29:24 -0400
Subject: [PATCH] fix clerk provider usage

---
 src/App.tsx | 183 ++++++++++++++++++++++++++--------------------------
 1 file changed, 90 insertions(+), 93 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e953cfc2..ae54b7d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -62,105 +62,102 @@ export function App(): JSX.Element {
 	}, [location]);
 
 	return (
-		<ClerkProvider
-			publishableKey={PUBLISHABLE_KEY}
-			appearance={{
-				theme: browser.prefersDarkMode() ? dark : undefined,
-			}}
-		>
-			<QueryClientProvider client={queryClient}>
-				<AndTheme>
-					<Stack sx={{ height: '100vh' }}>
-						<NavBar onTodayClick={handleTodayClick} />
-						<Box ref={ref} overflow={'scroll'} flexGrow={1}>
-							<Container
-								maxWidth={'sm'}
-								disableGutters
-								sx={{
-									minHeight: 1,
-								}}
-							>
-								<PaymentMethodAlert />
-								<Routes>
-									<Route
-										path={'/success'}
-										element={
-											<Box sx={{ p: 2 }}>
-												<Alert severity="success">
-													Your payment method has been saved successfully.
-												</Alert>
-											</Box>
-										}
-									/>
-
-									<Route
-										path={'/cancel'}
-										element={
-											<Box sx={{ p: 2 }}>
-												<Alert severity="error">
-													Your payment method could not be saved. Please contact{' '}
-													<Link
-														component="a"
-														href="mailto:support@taskratchet.com"
-														target={'_blank'}
-														rel="noopener noreferrer"
-													>
-														support@taskratchet.com
-													</Link>{' '}
-													for assistance.
-												</Alert>
-											</Box>
-										}
-									/>
-
-									<Route
-										path={'/settings'}
-										element={
-											<Authenticated>
-												<Settings />
-											</Authenticated>
-										}
-									/>
-
-									<Route path={'/reset'} element={<ResetPassword />} />
-
-									<Route
-										path={'/complete-registration'}
-										element={<Register />}
-									/>
-
-									<Route
-										path={'/login'}
-										element={<RedirectToSignIn redirectUrl={'/'} />}
-									/>
-
-									<Route
-										path={'/register'}
-										element={<RedirectToSignUp redirectUrl={'/'} />}
-									/>
-
-									<Route
-										path={'/'}
-										element={
-											<Authenticated>
-												<Tasks lastToday={lastToday} />
-											</Authenticated>
-										}
-									/>
-								</Routes>
-							</Container>
-						</Box>
-					</Stack>
-				</AndTheme>
-			</QueryClientProvider>
-		</ClerkProvider>
+		<QueryClientProvider client={queryClient}>
+			<AndTheme>
+				<Stack sx={{ height: '100vh' }}>
+					<NavBar onTodayClick={handleTodayClick} />
+					<Box ref={ref} overflow={'scroll'} flexGrow={1}>
+						<Container
+							maxWidth={'sm'}
+							disableGutters
+							sx={{
+								minHeight: 1,
+							}}
+						>
+							<PaymentMethodAlert />
+							<Routes>
+								<Route
+									path={'/success'}
+									element={
+										<Box sx={{ p: 2 }}>
+											<Alert severity="success">
+												Your payment method has been saved successfully.
+											</Alert>
+										</Box>
+									}
+								/>
+
+								<Route
+									path={'/cancel'}
+									element={
+										<Box sx={{ p: 2 }}>
+											<Alert severity="error">
+												Your payment method could not be saved. Please contact{' '}
+												<Link
+													component="a"
+													href="mailto:support@taskratchet.com"
+													target={'_blank'}
+													rel="noopener noreferrer"
+												>
+													support@taskratchet.com
+												</Link>{' '}
+												for assistance.
+											</Alert>
+										</Box>
+									}
+								/>
+
+								<Route
+									path={'/settings'}
+									element={
+										<Authenticated>
+											<Settings />
+										</Authenticated>
+									}
+								/>
+
+								<Route path={'/reset'} element={<ResetPassword />} />
+
+								<Route path={'/complete-registration'} element={<Register />} />
+
+								<Route
+									path={'/login'}
+									element={<RedirectToSignIn redirectUrl={'/'} />}
+								/>
+
+								<Route
+									path={'/register'}
+									element={<RedirectToSignUp redirectUrl={'/'} />}
+								/>
+
+								<Route
+									path={'/'}
+									element={
+										<Authenticated>
+											<Tasks lastToday={lastToday} />
+										</Authenticated>
+									}
+								/>
+							</Routes>
+						</Container>
+					</Box>
+				</Stack>
+			</AndTheme>
+		</QueryClientProvider>
 	);
 }
 
 export default function AppWithRouter(): JSX.Element {
 	return (
 		<Router>
-			<App />
+			<ClerkProvider
+				publishableKey={PUBLISHABLE_KEY}
+				appearance={{
+					theme: browser.prefersDarkMode() ? dark : undefined,
+				}}
+			>
+				<App />
+			</ClerkProvider>
 		</Router>
 	);
 }