fix:use next js 15

Ikuzweshema · Dec 9, 2024 · 3e732a7 · 3e732a7
1 parent f449384
commit 3e732a7
Show file tree

Hide file tree

Showing 57 changed files with 2,517 additions and 2,631 deletions.
diff --git a/app/auth.ts b/app/auth.ts
@@ -1,13 +1,13 @@
 import NextAuth from "next-auth";
 import Credentials from "next-auth/providers/credentials";
 import Google from "next-auth/providers/google";
-import { getUserByCredentials } from "@/lib/actions";
+import { getUserByCredentials } from "@/lib/actions/actions";
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import { prisma } from "@/lib/db";
 import Github from "next-auth/providers/github";
 import { loginSchema } from "@/lib/types";
 import SendGrid from "next-auth/providers/sendgrid";
-import sendSignInVerification from "@/mail/send/sign-in";
+import { sendSignInVerification } from "@/mail/send/sign-in";
 export const { signOut, signIn, auth, handlers } = NextAuth({
   adapter: PrismaAdapter(prisma),
   providers: [

diff --git a/app/auth/[token]/verify/page.tsx b/app/auth/[token]/verify/page.tsx
@@ -6,7 +6,8 @@ import { verifyToken } from "@/lib/actions";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import ResendForm from "@/components/auth/resend-form";
-export default async function Page({ params }: { params: { token: string } }) {
+export default async function Page(props: { params: Promise<{ token: string }> }) {
+  const params = await props.params;
   const { token } = params;
   const status = await verifyToken(token);
   return (

diff --git a/app/auth/error.tsx b/app/auth/error.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Image from "next/image";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -14,31 +13,33 @@ export default function Error({
   reset: () => void;
 }) {
   return (
-    <Card className="mx-auto w-[45vw]  mt-24">
-      <CardHeader>
-        <CardTitle className="text-2xl flex justify-center">
-          <Image src={"/logo.png"} height={125} width={125} alt="logo" />
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          <div className="grid gap-2">
-            <Alert variant={"destructive"}>
-              <AlertTitle className={"rounded-md flex justify-center"}>
-                <ShieldAlert size={60} />
-              </AlertTitle>
-              <AlertDescription className={"mt-3 flex justify-center"}>
-                <span className={"text-md"}>
-                  {error?.message || "something went wrong"}
-                </span>
-              </AlertDescription>
-            </Alert>
-            <Button onClick={() => reset()} variant={"outline"}>
-              Retry
-            </Button>
+    <div className="w-full h-screen flex justify-center items-center">
+      <Card className="mx-auto w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl flex justify-center">
+            <Image src={"/logo.png"} height={125} width={125} alt="logo" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <Alert variant={"destructive"}>
+                <AlertTitle className={"rounded-md flex justify-center"}>
+                  <ShieldAlert size={60} />
+                </AlertTitle>
+                <AlertDescription className={"mt-3 flex justify-center"}>
+                  <span className={"text-md"}>
+                    {error?.message || "something went wrong"}
+                  </span>
+                </AlertDescription>
+              </Alert>
+              <Button onClick={() => reset()} variant={"outline"}>
+                Retry
+              </Button>
+            </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </div>
   );
 }
diff --git a/app/auth/error/page.tsx b/app/auth/error/page.tsx
@@ -1,43 +1,45 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Image from "next/image";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ShieldAlert } from "lucide-react";
+import { TriangleAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: { error: string };
+
+export default async function Page(props: {
+  searchParams: Promise<{ error: string }>;
 }) {
+  const searchParams = await props.searchParams;
   const { error } = searchParams;
   return (
-    <Card className="mx-auto w-[45vw]  mt-24">
-      <CardHeader>
-        <CardTitle className="text-2xl flex justify-center">
-          <Image src={"/logo.png"} height={125} width={125} alt="logo" />
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <div className="grid gap-4">
-            <div className="grid gap-2">
-              <Alert variant={"destructive"}>
-                <AlertTitle className={"rounded-md flex justify-center"}>
-                  <ShieldAlert size={60} />
-                </AlertTitle>
-                <AlertDescription className={"mt-3 flex justify-center"}>
-                  <span className={"text-md"}>
-                    {error || "something went wrong"}
-                  </span>
-                </AlertDescription>
-              </Alert>
-              <Button asChild variant={"outline"}>
-                <Link href="/auth/login">Login Again</Link>
-              </Button>
+    <div className="h-screen w-full flex justify-center items-center">
+      <Card className="mx-auto w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl flex justify-center">
+            <Image src={"/logo.png"} height={125} width={125} alt="logo" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form >
+            <div className="grid gap-4">
+              <div className="grid gap-2">
+                <Alert variant={"destructive"}>
+                  <AlertTitle className={"rounded-md flex justify-center"}>
+                    <TriangleAlert size={60} />
+                  </AlertTitle>
+                  <AlertDescription className={"mt-3 flex justify-center"}>
+                    <span className={"text-md"}>
+                      {error || "something went wrong"}
+                    </span>
+                  </AlertDescription>
+                </Alert>
+                <Button asChild variant={"outline"}>
+                  <Link href="/auth/login">Login Again</Link>
+                </Button>
+              </div>
             </div>
-          </div>
-        </form>
-      </CardContent>
-    </Card>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
   );
 }
diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 export default function Page() {
   return (
-    <div className=" flex justify-center flex-col my-6 p-2">
+    <div className=" w-full h-screen items-center flex justify-center flex-col">
       <Suspense fallback={null}>
         <LoginForm />
       </Suspense>

diff --git a/app/auth/password/new/[token]/page.tsx b/app/auth/password/new/[token]/page.tsx
@@ -1,14 +1,19 @@
 import { NewPasswordFrom } from "@/components/auth/new-password-form";
-
 import { Metadata } from "next";
+
 export const metadata: Metadata = {
-    title: "New Password",
-    description: "Reset Password Page - Next Auth Example"
-}
-export default function Page({ params }: { params: { token: string } }) {
-    const { token } = params
+  title: "New Password",
+  description: "Reset Password Page - Next Auth Example",
+};
+export default async function Page(props: {
+  params: Promise<{ token: string }>;
+}) {
+  const params = await props.params;
+  const { token } = params;
 
-    return (<div className=" flex justify-center flex-col mt-20">
-        <NewPasswordFrom token={token} />
-    </div>)
+  return (
+    <div className=" flex h-screen justify-center flex-col w-full items-center">
+      <NewPasswordFrom token={token} />
+    </div>
+  );
 }
diff --git a/app/auth/password/reset/page.tsx b/app/auth/password/reset/page.tsx
@@ -2,13 +2,14 @@ import { ResetPasswordFrom } from "@/components/auth/reset-password-form";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-    title: "Reset Password",
-    description: "Reset Password Page - Next Auth Example"
-}
+  title: "Reset Password",
+  description: "Reset Password Page - Next Auth Example",
+};
 
 export default async function Page() {
-
-    return <div className=" flex justify-center flex-col mt-20">
-        <ResetPasswordFrom />
+  return (
+    <div className="w-full flex justify-center flex-col  h-screen items-center">
+      <ResetPasswordFrom />
     </div>
-}
+  );
+}
diff --git a/app/auth/register/page.tsx b/app/auth/register/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 };
 export default function Page() {
   return (
-    <div className=" flex justify-center flex-col  my-6 p-2">
+    <div className=" flex justify-center flex-col  h-screen items-center">
       <RegisterForm />
     </div>
   );

diff --git a/app/auth/verify/request/page.tsx b/app/auth/verify/request/page.tsx
@@ -12,7 +12,8 @@ export const metadata: Metadata = {
 };
 export default function Page() {
   return (
-    <Card className="mx-auto w-[35vw] mt-24">
+    <div className="w-full h-screen flex justify-center items-center">
+    <Card className="mx-auto w-full max-w-md rounded-md">
       <CardHeader>
         <CardTitle className="text-2xl flex justify-center">
           <Image src="/logo.png" height={125} width={125} alt="logo" />
@@ -43,5 +44,7 @@ export default function Page() {
         </div>
       </CardContent>
     </Card>
+    </div>
+
   );
 }
diff --git a/app/dashboard/error.tsx b/app/dashboard/error.tsx
@@ -1,6 +1,6 @@
-"use client"
+"use client";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ShieldAlert } from "lucide-react";
+import {  TriangleAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 export default function Error({
@@ -11,25 +11,24 @@ export default function Error({
   reset: () => void;
 }) {
   return (
-    <div className={"flex justify-center mt-20" }>
-
-        <div className="flex flex-col w-[42vw] gap-4">
-          <div className="flex flex-col gap-2">
-            <Alert variant={"destructive"}>
-              <AlertTitle className={"rounded-md flex justify-center"}>
-                <ShieldAlert size={60} />
-              </AlertTitle>
-              <AlertDescription className={"mt-3 flex justify-center"}>
-                <span className={"text-md"}>
-                  {error?.message || "something went wrong"}
-                </span>
-              </AlertDescription>
-            </Alert>
-            <Button onClick={() => reset()} variant={"outline"}>
-              Retry
-            </Button>
-          </div>
+    <div className={"flex justify-center mt-20"}>
+      <div className="flex flex-col w-[42vw] gap-4">
+        <div className="flex flex-col gap-2">
+          <Alert variant={"destructive"}>
+            <AlertTitle className={"rounded-md flex justify-center"}>
+              <TriangleAlert size={60} />
+            </AlertTitle>
+            <AlertDescription className={"mt-3 flex justify-center"}>
+              <span className={"text-md"}>
+                {error?.message || "something went wrong"}
+              </span>
+            </AlertDescription>
+          </Alert>
+          <Button onClick={() => reset()} variant={"outline"}>
+            Retry
+          </Button>
         </div>
+      </div>
     </div>
   );
 }
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -8,13 +8,15 @@ export const metadata: Metadata = {
 };
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen w-full flex-col bg-muted/40 p-2">
-      <Navbar />
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6 justify-end">
+    <div className="flex min-h-screen w-full  bg-muted/40 p-2">
+      <div className="w-1/4">
+        <Navbar />
+      </div>
+      <div className="flex-grow   sm:gap-4 sm:py-4 sm:pl-14">
+        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-card px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6 justify-end">
           <User />
         </header>
-        <main className="flex flex-col ">{children}</main>
+        <main className="flex flex-col w-full ">{children}</main>
       </div>
     </div>
   );

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -1,15 +1,17 @@
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {auth} from "@/app/auth";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { auth } from "@/app/auth";
 export default async function Page() {
-    const  session=await auth()
-    return <div className={" mt-10 flex  justify-center"}>
-        <Card className={ "w-[43vw] flex-col"}>
-            <CardHeader>
-                <CardTitle className={"flex justify-center"}>Your Session</CardTitle>
-            </CardHeader>
-            <CardContent>
-               <pre>{JSON.stringify(session,null,2)}</pre>
-            </CardContent>
-        </Card>
+  const session = await auth();
+  return (
+    <div className={" mt-10 flex  justify-center"}>
+      <Card className={"w-full max-w-xl flex-col"}>
+        <CardHeader>
+          <CardTitle className={"flex justify-center"}>Your Session</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <pre >{JSON.stringify(session, null, 2)}</pre>
+        </CardContent>
+      </Card>
     </div>
-}
+  );
+}
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
@@ -4,12 +4,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Suspense } from "react";
 export default function Page() {
   return (
-    <div className={" mt-10 flex  justify-center"}>
-      <Card className={"w-[43vw] flex-col"}>
+    <div className={"flex-col justify-center items-center"}>
+      <Card className={"w-full flex-col max-w-2xl rounded-md"}>
         <CardHeader>
           <CardTitle className={"flex justify-center"}>Settings</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="w-full">
           <Suspense fallback={<SettingsSkeleton />}>
             <Settings />
           </Suspense>

diff --git a/app/dashboard/settings/settings.tsx b/app/dashboard/settings/settings.tsx
@@ -1,7 +1,7 @@
 import { auth } from "@/app/auth";
 import SettingsForm from "@/components/settings";
 import { type Session } from "next-auth";
-import { getUserById } from "@/lib/actions";
+import { getUserById } from "@/lib/actions/actions";
 import { notFound } from "next/navigation";
 
 export default async function Session() {