upgrade to next 15 (#151)

apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "@unsend/ui/src/spinner";
 import { Button } from "@unsend/ui/src/button";
 import { Input } from "@unsend/ui/src/input";
 import { Editor } from "@unsend/email-editor";
-import { useState } from "react";
+import { use, useState } from "react";
 import { Campaign } from "@prisma/client";
 import {
   Select,
@@ -51,16 +51,18 @@ const IMAGE_SIZE_LIMIT = 10 * 1024 * 1024;
 export default function EditCampaignPage({
   params,
 }: {
-  params: { campaignId: string };
+  params: Promise<{ campaignId: string }>;
 }) {
+  const { campaignId } = use(params);
+
   const {
     data: campaign,
     isLoading,
     error,
   } = api.campaign.getCampaign.useQuery(
-    { campaignId: params.campaignId },
+    { campaignId },
     {
-      enabled: !!params.campaignId,
+      enabled: !!campaignId,
     }
   );
 

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -12,16 +12,17 @@ import Link from "next/link";
 
 import Spinner from "@unsend/ui/src/spinner";
 import { api } from "~/trpc/react";
-import { Separator } from "@unsend/ui/src/separator";
-import { ExternalLinkIcon } from "lucide-react";
+import { use } from "react";
 
 export default function CampaignDetailsPage({
   params,
 }: {
-  params: { campaignId: string };
+  params: Promise<{ campaignId: string }>;
 }) {
+  const { campaignId } = use(params);
+
   const { data: campaign, isLoading } = api.campaign.getCampaign.useQuery({
-    campaignId: params.campaignId,
+    campaignId: campaignId,
   });
 
   if (isLoading) {

apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx

@@ -22,16 +22,18 @@ import {
 } from "@unsend/ui/src/popover";
 import { Button } from "@unsend/ui/src/button";
 import { useTheme } from "@unsend/ui";
+import { use } from "react";
 
 export default function ContactsPage({
   params,
 }: {
-  params: { contactBookId: string };
+  params: Promise<{ contactBookId: string }>;
 }) {
+  const { contactBookId } = use(params);
   const { theme } = useTheme();
 
   const contactBookDetailQuery = api.contacts.getContactBookDetails.useQuery({
-    contactBookId: params.contactBookId,
+    contactBookId: contactBookId,
   });
 
   const utils = api.useUtils();
@@ -41,7 +43,7 @@ export default function ContactsPage({
       await utils.contacts.getContactBookDetails.cancel();
       utils.contacts.getContactBookDetails.setData(
         {
-          contactBookId: params.contactBookId,
+          contactBookId: contactBookId,
         },
         (old) => {
           if (!old) return old;
@@ -54,7 +56,7 @@ export default function ContactsPage({
     },
     onSettled: () => {
       utils.contacts.getContactBookDetails.invalidate({
-        contactBookId: params.contactBookId,
+        contactBookId: contactBookId,
       });
     },
   });
@@ -93,7 +95,7 @@ export default function ContactsPage({
                               // Handle emoji selection here
                               // You might want to update the contactBook's emoji
                               updateContactBookMutation.mutate({
-                                contactBookId: params.contactBookId,
+                                contactBookId: contactBookId,
                                 emoji: emojiObject.emoji,
                               });
                             }}
@@ -118,7 +120,7 @@ export default function ContactsPage({
           </Breadcrumb>
         </div>
         <div className="flex gap-4">
-          <AddContact contactBookId={params.contactBookId} />
+          <AddContact contactBookId={contactBookId} />
         </div>
       </div>
       <div className="mt-16">
@@ -153,7 +155,7 @@ export default function ContactsPage({
                 Contact book ID
               </div>
               <TextWithCopyButton
-                value={params.contactBookId}
+                value={contactBookId}
                 alwaysShowCopy
                 className="text-sm w-[130px] overflow-hidden text-ellipsis font-mono"
               />
@@ -194,7 +196,7 @@ export default function ContactsPage({
           </div>
         </div>
         <div className="mt-16">
-          <ContactList contactBookId={params.contactBookId} />
+          <ContactList contactBookId={contactBookId} />
         </div>
       </div>
     </div>

apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx

@@ -34,6 +34,7 @@ export default function ContactBooksList() {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 ">
         {contactBooksQuery.data?.map((contactBook) => (
           <motion.div
+            key={contactBook.id}
             whileHover={{ scale: 1.02 }}
             transition={{ type: "spring", stiffness: 200, damping: 10 }}
             whileTap={{ scale: 0.99 }}

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -20,7 +20,7 @@ import {
   TableRow,
 } from "@unsend/ui/src/table";
 import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
-import React from "react";
+import React, { use } from "react";
 import { Switch } from "@unsend/ui/src/switch";
 import DeleteDomain from "./delete-domain";
 import SendTestMail from "./send-test-mail";
@@ -31,11 +31,13 @@ import { toast } from "@unsend/ui/src/toaster";
 export default function DomainItemPage({
   params,
 }: {
-  params: { domainId: string };
+  params: Promise<{ domainId: string }>;
 }) {
+  const { domainId } = use(params);
+
   const domainQuery = api.domain.getDomain.useQuery(
     {
-      id: Number(params.domainId),
+      id: Number(domainId),
     },
     {
       refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
@@ -47,7 +49,7 @@ export default function DomainItemPage({
 
   const handleVerify = () => {
     verifyQuery.mutate(
-      { id: Number(params.domainId) },
+      { id: Number(domainId) },
       {
         onSettled: () => {
           domainQuery.refetch();

apps/web/src/app/(dashboard)/emails/email-list.tsx

@@ -41,6 +41,7 @@ import { Input } from "@unsend/ui/src/input";
 import { DEFAULT_QUERY_LIMIT } from "~/lib/constants";
 import { useDebouncedCallback } from "use-debounce";
 import { useState } from "react";
+import { SheetTitle, SheetDescription } from "@unsend/ui/src/sheet";
 
 /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */
 const DynamicSheetWithNoSSR = dynamic(
@@ -122,7 +123,7 @@ export default function EmailsList() {
               <SelectItem value="All ApiKey">All ApiKey</SelectItem>
               {apiKeysQuery &&
                 apiKeysQuery.map((apikey) => (
-                  <SelectItem value={apikey.id.toString()}>
+                  <SelectItem key={apikey.id} value={apikey.id.toString()}>
                     {apikey.name}
                   </SelectItem>
                 ))}
@@ -143,7 +144,7 @@ export default function EmailsList() {
               </SelectItem>
               {domainsQuery &&
                 domainsQuery.map((domain) => (
-                  <SelectItem value={domain.id.toString()}>
+                  <SelectItem key={domain.id} value={domain.id.toString()}>
                     {domain.name}
                   </SelectItem>
                 ))}
@@ -173,7 +174,7 @@ export default function EmailsList() {
                 "DELIVERY_DELAYED",
                 "COMPLAINED",
               ]).map((status) => (
-                <SelectItem value={status} className=" capitalize">
+                <SelectItem key={status} value={status} className=" capitalize">
                   {status.toLowerCase().replace("_", " ")}
                 </SelectItem>
               ))}
@@ -266,6 +267,10 @@ export default function EmailsList() {
           onOpenChange={handleSheetChange}
         >
           <DynamicSheetContentWithNoSSR className=" sm:max-w-3xl">
+            <SheetTitle className="sr-only">Email Details</SheetTitle>
+            <SheetDescription className="sr-only">
+              Detailed view of the selected email.
+            </SheetDescription>
             {selectedEmail ? <EmailDetails emailId={selectedEmail} /> : null}
           </DynamicSheetContentWithNoSSR>
         </DynamicSheetWithNoSSR>

apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx

@@ -11,22 +11,24 @@ import { useDebouncedCallback } from "use-debounce";
 import { formatDistanceToNow } from "date-fns";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
-
+import { use } from "react";
 const IMAGE_SIZE_LIMIT = 10 * 1024 * 1024;
 
 export default function EditTemplatePage({
   params,
 }: {
-  params: { templateId: string };
+  params: Promise<{ templateId: string }>;
 }) {
+  const { templateId } = use(params);
+
   const {
     data: template,
     isLoading,
     error,
   } = api.template.getTemplate.useQuery(
-    { templateId: params.templateId },
+    { templateId: templateId },
     {
-      enabled: !!params.templateId,
+      enabled: !!templateId,
     }
   );
 
@@ -75,7 +77,6 @@ function TemplateEditor({
   });
   const getUploadUrl = api.template.generateImagePresignedUrl.useMutation();
 
-
   function updateEditorContent() {
     updateTemplateMutation.mutate({
       templateId: template.id,
@@ -195,7 +196,6 @@ function TemplateEditor({
           </div>
         </div>
 
-
         <div className=" rounded-lg bg-gray-50 w-[700px] mx-auto p-10">
           <div className="w-[600px] mx-auto">
             <Editor