chore: upgrade to next admin 5.0

package.json

@@ -27,7 +27,7 @@
     "@heroicons/react": "^2.0.16",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@postlight/parser": "^2.2.3",
-    "@premieroctet/next-admin": "^3.4.0",
+    "@premieroctet/next-admin": "^5.0.0",
     "@prisma/client": "^4.11.0",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-navigation-menu": "^1.1.2",
@@ -73,7 +73,7 @@
     "openai": "^4.10.0",
     "plaiceholder": "^2.5.0",
     "prisma": "^4.11.0",
-    "prisma-json-schema-generator": "^3.1.3",
+    "prisma-json-schema-generator": "^5.1.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-colorful": "^5.6.1",

src/app/(admin)/admin/[[...nextadmin]]/page.tsx

@@ -1,4 +1,4 @@
-import { deleteItem, submitFormAction } from '@/actions/nextadmin';
+import schema from '@/../prisma/json-schema/json-schema.json';
 import Dashboard, { DashboardProps } from '@/components/admin/Dashboard';
 import {
   linksByDay,
@@ -8,64 +8,60 @@ import {
 } from '@/lib/adminQueries';
 import client from '@/lib/db';
 import { authOptions } from '@/pages/api/auth/[...nextauth]';
-import '@/theme/admin.css';
 import { options } from '@/utils/nextadmin';
-import { NextAdmin } from '@premieroctet/next-admin';
-import { getPropsFromParams } from '@premieroctet/next-admin/dist/appRouter';
-import '@premieroctet/next-admin/dist/styles.css';
+import { NextAdmin, PageProps } from '@premieroctet/next-admin';
+import { getNextAdminProps } from '@premieroctet/next-admin/dist/appRouter';
 import { getServerSession } from 'next-auth';
 import { redirect } from 'next/navigation';
-import schema from '../../../../../prisma/json-schema/json-schema.json';
 
-
-export default async function AdminPage({
-  params,
-  searchParams,
-}: {
-  params: { [key: string]: string[] };
-  searchParams: { [key: string]: string | string[] | undefined } | undefined;
-}) {
+export default async function AdminPage({ params, searchParams }: PageProps) {
   const session = await getServerSession(authOptions);
   const isAdmin = session?.user?.role === 'SUPERADMIN';
 
   if (!isAdmin) {
     redirect('/');
   }
 
-  const props = await getPropsFromParams({
-    params: params.nextadmin,
+  const props = await getNextAdminProps({
+    basePath: '/admin',
+    apiBasePath: '/api/admin',
+    params: params.nextadmin as string[],
     searchParams,
-    options: options,
+    options,
     prisma: client,
     schema,
-    action: submitFormAction,
-    deleteAction: deleteItem
   });
 
   const dashboardProps: DashboardProps | undefined = !params.nextadmin
     ? {
-      newUsersByMonth: await newUsersByMonth(),
-      newDigestByMonth: await newDigestByMonth(),
-      linksByDomain: await linksByDomain(),
-      linksByDay: await linksByDay(),
-      linksCount: await client.link.count(),
-      latestDigest: await client.digest.findFirst({
-        where: { publishedAt: { not: null } },
-        orderBy: { createdAt: 'desc' },
-        include: {
-          team: true,
-        },
-      }),
-      latestTeam: await client.team.findFirst({
-        orderBy: { createdAt: 'desc' },
-      }),
-    }
+        newUsersByMonth: await newUsersByMonth(),
+        newDigestByMonth: await newDigestByMonth(),
+        linksByDomain: await linksByDomain(),
+        linksByDay: await linksByDay(),
+        linksCount: await client.link.count(),
+        latestDigest: await client.digest.findFirst({
+          where: { publishedAt: { not: null } },
+          orderBy: { createdAt: 'desc' },
+          include: {
+            team: true,
+          },
+        }),
+        latestTeam: await client.team.findFirst({
+          orderBy: { createdAt: 'desc' },
+        }),
+      }
     : undefined;
 
   return (
     <NextAdmin
       {...props}
       dashboard={dashboardProps && <Dashboard {...dashboardProps} />}
+      user={{
+        data: {
+          name: session!.user!.email!,
+        },
+        logout: '/logout',
+      }}
     />
   );
 }

src/app/(admin)/api/admin/[[...nextadmin]]/route.ts

@@ -0,0 +1,25 @@
+import schema from '@/../prisma/json-schema/json-schema.json';
+import client from '@/lib/db';
+import { authOptions } from '@/pages/api/auth/[...nextauth]';
+import { options } from '@/utils/nextadmin';
+import { createHandler } from '@premieroctet/next-admin/dist/appHandler';
+import { getServerSession } from 'next-auth';
+import { NextRequest, NextResponse } from 'next/server';
+
+const { run } = createHandler({
+  apiBasePath: '/api/admin',
+  prisma: client,
+  schema,
+  options,
+  onRequest: async (req: NextRequest) => {
+    const session = await getServerSession(authOptions);
+    const isAdmin = session?.user?.role === 'SUPERADMIN';
+
+    if (!isAdmin) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+  }
+});
+
+
+export { run as DELETE, run as GET, run as POST };

src/app/(admin)/layout.tsx

@@ -1,5 +1,6 @@
 import { getEnvHost } from '@/lib/server';
 import { Metadata } from 'next';
+import '@/theme/admin.css';
 
 export const dynamic = 'force-dynamic';
 
@@ -44,7 +45,7 @@ export const metadata: Metadata = {
 export default async function RootLayout({ children }: Props) {
   return (
     <html lang="en">
-      <body className="flex flex-col font-sans overflow-x-hidden bg-white">
+      <body className="flex flex-col overflow-x-hidden  bg-nextadmin-background-default dark:bg-dark-nextadmin-background-default">
         {children}
       </body>
     </html>

src/app/(app)/logout/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { signOut } from 'next-auth/react';
+import { useEffect } from 'react';
+
+export default function Logout() {
+  useEffect(() => {
+    signOut({ callbackUrl: '/' });
+  }, []);
+
+  return null;
+}

src/components/admin/Dashboard.tsx

@@ -1,10 +1,14 @@
-import { linksByDay, linksByDomain, newDigestByMonth, newUsersByMonth } from "@/lib/adminQueries";
-import { Digest, Team } from "@prisma/client";
-import { Card, Col, Grid, Metric, Text } from "@tremor/react";
-import DataOverTime from "./widgets/DataOverTime";
-import LinksByWebsite from "./widgets/LinksByWebsite";
-import LinksOverTime from "./widgets/LinksOverTime";
-
+import {
+  linksByDay,
+  linksByDomain,
+  newDigestByMonth,
+  newUsersByMonth,
+} from '@/lib/adminQueries';
+import { Digest, Team } from '@prisma/client';
+import { Card, Col, Grid, Metric, Text } from '@tremor/react';
+import DataOverTime from './widgets/DataOverTime';
+import LinksByWebsite from './widgets/LinksByWebsite';
+import LinksOverTime from './widgets/LinksOverTime';
 
 export type DashboardProps = {
   newUsersByMonth: Awaited<ReturnType<typeof newUsersByMonth>>;
@@ -18,7 +22,7 @@ export type DashboardProps = {
 
 const Dashboard = (dashboardProps: DashboardProps) => {
   return (
-    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2 p-4">
       <Col numColSpan={1} numColSpanLg={2}>
         <DataOverTime
           data={{
@@ -59,7 +63,7 @@ const Dashboard = (dashboardProps: DashboardProps) => {
         <LinksOverTime data={{ linksByDay: dashboardProps.linksByDay }} />
       </Col>
     </Grid>
-  )
-}
+  );
+};
 
-export default Dashboard
+export default Dashboard;

src/theme/admin.css

@@ -1,4 +1,4 @@
-@config "./../../tailwind.admin.config.js";
+@config "../../tailwind.admin.config.js";
 
 @tailwind base;
 @tailwind components;