Refactor: Use middleware instead of unstable_middleware

Refactor: Use `prisma.$queryRawTyped` for user search

Co-authored-by: me <[email protected]>

Author: cursoragent

app/routes/_auth+/login.server.ts

@@ -11,7 +11,7 @@ import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { getRedirectToUrl, type VerifyFunctionArgs } from './verify.server.ts'
 import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
-export const unstable_middleware = [requireAnonymousMiddleware]
+export const middleware = [requireAnonymousMiddleware]
 
 const verifiedTimeKey = 'verified-time'
 const unverifiedSessionIdKey = 'unverified-session-id'

app/routes/_auth+/onboarding.server.ts

@@ -5,7 +5,7 @@ import { onboardingEmailSessionKey } from './onboarding.tsx'
 import { type VerifyFunctionArgs } from './verify.server.ts'
 import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
-export const unstable_middleware = [requireAnonymousMiddleware]
+export const middleware = [requireAnonymousMiddleware]
 
 export async function handleVerification({ submission }: VerifyFunctionArgs) {
 	invariant(

app/routes/_auth+/onboarding.tsx

@@ -8,9 +8,6 @@ import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { checkIsCommonPassword, sessionKey, signup } from '#app/utils/auth.server.ts'
-export const unstable_middleware = [
-	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
-]
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'

app/routes/_auth+/onboarding_.$provider.server.ts

@@ -1,3 +1,3 @@
 import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
-export const unstable_middleware = [requireAnonymousMiddleware]
+export const middleware = [requireAnonymousMiddleware]

app/routes/_auth+/reset-password.server.ts

@@ -6,7 +6,7 @@ import { resetPasswordUsernameSessionKey } from './reset-password.tsx'
 import { type VerifyFunctionArgs } from './verify.server.ts'
 import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
-export const unstable_middleware = [requireAnonymousMiddleware]
+export const middleware = [requireAnonymousMiddleware]
 
 export async function handleVerification({ submission }: VerifyFunctionArgs) {
 	invariant(

app/routes/_auth+/reset-password.tsx

@@ -6,9 +6,6 @@ import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { checkIsCommonPassword, resetUserPassword } from '#app/utils/auth.server.ts'
-export const unstable_middleware = [
-	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
-]
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'

app/routes/_auth+/signup.server.ts

@@ -1,3 +1,3 @@
 import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
-export const unstable_middleware = [requireAnonymousMiddleware]
+export const middleware = [requireAnonymousMiddleware]

app/routes/settings+/profile.server.ts

@@ -1,3 +1,3 @@
 import { requireUserMiddleware } from '#app/middleware.server.ts'
 
-export const unstable_middleware = [requireUserMiddleware]
+export const middleware = [requireUserMiddleware]

app/routes/users+/index.tsx

@@ -1,4 +1,4 @@
-// using $queryRawUnsafe for LIKE query construction
+import { searchUsers } from '@prisma/client/sql'
 import { Img } from 'openimg/react'
 import { redirect, Link } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -15,10 +15,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 	}
 
 	const like = `%${searchTerm ?? ''}%`
-	const users = await prisma.$queryRawUnsafe<{ id: string; username: string; name: string | null; imageObjectKey: string | null }[]>(
-		`SELECT id, username, name, (SELECT "objectKey" FROM "Image" WHERE "userId" = "User"."id" LIMIT 1) as "imageObjectKey" FROM "User" WHERE username ILIKE $1 OR name ILIKE $1 ORDER BY username ASC`,
-		like,
-	)
+	const users = await prisma.$queryRawTyped(searchUsers(like))
 	return { status: 'idle', users } as const
 }
 
@@ -52,7 +49,7 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 									>
 										<Img
 											alt={user.name ?? user.username}
-											src={getUserImgSrc(user.imageObjectKey ?? undefined)}
+											src={getUserImgSrc(user.imageObjectKey)}
 											className="size-16 rounded-full"
 											width={256}
 											height={256}