fix: handle async params in changelog and feedback API routes

Author: vignesh-gupta

apps/web/app/api/changelog/[id]/route.ts

@@ -2,10 +2,12 @@ import { api } from "@repo/backend/convex/_generated/api";
 import { ProjectId } from "@/lib/types";
 import { fetchQuery } from "convex/nextjs";
 
-export async function GET(_: Request, context: { params: ProjectId }) {
+export async function GET(_: Request, context: { params: Promise<ProjectId> }) {
+const id = (await context.params).id;
+
   try {
     const changelogs = await fetchQuery(api.changelog.list, {
-      projectId: context.params.id,
+      projectId: id,
       showPublished: true,
     });
 

apps/web/app/api/feedback/[id]/route.ts

@@ -2,10 +2,11 @@ import { api } from "@repo/backend/convex/_generated/api";
 import { ProjectId } from "@/lib/types";
 import { fetchQuery } from "convex/nextjs";
 
-export async function GET(_: Request, context: { params: ProjectId }) {
+export async function GET(_: Request, context: { params: Promise<ProjectId> }) {
+  const id = (await context.params).id;
   try {
     const feedbacks = await fetchQuery(api.feedback.list, {
-      projectId: context.params.id,
+      projectId: id,
     });
 
     return Response.json({

apps/web/app/api/webhooks/clerk/route.ts

@@ -20,7 +20,7 @@ export async function POST(req: Request) {
   }
 
   // Get the headers
-  const headerPayload = headers();
+  const headerPayload = await headers();
   const svix_id = headerPayload.get("svix-id");
   const svix_timestamp = headerPayload.get("svix-timestamp");
   const svix_signature = headerPayload.get("svix-signature");

apps/web/app/api/webhooks/clerk/utils/organization.ts

@@ -34,6 +34,6 @@ function mapOrgJsonToOrg(orgJson: OrganizationJSON): Organization {
     clerkId: orgJson.id,
     name: orgJson.name,
     imageUrl: orgJson.image_url || "",
-    createdBy: orgJson.created_by,
+    createdBy: orgJson.created_by || "",
   };
 }

apps/web/components/theme/theme-provider.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>

apps/web/components/ui/drawer.tsx

@@ -16,11 +16,11 @@ const Drawer = ({
 )
 Drawer.displayName = "Drawer"
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger
 
 const DrawerPortal = DrawerPrimitive.Portal
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose: typeof DrawerPrimitive.Close = DrawerPrimitive.Close
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,7 +31,7 @@ const DrawerOverlay = React.forwardRef<
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
-))
+)) as React.FC<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>>
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
 const DrawerContent = React.forwardRef<
@@ -52,7 +52,7 @@ const DrawerContent = React.forwardRef<
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
+))as React.FC<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>>
 DrawerContent.displayName = "DrawerContent"
 
 const DrawerHeader = ({
@@ -89,7 +89,7 @@ const DrawerTitle = React.forwardRef<
     )}
     {...props}
   />
-))
+))as React.FC<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>>
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 
 const DrawerDescription = React.forwardRef<
@@ -101,7 +101,7 @@ const DrawerDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+))as React.FC<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>>
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
 export {

apps/web/lib/hooks/use-event.ts

@@ -36,7 +36,7 @@ export function useEvent<TCallback extends AnyFunction>(
 
   // Create a stable callback that always calls the latest callback:
   // using useRef instead of useCallback avoids creating and empty array on every render
-  const stableRef = useRef<TCallback>();
+  const stableRef = useRef<TCallback | null>(null);
   if (!stableRef.current) {
     // eslint-disable-next-line no-unused-vars
     stableRef.current = function (this: unknown) {

apps/web/next.config.js

@@ -48,7 +48,6 @@ module.exports = withSentryConfig(
     sentryUrl: "https://sentry.io/",
 
     // Only print logs for uploading source maps in CI
-    // eslint-disable-next-line turbo/no-undeclared-env-vars
     silent: !process.env.CI,
 
     // For all available options, see:

turbo.json

@@ -11,13 +11,14 @@
     "NEXT_PUBLIC_SENTRY_DSN",
     "KAFKA_BROKER",
     "KAFKA_USERNAME",
-    "KAFKA_PASSWORD"
+    "KAFKA_PASSWORD",
+    "CI"
   ],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],
       "inputs": ["$TURBO_DEFAULT$", ".env*"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "outputs": [".next/**", "!.next/cache/**" , "dist/**"]
     },
     "lint": {
       "dependsOn": ["^lint"]