refactor: migrate project pages to use Next.js navigation hooks for next v15 breaking changes

vignesh-gupta · vignesh-gupta · commit a47204a3c98b · 2025-02-16T00:43:15.000+05:30
diff --git a/apps/kafka-consumer/package.json b/apps/kafka-consumer/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "tsx watch --env-file=.env src/index.ts ",
+    "non-dev": "tsx watch --env-file=.env src/index.ts ",
     "build": "esbuild src/index.ts --bundle --platform=node --outfile=dist/index.js --external:express --external:cors",
     "start": "node dist/index.js",
     "type-check": "tsc"
diff --git a/apps/web/app/(main)/dashboard/page.tsx b/apps/web/app/(main)/dashboard/page.tsx
@@ -3,14 +3,14 @@
 import { OrganizationProfile, useOrganization } from "@clerk/nextjs";
 import NoOrg from "@/components/empty-states/no-org";
 import ProjectList from "@/components/projects/project-list";
+import { useSearchParams } from "next/navigation";
 
-type DashboardPageProps = {
-  searchParams: {
-    settings?: string;
-  };
-};
 
-const DashboardPage = ({ searchParams: { settings } }: DashboardPageProps) => {
+const DashboardPage = () => {
+
+  const searchParams = useSearchParams();
+  const settings = searchParams.get("settings");
+
   const { organization } = useOrganization();
 
   if (settings) {
diff --git a/apps/web/app/(main)/projects/[id]/changelogs/page.tsx b/apps/web/app/(main)/projects/[id]/changelogs/page.tsx
@@ -11,11 +11,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useChangelogModal } from "@/lib/store/use-changelog-modal";
-import type { PagePropsWithProjectId } from "@/lib/types";
+import type { ProjectId } from "@/lib/types";
 import { Eye, FileText, MoreHorizontal, Plus } from "lucide-react";
 import Link from "next/link";
+import { useParams } from "next/navigation";
+
+const ChangelogsPage = () => {
+
+  const { id } = useParams<ProjectId>()
 
-const ChangelogsPage = ({ params: { id } }: PagePropsWithProjectId) => {
   const { onOpen } = useChangelogModal();
 
   return (
diff --git a/apps/web/app/(main)/projects/[id]/dashboard/page-client.tsx b/apps/web/app/(main)/projects/[id]/dashboard/page-client.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { api } from "@repo/backend/convex/_generated/api";
+import { useCurrentUser } from "@/lib/hooks/use-current-user";
+import type { ProjectId } from "@/lib/types";
+import { useQuery } from "convex/react";
+import { Loader2 } from "lucide-react";
+import OwnedTaskTable from "../_components/owned-task-table";
+
+const ProjectDashboardClientPage = ({ id }: ProjectId) => {
+  const currentUser = useCurrentUser();
+
+  const myTasks = useQuery(api.work_item.list, { projectId: id })?.filter(
+    (task) => task.assigneeId === currentUser?._id
+  );
+
+  return (
+    <section className="bg-primary-foreground/80 md:p-5 py-5 px-3 m-1 rounded-lg">
+        <h4 className="mb-5 text-lg">Your task list</h4>
+        {myTasks ? (
+          <OwnedTaskTable tasks={myTasks} />
+        ) : (
+          <div className="h-36 flex items-center justify-center">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        )}
+      </section>
+  );
+};
+
+export default ProjectDashboardClientPage;
diff --git a/apps/web/app/(main)/projects/[id]/dashboard/page.tsx b/apps/web/app/(main)/projects/[id]/dashboard/page.tsx
@@ -1,37 +1,15 @@
-"use client";
-
-import { api } from "@repo/backend/convex/_generated/api";
-import { useCurrentUser } from "@/lib/hooks/use-current-user";
 import type { PagePropsWithProjectId } from "@/lib/types";
-import { useQuery } from "convex/react";
-import { Loader2 } from "lucide-react";
-import OwnedTaskTable from "../_components/owned-task-table";
-
+import ProjectDashboardClientPage from "./page-client";
 
-const ProjectDashboardPage = ({
-  params: { id },
-}: PagePropsWithProjectId) => {
-  const currentUser = useCurrentUser();
-
-  const myTasks = useQuery(api.work_item.list, { projectId: id })?.filter(
-    (task) => task.assigneeId === currentUser?._id
-  );
+const ProjectDashboardPage = async ({ params }: PagePropsWithProjectId) => {
+  const id = (await params).id;
 
   return (
     <section>
       <h3 className="font-bold text-xl md:text-2xl lg:text-3xl mb-5">
         Project Dashboard
       </h3>
-      <section className="bg-primary-foreground/80 md:p-5 py-5 px-3 m-1 rounded-lg">
-        <h4 className="mb-5 text-lg">Your task list</h4>
-        {myTasks ? (
-          <OwnedTaskTable tasks={myTasks} />
-        ) : (
-          <div className="h-36 flex items-center justify-center">
-            <Loader2 className="h-6 w-6 animate-spin" />
-          </div>
-        )}
-      </section>
+      <ProjectDashboardClientPage id={id} />
     </section>
   );
 };
diff --git a/apps/web/app/(main)/projects/[id]/feedbacks/page.tsx b/apps/web/app/(main)/projects/[id]/feedbacks/page.tsx
@@ -6,12 +6,16 @@ import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { api } from "@repo/backend/convex/_generated/api";
 import { useFeedbackModal } from "@/lib/store/use-feedback-modal";
-import type { PagePropsWithProjectId } from "@/lib/types";
+import type { ProjectId } from "@/lib/types";
 import { useQuery } from "convex/react";
 import { FileText, Plus } from "lucide-react";
+import { useParams } from "next/navigation";
 
-const FeedbacksPage = ({ params }: PagePropsWithProjectId) => {
-  const feedbacks = useQuery(api.feedback.list, { projectId: params.id });
+const FeedbacksPage = () => {
+
+  const { id } = useParams<ProjectId>()
+
+  const feedbacks = useQuery(api.feedback.list, { projectId: id });
 
   const { onOpen } = useFeedbackModal();
 
diff --git a/apps/web/app/(main)/projects/[id]/messages/page.tsx b/apps/web/app/(main)/projects/[id]/messages/page.tsx
@@ -2,8 +2,9 @@ import MessageInput from "@/components/messages/message-input";
 import MessagesList from "@/components/messages/messages-list";
 import type { PagePropsWithProjectId } from "@/lib/types";
 
-const MessagesPage = ({ params: { id } }: PagePropsWithProjectId) => {
- 
+const MessagesPage = async ({ params }: PagePropsWithProjectId) => {
+
+  const id = (await params).id; 
   return (
     <div className="min-h-full px-2 space-y-2">
       <h3 className="font-bold text-xl md:text-2xl lg:text-3xl mb-3">
diff --git a/apps/web/app/(main)/projects/[id]/settings/danger-zone/page.tsx b/apps/web/app/(main)/projects/[id]/settings/danger-zone/page.tsx
@@ -4,15 +4,16 @@ import ConfirmModal from "@/components/modals/confirm-modal";
 import { Button } from "@/components/ui/button";
 import { DASHBOARD_ROUTE } from "@/lib/constants";
 import useApiMutation from "@/lib/hooks/use-api-mutation";
-import type { PagePropsWithProjectId } from "@/lib/types";
+import type { ProjectId } from "@/lib/types";
 import { api } from "@repo/backend/convex/_generated/api";
 import { KafkaMessage } from "@repo/backend/lib/types";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { toast } from "sonner";
 
-const ProjectSettingsDangerZonePage = ({
-  params: { id },
-}: PagePropsWithProjectId) => {
+const ProjectSettingsDangerZonePage = () => {
+
+  const { id } = useParams<ProjectId>()
+
   const { isPending, mutate: deleteProject } = useApiMutation(
     api.project.remove
   );
diff --git a/apps/web/app/(main)/projects/[id]/settings/layout.tsx b/apps/web/app/(main)/projects/[id]/settings/layout.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import { Separator } from "@/components/ui/separator";
-import type { PagePropsWithProjectId } from "@/lib/types";
+import type { ProjectId } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
 
-type ProjectSettingsLayoutProps = PropsWithChildren & PagePropsWithProjectId;
 
 const ProjectSettingsLayout = ({
   children,
-  params: { id },
-}: ProjectSettingsLayoutProps) => {
+}: PropsWithChildren) => {
+
+  const { id } = useParams<ProjectId>()
   const url = usePathname();
 
   const isDangerZone = url.includes("danger-zone");
diff --git a/apps/web/app/(main)/projects/[id]/settings/page.tsx b/apps/web/app/(main)/projects/[id]/settings/page.tsx
@@ -29,9 +29,12 @@ import { Textarea } from "@/components/ui/textarea";
 import { api } from "@repo/backend/convex/_generated/api";
 import { PROJECTS_STAGES } from "@/lib/constants";
 import useApiMutation from "@/lib/hooks/use-api-mutation";
-import type { PagePropsWithProjectId } from "@/lib/types";
+import type { ProjectId } from "@/lib/types";
+import { useParams } from "next/navigation";
 
-const ProjectSettingsPage = ({ params: { id } }: PagePropsWithProjectId) => {
+const ProjectSettingsPage = () => {
+
+  const { id } = useParams<ProjectId>()
   const project = useQuery(api.project.get, { id });
 
   const { mutate: updateProject, isPending } = useApiMutation(
diff --git a/apps/web/app/(main)/projects/[id]/work-items/page.tsx b/apps/web/app/(main)/projects/[id]/work-items/page.tsx
@@ -5,10 +5,13 @@ import { columns } from "@/components/work-items/columns";
 import { DataTable } from "@/components/work-items/data-table";
 import { api } from "@repo/backend/convex/_generated/api";
 import { useTaskModal } from "@/lib/store/use-task-modal";
-import type { PagePropsWithProjectId } from "@/lib/types";
+import type { ProjectId } from "@/lib/types";
 import { useQuery } from "convex/react";
+import { useParams } from "next/navigation";
+
+const WorkItemsPage = () => {
+  const { id } = useParams<ProjectId>()
 
-const WorkItemsPage = ({ params: { id } }: PagePropsWithProjectId) => {
   const tasks = useQuery(api.work_item.list, { projectId: id });
 
   const { onOpen } = useTaskModal();
diff --git a/apps/web/app/changelog/[id]/page.tsx b/apps/web/app/changelog/[id]/page.tsx
@@ -2,11 +2,16 @@
 
 import MDXEditor from "@/components/md/mdx-editor";
 import { api } from "@repo/backend/convex/_generated/api";
-import { PagePropsWithProjectId } from "@/lib/types";
+import { ProjectId } from "@/lib/types";
 import { useQuery } from "convex/react";
 import { format } from "date-fns";
+import { useParams } from "next/navigation";
+
+const ChangeLogPreviewPage = () => {
+
+  const { id } = useParams<ProjectId>()
+
 
-const ChangeLogPreviewPage = ({ params: { id } }: PagePropsWithProjectId) => {
   const projectDetails = useQuery(api.project.get, { id });
 
   const changelogs = useQuery(api.changelog.list, {
diff --git a/apps/web/lib/types.ts b/apps/web/lib/types.ts
@@ -6,7 +6,7 @@ export type ProjectId = {
 };
 
 export type PagePropsWithProjectId = {
-  params: ProjectId;
+  params: Promise<ProjectId>;
 };
 
 export type OptionalProperty<T, K extends keyof T> = Omit<T, K> & {
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
@@ -1,6 +1,124 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import {
+  BookOpenText,
+  FileBox,
+  Layout,
+  ListTodo,
+  MessageCircleReply,
+  MessageSquareText,
+  Settings,
+} from "lucide-react";
+import { Metadata } from "next";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+type MetaTagProps = {
+  title?: string;
+  description?: string;
+  SITE_URL?: string;
+  keywords?: string[];
+};
+
+export function constructMetaTags({
+  SITE_URL = "https://projectify.vigneshgupta.tech/",
+  description = "Struggling to stay organized and meet deadlines? Projectify is the ultimate free project management tool for you!  Boost your productivity and achieve your goals effortlessly with our intuitive features.  Manage tasks, deadlines, resources, and collaborate seamlessly with your team.  Sign up today and experience the difference!",
+  title = "Projectify - Manage your projects effortlessly!",
+  keywords = [],
+}: MetaTagProps): Metadata {
+  return {
+    title,
+    description,
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      creator: "@VighneshGupta9",
+      images: {
+        url: "/thumbnail.png",
+        width: "100%",
+        height: "auto",
+        alt: title,
+      },
+    },
+    openGraph: {
+      title,
+      description,
+      images: {
+        url: "/thumbnail.png",
+        alt: title,
+      },
+      type: "website",
+      url: SITE_URL,
+    },
+    metadataBase: new URL(SITE_URL),
+    authors: {
+      name: "Vighnesh Gupta",
+      url: new URL("https://vigneshgupta.tech/"),
+    },
+    creator: "Vighnesh Gupta",
+    keywords: [
+      "nextjs",
+      "frontend",
+      "starter",
+      "vignesh",
+      "react",
+      "vercel",
+      "shadcn",
+      "clerk",
+      ...keywords,
+    ],
+  };
+}
+
+export const getNavLinks = (id: string) => {
+  return [
+    {
+      name: "Dashboard",
+      href: `/projects/${id}/dashboard`,
+      Icon: Layout,
+    },
+    {
+      name: "Work Items",
+      href: `/projects/${id}/work-items`,
+      Icon: ListTodo,
+    },
+    {
+      name: "Resources",
+      href: `/projects/${id}/resources`,
+      Icon: FileBox,
+    },
+    {
+      name: "Feedbacks",
+      href: `/projects/${id}/feedbacks`,
+      Icon: MessageCircleReply,
+    },
+    {
+      name: "Changelog",
+      href: `/projects/${id}/changelogs`,
+      Icon: BookOpenText,
+    },
+    {
+      name: "Messages",
+      href: `/projects/${id}/messages`,
+      Icon: MessageSquareText,
+    },
+    {
+      name: "Settings",
+      href: `/projects/${id}/settings`,
+      Icon: Settings,
+    },
+  ];
+};
+
+export function generateAPIKey(length: number): string {
+  const charset =
+    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  let key = "pk_live_";
+  for (let i = 0; i < length; i++) {
+    key += charset.charAt(Math.floor(Math.random() * charset.length));
+  }
+  return key;
+}
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
diff --git a/packages/backend/convex/_generated/api.d.ts b/packages/backend/convex/_generated/api.d.ts
diff --git a/packages/backend/convex/_generated/api.js b/packages/backend/convex/_generated/api.js
diff --git a/packages/backend/convex/_generated/dataModel.d.ts b/packages/backend/convex/_generated/dataModel.d.ts
diff --git a/packages/backend/convex/_generated/server.d.ts b/packages/backend/convex/_generated/server.d.ts
diff --git a/packages/backend/convex/_generated/server.js b/packages/backend/convex/_generated/server.js
