31 view post

app/(dashboard)/home/posts/[slug]/page.tsx

@@ -0,0 +1,13 @@
+import { getPost } from "@/utils/db";
+import PostFullView from "@/components/posts/PostFullView";
+
+interface PostPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function PostPage({ params }: PostPageProps) {
+  const { slug } = await params;
+  const { post, user } = await getPost(slug);
+
+  return <PostFullView post={post} user={user} />;
+}

app/types.d.ts

@@ -1,14 +0,0 @@
-interface User {
-  name?: string | null;
-  email?: string | null;
-  image?: string | null;
-}
-
-interface Post {
-  updatedAt: Date;
-  id: string;
-  title: string;
-  content: string;
-  createdAt: Date;
-  slug: string | null;
-}

components/app-sidebar.tsx

@@ -26,6 +26,7 @@ import {
 import { Switch } from "@/components/ui/switch";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { type User } from "@prisma/client";
 
 const data = {
   navMain: [
@@ -59,7 +60,9 @@ const data = {
 export function AppSidebar({
   user,
   ...props
-}: React.ComponentProps<typeof Sidebar> & { user: User }) {
+}: React.ComponentProps<typeof Sidebar> & {
+  user: Pick<User, "id" | "name" | "email" | "image">;
+}) {
   // TODO: use the url/router to set active item
   const router = useRouter();
   const [activeItem, setActiveItem] = React.useState(data.navMain[2]);

components/nav-user.tsx

@@ -20,13 +20,18 @@ import {
 } from "@/components/ui/sidebar";
 
 import { logOutUser } from "@/app/actions";
+import { type User } from "@prisma/client";
 
 function logUserOut(event: React.FormEvent<HTMLFormElement>) {
   event.preventDefault();
   logOutUser();
 }
 
-export function NavUser({ user }: { user: User }) {
+interface NavUserProps {
+  user: Pick<User, "id" | "name" | "email" | "image">;
+}
+
+export function NavUser({ user }: NavUserProps) {
   const { isMobile } = useSidebar();
 
   return (

components/posts/PostFullView.tsx

@@ -0,0 +1,74 @@
+import { formatDate } from "@/utils/posts";
+import { generateHTML } from "@tiptap/html";
+import StarterKit from "@tiptap/starter-kit";
+import { type User, type Post } from "@prisma/client";
+import Image from "next/image";
+import Link from "next/link";
+
+interface PostFullViewProps {
+  post: Omit<Post, "ownerId">;
+  user: Pick<User, "id" | "name" | "email" | "image">;
+  slug?: string;
+}
+
+export default function PostFullView({ post, user, slug }: PostFullViewProps) {
+  const formattedDate = formatDate(post.updatedAt);
+  const content = generateHTML(JSON.parse(post.content), [StarterKit]);
+
+  function Title({ slug }: { slug: PostFullViewProps["slug"] }) {
+    return (
+      <h3 className="mt-3 text-3xl/8 font-semibold text-gray-900">
+        {slug ? (
+          <Link
+            href={`/home/posts/${post.slug}`}
+            className="hover:text-gray-600"
+          >
+            <span className="absolute inset-0" />
+            {post.title}
+          </Link>
+        ) : (
+          post.title
+        )}
+      </h3>
+    );
+  }
+
+  return (
+    <article
+      key={post.id}
+      className="[&:not(:last-child)]:border-b-1 border-gray-200 py-10 px-4 xl:mr-5"
+    >
+      <time dateTime={formattedDate} className="text-gray-500 italic text-xs">
+        {formattedDate}
+      </time>
+      <div className="group relative">
+        <Title slug={slug} />
+        <div
+          className="mt-5 line-clamp-3 text-lg/6 text-gray-600"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      </div>
+      <div className="relative mt-8 flex items-center gap-x-4">
+        {user.image && (
+          <Image
+            alt=""
+            src={user.image}
+            className="size-10 rounded-full bg-gray-50"
+            width={40}
+            height={40}
+          />
+        )}
+        <div className="text-sm/6">
+          <p className="font-semibold text-gray-900">
+            <a href="#">
+              <span className="absolute inset-0" />
+              {user.name}
+            </a>
+          </p>
+          {/* TODO: update when introduce RBAC */}
+          {/* <p className="text-gray-600">Admin</p> */}
+        </div>
+      </div>
+    </article>
+  );
+}

components/posts/allUserPosts.tsx

@@ -1,65 +1,20 @@
-import { format } from "date-fns";
-import Image from "next/image";
-import { generateHTML } from "@tiptap/html";
-import StarterKit from "@tiptap/starter-kit";
+import { sortPostsByDateDesc } from "@/utils/posts";
+import PostFullView from "./PostFullView";
+import { type User, type Post } from "@prisma/client";
 
-export default function AllUserPosts({
-  user,
-  posts,
-}: {
-  posts: Post[];
-  user: User;
-}) {
-  const sortedPostsDesc = posts.sort((a, b) => {
-    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
-  });
-  return sortedPostsDesc.map((post) => {
-    const formattedDate = format(post.updatedAt, "dd MMM, yyyy");
-
-    const content = generateHTML(JSON.parse(post.content), [StarterKit]);
+interface AllUserPostsProps {
+  posts: Omit<Post, "ownerId">[];
+  user: Pick<User, "id" | "name" | "email" | "image">;
+}
 
-    return (
-      <article
-        key={post.id}
-        className="[&:not(:last-child)]:border-b-1 border-gray-200 py-10 px-4 xl:mr-5"
-      >
-        <time dateTime={formattedDate} className="text-gray-500 italic text-xs">
-          {formattedDate}
-        </time>
-        <div className="group relative">
-          <h3 className="mt-3 text-3xl/8 font-semibold text-gray-900 group-hover:text-gray-600">
-            <a href={`/home/posts/${post.slug}`}>
-              <span className="absolute inset-0" />
-              {post.title}
-            </a>
-          </h3>
-          <div
-            className="mt-5 line-clamp-3 text-lg/6 text-gray-600"
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
-        </div>
-        <div className="relative mt-8 flex items-center gap-x-4">
-          {user.image && (
-            <Image
-              alt=""
-              src={user.image}
-              className="size-10 rounded-full bg-gray-50"
-              width={40}
-              height={40}
-            />
-          )}
-          <div className="text-sm/6">
-            <p className="font-semibold text-gray-900">
-              <a href="#">
-                <span className="absolute inset-0" />
-                {user.name}
-              </a>
-            </p>
-            {/* TODO: update when introduce RBAC */}
-            {/* <p className="text-gray-600">Admin</p> */}
-          </div>
-        </div>
-      </article>
-    );
-  });
+export default function AllUserPosts({ user, posts }: AllUserPostsProps) {
+  // TODO: Update to use PostShortView component
+  return sortPostsByDateDesc(posts).map((post) => (
+    <PostFullView
+      key={post.id}
+      post={post}
+      user={user}
+      slug={post.slug as string}
+    />
+  ));
 }

components/shell.tsx

@@ -6,11 +6,14 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { type User } from "@prisma/client";
 
-export default function Shell({
-  user,
-  children,
-}: React.PropsWithChildren<{ user: User }>) {
+interface ShellProps {
+  user: Pick<User, "id" | "name" | "email" | "image">;
+  children: React.ReactNode;
+}
+
+export default function Shell({ user, children }: ShellProps) {
   return (
     <SidebarProvider
       style={

components/two-column.tsx

@@ -1,3 +1,5 @@
+import { type User } from "@prisma/client";
+
 export default function TwoColumn({
   children,
 }: React.PropsWithChildren<{ user: User }>) {