Update dependencies and refactor async props handling in page components

Author: Adityasinghvats

package-lock.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.2",
     "@tabler/icons": "^3.31.0",
     "@tabler/icons-react": "^3.31.0",
     "@types/canvas-confetti": "^1.9.0",

package.json

@@ -26,7 +26,8 @@ import DeleteQuestion from "./DeleteQuestion";
 import EditQuestion from "./EditQuestion";
 import { TracingBeam } from "@/components/ui/tracing-beam";
 
-const Page = async ({ params }: { params: { quesId: string; quesName: string } }) => {
+const Page = async (props: { params: Promise<{ quesId: string; quesName: string }> }) => {
+    const params = await props.params;
     const [question, answers, upvotes, downvotes, comments] = await Promise.all([
         databases.getDocument(db, questionCollection, params.quesId),
         databases.listDocuments(db, answerCollection, [
@@ -51,7 +52,7 @@ const Page = async ({ params }: { params: { quesId: string; quesName: string } }
             Query.orderDesc("$createdAt"),
         ]),
     ]);
-    
+
 
     // since it is dependent on the question, we fetch it here outside of the Promise.all
     const author = await users.get<UserPrefs>(question.authorId);

src/app/questions/[quesId]/[quesName]/page.tsx

@@ -15,7 +15,7 @@ import { Particles } from "@/components/magicui/particles";
 const Page = async ({
     searchParams,
 }: {
-    searchParams: { page?: string; tag?: string; search?: string };
+    searchParams: Promise<{ page?: string; tag?: string; search?: string }>;
 }) => {
     const searchForParams = await searchParams;
     const params = {

src/app/questions/page.tsx

@@ -10,13 +10,14 @@ import { Query } from "node-appwrite";
 import React from "react";
 
 
-const Page = async ({
-    params,
-    searchParams,
-}: {
-    params: { userId: string; userSlug: string };
-    searchParams: { page?: string };
-}) => {
+const Page = async (
+    props: {
+        params: Promise<{ userId: string; userSlug: string }>;
+        searchParams: Promise<{ page?: string }>;
+    }
+) => {
+    const searchParams = await props.searchParams;
+    const params = await props.params;
     searchParams.page ||= "1";
 
     const queries = [

src/app/users/[userId]/[userSlug]/answers/page.tsx

@@ -8,13 +8,18 @@ import EditButton from "./EditButton";
 import Navbar from "./Navbar";
 import { IconClockFilled, IconUserFilled } from "@tabler/icons-react";
 
-const Layout = async ({
-    children,
-    params,
-}: {
-    children: React.ReactNode;
-    params: { userId: string; userSlug: string };
-}) => {
+const Layout = async (
+    props: {
+        children: React.ReactNode;
+        params: Promise<{ userId: string; userSlug: string }>;
+    }
+) => {
+    const params = await props.params;
+
+    const {
+        children
+    } = props;
+
     const user = await users.get<UserPrefs>(params.userId);
 
     return (

src/app/users/[userId]/[userSlug]/layout.tsx

@@ -8,7 +8,8 @@ import { answerCollection, db, questionCollection } from "@/models/name";
 import { Query } from "node-appwrite";
 import { Particles } from "@/components/magicui/particles";
 
-const Page = async ({ params }: { params: { userId: string; userSlug: string } }) => {
+const Page = async (props: { params: Promise<{ userId: string; userSlug: string }> }) => {
+    const params = await props.params;
     const [user, questions, answers] = await Promise.all([
         users.get<UserPrefs>(params.userId),
         databases.listDocuments(db, questionCollection, [

src/app/users/[userId]/[userSlug]/page.tsx

@@ -8,13 +8,14 @@ import { Query } from "node-appwrite";
 import React from "react";
 import { Particles } from "@/components/magicui/particles";
 
-const Page = async ({
-    params,
-    searchParams,
-}: {
-    params: { userId: string; userSlug: string };
-    searchParams: { page?: string };
-}) => {
+const Page = async (
+    props: {
+        params: Promise<{ userId: string; userSlug: string }>;
+        searchParams: Promise<{ page?: string }>;
+    }
+) => {
+    const searchParams = await props.searchParams;
+    const params = await props.params;
     searchParams.page ||= "1";
 
     const queries = [

src/app/users/[userId]/[userSlug]/questions/page.tsx

@@ -9,13 +9,14 @@ import { Query } from "node-appwrite";
 import React from "react";
 import { Particles } from "@/components/magicui/particles";
 
-const Page = async ({
-    params,
-    searchParams,
-}: {
-    params: { userId: string; userSlug: string };
-    searchParams: { page?: string; voteStatus?: "upvoted" | "downvoted" };
-}) => {
+const Page = async (
+    props: {
+        params: Promise<{ userId: string; userSlug: string }>;
+        searchParams: Promise<{ page?: string; voteStatus?: "upvoted" | "downvoted" }>;
+    }
+) => {
+    const searchParams = await props.searchParams;
+    const params = await props.params;
     searchParams.page ||= "1";
 
     const query = [

src/app/users/[userId]/[userSlug]/votes/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
 import type {
@@ -17,7 +18,8 @@ import React, {
   useRef,
 } from "react";
 
-import { Button, ButtonProps } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
+import { ButtonHTMLAttributes } from "react";
 
 type Api = {
   fire: (options?: ConfettiOptions) => void;
@@ -109,7 +111,7 @@ ConfettiComponent.displayName = "Confetti";
 // Export as Confetti
 export const Confetti = ConfettiComponent;
 
-interface ConfettiButtonProps extends ButtonProps {
+interface ConfettiButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   options?: ConfettiOptions &
     ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };
   children?: React.ReactNode;