feat: upgrades nextjs (#45)

malcodeman · Nov 16, 2024 · 8d0b355 · 8d0b355
1 parent 4a99fed
commit 8d0b355
Show file tree

Hide file tree

Showing 8 changed files with 1,478 additions and 665 deletions.
diff --git a/app/_hooks/useComments.ts b/app/_hooks/useComments.ts
@@ -8,7 +8,8 @@ export const useComments = () => {
   const id = parseParam(params.id);
   const { data } = useQuery({
     queryKey: ["post", id],
-    queryFn: () => getComments(id),
+    queryFn: () => getComments(id!),
+    enabled: !!id,
   });
   const post = data?.post.data;
   const comments = data?.comments || [];

diff --git a/app/_lib/utils.ts b/app/_lib/utils.ts
@@ -54,6 +54,6 @@ export const parseComments = (comments: RedditComment[]) => {
   );
 };
 
-export const parseParam = (param: string | string[]) => {
+export const parseParam = (param: string | string[] | undefined) => {
   return Array.isArray(param) ? param[0] : param;
 };
diff --git a/app/r/[subreddit]/[sort]/page.tsx b/app/r/[subreddit]/[sort]/page.tsx
@@ -4,23 +4,25 @@ import { Metadata } from "next";
 export async function generateMetadata({
   params,
 }: {
-  params: { subreddit: string; sort: string };
+  params: Promise<{ subreddit: string; sort: string }>;
 }): Promise<Metadata> {
+  const subreddit = (await params).subreddit;
+
   return {
-    title: `${params.subreddit} | lurkstation`,
+    title: `${subreddit} | lurkstation`,
   };
 }
 
 type Props = {
-  params: { subreddit: string; sort: string };
-  searchParams: { t: string };
+  params: Promise<{ subreddit: string; sort: string }>;
+  searchParams: Promise<{ t: string }>;
 };
 
-export default function Sort(props: Props) {
+export default async function Sort(props: Props) {
   const { params, searchParams } = props;
-  const subreddit = params.subreddit;
-  const sort = params.sort;
-  const time = searchParams.t;
+  const subreddit = (await params).subreddit;
+  const sort = (await params).sort;
+  const time = (await searchParams).t;
   const queryKey = ["posts", subreddit, sort, time];
 
   return <Posts queryKey={queryKey} />;

diff --git a/app/r/[subreddit]/comments/[id]/[title]/page.tsx b/app/r/[subreddit]/comments/[id]/[title]/page.tsx
@@ -4,10 +4,12 @@ import { Metadata } from "next";
 export async function generateMetadata({
   params,
 }: {
-  params: { id: string; title: string };
+  params: Promise<{ id: string; title: string }>;
 }): Promise<Metadata> {
+  const title = (await params).title;
+
   return {
-    title: `${params.title} | lurkstation`,
+    title: `${title} | lurkstation`,
   };
 }
 

diff --git a/app/r/[subreddit]/page.tsx b/app/r/[subreddit]/page.tsx
@@ -4,20 +4,22 @@ import { Metadata } from "next";
 export async function generateMetadata({
   params,
 }: {
-  params: { subreddit: string };
+  params: Promise<{ subreddit: string }>;
 }): Promise<Metadata> {
+  const subreddit = (await params).subreddit;
+
   return {
-    title: `${params.subreddit} | lurkstation`,
+    title: `${subreddit} | lurkstation`,
   };
 }
 
 type Props = {
-  params: { subreddit: string };
+  params: Promise<{ subreddit: string }>;
 };
 
-export default function Sort(props: Props) {
+export default async function Sort(props: Props) {
   const { params } = props;
-  const subreddit = params.subreddit;
+  const subreddit = (await params).subreddit;
   const sort = "hot";
   const queryKey = ["posts", subreddit, sort];
 

diff --git a/app/user/[username]/page.tsx b/app/user/[username]/page.tsx
@@ -4,23 +4,25 @@ import { Metadata } from "next";
 export async function generateMetadata({
   params,
 }: {
-  params: { username: string };
+  params: Promise<{ username: string }>;
 }): Promise<Metadata> {
+  const username = (await params).username;
+
   return {
-    title: `${params.username} | lurkstation`,
+    title: `${username} | lurkstation`,
   };
 }
 
 type Props = {
-  params: { username: string };
-  searchParams: { sort: string; t: string };
+  params: Promise<{ username: string }>;
+  searchParams: Promise<{ sort: string; t: string }>;
 };
 
-export default function User(props: Props) {
+export default async function User(props: Props) {
   const { params, searchParams } = props;
-  const username = params.username;
-  const sort = searchParams.sort;
-  const time = searchParams.t;
+  const username = (await params).username;
+  const sort = (await searchParams).sort;
+  const time = (await searchParams).t;
   const queryKey = ["users", username, sort, time];
 
   return <Posts queryKey={queryKey} />;

diff --git a/package.json b/package.json
@@ -21,22 +21,22 @@
     "axios": "^1.7.4",
     "date-fns": "^2.30.0",
     "file-saver": "^2.0.5",
-    "next": "^14.2.3",
+    "next": "^15.0.3",
     "ramda": "^0.30.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.43.9",
     "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",
     "@types/file-saver": "^2.0.5",
-    "@types/node": "^20.10.4",
+    "@types/node": "^22.9.0",
     "@types/ramda": "^0.28.24",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.3.12",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.38.0",
-    "eslint-config-next": "^13.3.0",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^15.0.3",
     "postcss": "^8.4.21",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",