Digest preview

src/app/(routes)/[teamSlug]/[digestSlug]/preview/page.tsx

@@ -0,0 +1,40 @@
+import { getPublicDigest, getUserTeams } from '@/lib/queries';
+import { redirect } from 'next/navigation';
+import { getSession } from '@/lib/sessions';
+import DigestPublicPage from '@/components/pages/DigestPublicPage';
+
+interface PageProps {
+  params: { teamSlug: string; digestSlug: string };
+}
+
+const PreviewDigestPage = async ({ params }: PageProps) => {
+  const session = await getSession();
+  const teams = await getUserTeams(session?.user.id);
+
+  if (!teams?.find((team) => team?.slug === params.teamSlug)) {
+    redirect('/');
+  }
+
+  const digest = await getPublicDigest(
+    params.digestSlug,
+    params.teamSlug,
+    true
+  );
+
+  if (!digest) {
+    redirect('/');
+  }
+
+  return (
+    <>
+      <div className="flex justify-center">
+        <span className="bg-purple-100 text-purple-800 text-lg font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">
+          {params.digestSlug.toUpperCase()} - DIGEST PREVIEW
+        </span>
+      </div>
+      <DigestPublicPage digest={digest} />
+    </>
+  );
+};
+
+export default PreviewDigestPage;

src/components/digests/PublicDigestList.tsx

@@ -34,14 +34,15 @@ export default function PublicDigestList({ digest }: Props) {
         <div className="flex flex-col items-start md:items-center justify-center align-middle mt-2 md:mt-0">
           <div className="flex items-center gap-0">
             <span className="text-4xl md:text-5xl font-bold pr-2">
-              {format(digest.publishedAt!, 'dd')}
+              {digest.publishedAt && format(digest.publishedAt!, 'dd')}
             </span>
             <div className="font-semibold text-sm md:text-base">
               <span className="text-red-600 block whitespace-nowrap leading-none">
-                {format(digest.publishedAt!, 'EEEE')}
+                {digest?.publishedAt && format(digest.publishedAt!, 'EEEE')}
               </span>
               <span className="whitespace-nowrap leading-none">
-                {format(digest.publishedAt!, 'MMMM, yyyy')}
+                {digest?.publishedAt &&
+                  format(digest.publishedAt!, 'MMMM, yyyy')}
               </span>
             </div>
           </div>

src/components/pages/DigestEditPage.tsx

@@ -7,12 +7,7 @@ import useTransitionRefresh from '@/hooks/useTransitionRefresh';
 import api from '@/lib/api';
 
 import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
-import {
-  TeamLinks,
-  TeamLinksData,
-  getDigest,
-  getTeamBySlug,
-} from '@/lib/queries';
+import { TeamLinksData, getDigest, getTeamBySlug } from '@/lib/queries';
 import { ApiDigestResponseSuccess } from '@/pages/api/teams/[teamId]/digests';
 import { reorderList } from '@/utils/actionOnList';
 import { getRelativeDate } from '@/utils/date';
@@ -42,6 +37,7 @@ import { Breadcrumb } from '../teams/Breadcrumb';
 import DigestEditVisit from './DigestEditVisit';
 import DigestEditTypefully from './DigestEditTypefully';
 import DigestEditSendNewsletter from './DigestEditSendNewsletter';
+import { EyeIcon } from '@heroicons/react/24/solid';
 
 type Props = {
   teamLinksData: TeamLinksData;
@@ -235,6 +231,21 @@ export const DigestEditPage = ({
               >
                 {!!digest?.publishedAt ? 'Unpublished' : 'Publish'}
               </Button>
+
+              {!digest?.publishedAt && (
+                <Button
+                  className="flex-1"
+                  aria-label="Preview digest"
+                  variant="default"
+                  icon={<EyeIcon />}
+                  disabled={isPublishing || isRefreshing || isDeleting}
+                  onClick={() => {
+                    push(`/${team.slug}/${digest?.slug}/preview`);
+                  }}
+                >
+                  Preview
+                </Button>
+              )}
               <DeletePopover
                 handleDelete={deleteDigest}
                 isLoading={isDeleting}

src/lib/queries.ts

@@ -8,18 +8,21 @@ export const getUserById = (userId: string) =>
     },
   });
 
-export const getUserTeams = (userId: string) =>
-  db.team.findMany({
-    where: {
-      memberships: {
-        some: {
-          user: {
-            id: userId,
+export const getUserTeams = (userId?: string) => {
+  if (userId)
+    return db.team.findMany({
+      where: {
+        memberships: {
+          some: {
+            user: {
+              id: userId,
+            },
           },
         },
       },
-    },
-  });
+    });
+  return [];
+};
 
 export const getUserInvitations = (email: string) =>
   db.invitation.findMany({
@@ -350,56 +353,57 @@ export const getPublicTeam = cache((slug: string) =>
   })
 );
 
-export const getPublicDigest = cache((digestSlug: string, teamSlug: string) =>
-  db.digest.findFirst({
-    select: {
-      publishedAt: true,
-      title: true,
-      description: true,
-      team: {
-        select: {
-          id: true,
-          slug: true,
-          name: true,
-          bio: true,
-          website: true,
-          github: true,
-          twitter: true,
+export const getPublicDigest = cache(
+  (digestSlug: string, teamSlug: string, isPreview?: boolean) =>
+    db.digest.findFirst({
+      select: {
+        publishedAt: true,
+        title: true,
+        description: true,
+        team: {
+          select: {
+            id: true,
+            slug: true,
+            name: true,
+            bio: true,
+            website: true,
+            github: true,
+            twitter: true,
+          },
         },
-      },
-      digestBlocks: {
-        select: {
-          id: true,
-          order: true,
-          title: true,
-          style: true,
-          bookmarkId: true,
-          description: true,
-          text: true,
-          type: true,
-          bookmark: {
-            include: {
-              link: {
-                select: {
-                  url: true,
-                  description: true,
-                  image: true,
-                  title: true,
-                  blurHash: true,
+        digestBlocks: {
+          select: {
+            id: true,
+            order: true,
+            title: true,
+            style: true,
+            bookmarkId: true,
+            description: true,
+            text: true,
+            type: true,
+            bookmark: {
+              include: {
+                link: {
+                  select: {
+                    url: true,
+                    description: true,
+                    image: true,
+                    title: true,
+                    blurHash: true,
+                  },
                 },
               },
             },
           },
+          orderBy: { order: 'asc' },
         },
-        orderBy: { order: 'asc' },
       },
-    },
-    where: {
-      slug: digestSlug,
-      team: { slug: teamSlug },
-      publishedAt: { lte: new Date() },
-    },
-  })
+      where: {
+        slug: digestSlug,
+        team: { slug: teamSlug },
+        ...(!isPreview ? { publishedAt: { lte: new Date() } } : {}),
+      },
+    })
 );
 
 export const getDigestDataForTypefully = async (