Skip to content

Commit 9b115b2

Browse files
danielvancdanielvanc
authored
Merge pull request #33 from danielvanc/31-view-post
31 view post
2 parents e9b1964 + 7104250 commit 9b115b2

File tree

15 files changed

+606
-258
lines changed

15 files changed

+606
-258
lines changed

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { getPost } from "@/utils/db";
2+
import PostFullView from "@/components/posts/PostFullView";
3+
4+
interface PostPageProps {
5+
params: Promise<{ slug: string }>;
6+
}
7+
8+
export default async function PostPage({ params }: PostPageProps) {
9+
const { slug } = await params;
10+
const { post, user } = await getPost(slug);
11+
12+
return <PostFullView post={post} user={user} />;
13+
}

‎app/types.d.ts

-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +0,0 @@
1-
interface User {
2-
name?: string | null;
3-
email?: string | null;
4-
image?: string | null;
5-
}
6-
7-
interface Post {
8-
updatedAt: Date;
9-
id: string;
10-
title: string;
11-
content: string;
12-
createdAt: Date;
13-
slug: string | null;
14-
}

‎components/app-sidebar.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
import { Switch } from "@/components/ui/switch";
2727
import Link from "next/link";
2828
import { useRouter } from "next/navigation";
29+
import { type User } from "@prisma/client";
2930

3031
const data = {
3132
navMain: [
@@ -59,7 +60,9 @@ const data = {
5960
export function AppSidebar({
6061
user,
6162
...props
62-
}: React.ComponentProps<typeof Sidebar> & { user: User }) {
63+
}: React.ComponentProps<typeof Sidebar> & {
64+
user: Pick<User, "id" | "name" | "email" | "image">;
65+
}) {
6366
// TODO: use the url/router to set active item
6467
const router = useRouter();
6568
const [activeItem, setActiveItem] = React.useState(data.navMain[2]);

‎components/nav-user.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,18 @@ import {
2020
} from "@/components/ui/sidebar";
2121

2222
import { logOutUser } from "@/app/actions";
23+
import { type User } from "@prisma/client";
2324

2425
function logUserOut(event: React.FormEvent<HTMLFormElement>) {
2526
event.preventDefault();
2627
logOutUser();
2728
}
2829

29-
export function NavUser({ user }: { user: User }) {
30+
interface NavUserProps {
31+
user: Pick<User, "id" | "name" | "email" | "image">;
32+
}
33+
34+
export function NavUser({ user }: NavUserProps) {
3035
const { isMobile } = useSidebar();
3136

3237
return (

‎components/posts/PostFullView.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { formatDate } from "@/utils/posts";
2+
import { generateHTML } from "@tiptap/html";
3+
import StarterKit from "@tiptap/starter-kit";
4+
import { type User, type Post } from "@prisma/client";
5+
import Image from "next/image";
6+
import Link from "next/link";
7+
8+
interface PostFullViewProps {
9+
post: Omit<Post, "ownerId">;
10+
user: Pick<User, "id" | "name" | "email" | "image">;
11+
slug?: string;
12+
}
13+
14+
export default function PostFullView({ post, user, slug }: PostFullViewProps) {
15+
const formattedDate = formatDate(post.updatedAt);
16+
const content = generateHTML(JSON.parse(post.content), [StarterKit]);
17+
18+
function Title({ slug }: { slug: PostFullViewProps["slug"] }) {
19+
return (
20+
<h3 className="mt-3 text-3xl/8 font-semibold text-gray-900">
21+
{slug ? (
22+
<Link
23+
href={`/home/posts/${post.slug}`}
24+
className="hover:text-gray-600"
25+
>
26+
<span className="absolute inset-0" />
27+
{post.title}
28+
</Link>
29+
) : (
30+
post.title
31+
)}
32+
</h3>
33+
);
34+
}
35+
36+
return (
37+
<article
38+
key={post.id}
39+
className="[&:not(:last-child)]:border-b-1 border-gray-200 py-10 px-4 xl:mr-5"
40+
>
41+
<time dateTime={formattedDate} className="text-gray-500 italic text-xs">
42+
{formattedDate}
43+
</time>
44+
<div className="group relative">
45+
<Title slug={slug} />
46+
<div
47+
className="mt-5 line-clamp-3 text-lg/6 text-gray-600"
48+
dangerouslySetInnerHTML={{ __html: content }}
49+
/>
50+
</div>
51+
<div className="relative mt-8 flex items-center gap-x-4">
52+
{user.image && (
53+
<Image
54+
alt=""
55+
src={user.image}
56+
className="size-10 rounded-full bg-gray-50"
57+
width={40}
58+
height={40}
59+
/>
60+
)}
61+
<div className="text-sm/6">
62+
<p className="font-semibold text-gray-900">
63+
<a href="#">
64+
<span className="absolute inset-0" />
65+
{user.name}
66+
</a>
67+
</p>
68+
{/* TODO: update when introduce RBAC */}
69+
{/* <p className="text-gray-600">Admin</p> */}
70+
</div>
71+
</div>
72+
</article>
73+
);
74+
}

‎components/posts/allUserPosts.tsx

+17-62
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,20 @@
1-
import { format } from "date-fns";
2-
import Image from "next/image";
3-
import { generateHTML } from "@tiptap/html";
4-
import StarterKit from "@tiptap/starter-kit";
1+
import { sortPostsByDateDesc } from "@/utils/posts";
2+
import PostFullView from "./PostFullView";
3+
import { type User, type Post } from "@prisma/client";
54

6-
export default function AllUserPosts({
7-
user,
8-
posts,
9-
}: {
10-
posts: Post[];
11-
user: User;
12-
}) {
13-
const sortedPostsDesc = posts.sort((a, b) => {
14-
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
15-
});
16-
return sortedPostsDesc.map((post) => {
17-
const formattedDate = format(post.updatedAt, "dd MMM, yyyy");
18-
19-
const content = generateHTML(JSON.parse(post.content), [StarterKit]);
5+
interface AllUserPostsProps {
6+
posts: Omit<Post, "ownerId">[];
7+
user: Pick<User, "id" | "name" | "email" | "image">;
8+
}
209

21-
return (
22-
<article
23-
key={post.id}
24-
className="[&:not(:last-child)]:border-b-1 border-gray-200 py-10 px-4 xl:mr-5"
25-
>
26-
<time dateTime={formattedDate} className="text-gray-500 italic text-xs">
27-
{formattedDate}
28-
</time>
29-
<div className="group relative">
30-
<h3 className="mt-3 text-3xl/8 font-semibold text-gray-900 group-hover:text-gray-600">
31-
<a href={`/home/posts/${post.slug}`}>
32-
<span className="absolute inset-0" />
33-
{post.title}
34-
</a>
35-
</h3>
36-
<div
37-
className="mt-5 line-clamp-3 text-lg/6 text-gray-600"
38-
dangerouslySetInnerHTML={{ __html: content }}
39-
/>
40-
</div>
41-
<div className="relative mt-8 flex items-center gap-x-4">
42-
{user.image && (
43-
<Image
44-
alt=""
45-
src={user.image}
46-
className="size-10 rounded-full bg-gray-50"
47-
width={40}
48-
height={40}
49-
/>
50-
)}
51-
<div className="text-sm/6">
52-
<p className="font-semibold text-gray-900">
53-
<a href="#">
54-
<span className="absolute inset-0" />
55-
{user.name}
56-
</a>
57-
</p>
58-
{/* TODO: update when introduce RBAC */}
59-
{/* <p className="text-gray-600">Admin</p> */}
60-
</div>
61-
</div>
62-
</article>
63-
);
64-
});
10+
export default function AllUserPosts({ user, posts }: AllUserPostsProps) {
11+
// TODO: Update to use PostShortView component
12+
return sortPostsByDateDesc(posts).map((post) => (
13+
<PostFullView
14+
key={post.id}
15+
post={post}
16+
user={user}
17+
slug={post.slug as string}
18+
/>
19+
));
6520
}

‎components/shell.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ import {
66
SidebarProvider,
77
SidebarTrigger,
88
} from "@/components/ui/sidebar";
9+
import { type User } from "@prisma/client";
910

10-
export default function Shell({
11-
user,
12-
children,
13-
}: React.PropsWithChildren<{ user: User }>) {
11+
interface ShellProps {
12+
user: Pick<User, "id" | "name" | "email" | "image">;
13+
children: React.ReactNode;
14+
}
15+
16+
export default function Shell({ user, children }: ShellProps) {
1417
return (
1518
<SidebarProvider
1619
style={

‎components/two-column.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type User } from "@prisma/client";
2+
13
export default function TwoColumn({
24
children,
35
}: React.PropsWithChildren<{ user: User }>) {

0 commit comments

Comments
 (0)