fix: next15 page params

src/app/(main)/app/f/[slug]/[threadId]/page.tsx

@@ -8,17 +8,19 @@ import { Separator } from "@/components/ui/separator";
 import { getThreadById } from "@/db/queries/thread";
 import { threads, comments } from "@/db/schema";
 import { ArrowDownIcon, ArrowUpIcon, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, use } from "react";
 import { CommentModal } from "@/components/comment-modal";
 import { getUserInfoById } from "@/actions/user";
 import Link from "next/link";
 import { CommentList } from "@/components/comment-list";
 
 const FrauditThreadPage = ({
-  params: { threadId },
+  params,
 }: {
-  params: { threadId: string };
+  params: Promise<{ threadId: string }>;
 }) => {
+  const { threadId } = use(params);
+
   const [isLoading, setIsLoading] = useState(true);
   const [user, setUser] = useState<any>();
   const [thread, setThread] = useState<typeof threads.$inferSelect>();
@@ -51,7 +53,7 @@ const FrauditThreadPage = ({
     };
 
     getData();
-  }, []);
+  }, [threadId]);
 
   return (
     <>

src/app/(main)/app/u/[username]/page.tsx

@@ -4,17 +4,18 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { ArrowDown, ArrowUp, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, use } from "react";
 import { threads } from "@/db/schema";
 import { UserThreadList } from "@/components/user-thread-list";
 import { getUserInfo, getUserThreadsById } from "@/actions/user";
 import { useRouter } from "next/navigation";
 import { useClerk } from "@clerk/nextjs";
 
-const ProfilePage = ({ params }: { params: { username: string } }) => {
-  const username = params.username;
+const ProfilePage = ({ params }: { params: Promise<{ username: string }> }) => {
+  const {username} = use(params);
+
   const router = useRouter();
-  const clerk = useClerk();
+  const { user: cUser } = useClerk();
 
   const [loading, setLoading] = useState(true);
   const [user, setUser] = useState<any>();
@@ -23,13 +24,13 @@ const ProfilePage = ({ params }: { params: { username: string } }) => {
   >([]);
 
   useEffect(() => {
-    if (!clerk.user) {
+    if (!cUser) {
     } else {
-      if (clerk?.user.username === username) {
+      if (cUser?.username === username) {
         router.push("/app/u");
       }
     }
-  }, []);
+  }, [cUser, username]);
 
   useEffect(() => {
     const getData = async () => {
@@ -53,7 +54,7 @@ const ProfilePage = ({ params }: { params: { username: string } }) => {
     };
 
     getData();
-  }, []);
+  }, [username, cUser]);
 
   return (
     <>

src/app/(main)/rmp/university/[id]/course/[abbr]/[number]/page.tsx

@@ -11,14 +11,16 @@ import {
   universities,
 } from "@/db/schema";
 import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, use} from "react";
 import StarRatings from "react-star-ratings";
 
 const CoursePage = ({
-  params: { id, abbr, number },
+  params,
 }: {
-  params: { id: string; abbr: string; number: string };
+  params: Promise<{ id: string; abbr: string; number: string }>;
 }) => {
+  const { id, abbr, number } = use(params);
+
   const [loading, setLoading] = useState(true);
   const [course, setCourse] = useState<typeof courses.$inferSelect>();
   const [university, setUniversity] =
@@ -51,7 +53,7 @@ const CoursePage = ({
     };
 
     getData();
-  }, []);
+  }, [abbr, id, number]);
 
   return (
     <>

src/app/(main)/rmp/university/[id]/page.tsx

@@ -4,14 +4,14 @@ import { Separator } from "@/components/ui/separator";
 import { UniversityTabs } from "@/components/rmp/university-tabs";
 import { universities, professors, courses, reviews } from "@/db/schema";
 import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 
 import StarRatings from "react-star-ratings";
 
-const UniversityPage = ({ params: { id } }: { params: { id: string } }) => {
-  const universityId = id;
+const UniversityPage = ({ params }: {params:  Promise<{id: string} >}) => {
+  const {id: universityId} = use(params);
 
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true); 
   const [uni, setUni] = useState<typeof universities.$inferSelect>();
 
   const [uniCourses, setUniCourses] =
@@ -38,7 +38,7 @@ const UniversityPage = ({ params: { id } }: { params: { id: string } }) => {
     };
 
     getData();
-  }, []);
+  }, [universityId]);
 
   // TODO: SKELETON
   return (

src/app/(main)/rmp/university/professor/[id]/page.tsx

@@ -12,11 +12,11 @@ import {
 } from "@/db/schema";
 import { Loader2 } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useState, use } from "react";
 import StarRatings from "react-star-ratings";
 
-const ProfessorPage = ({ params: { id } }: { params: { id: string } }) => {
-  const professorId = id;
+const ProfessorPage = ({ params }: { params: Promise<{ id: string }> }) => {
+  const {id: professorId} = use(params);
 
   const [loading, setLoading] = useState(true);
   const [prof, setProf] = useState<typeof professors.$inferSelect>();
@@ -41,7 +41,7 @@ const ProfessorPage = ({ params: { id } }: { params: { id: string } }) => {
     };
 
     getData();
-  }, []);
+  }, [professorId]);
 
   return (
     <>