Add basic /author/{id} page

client/app/(posts)/post/[id]/components/header/title/index.tsx

@@ -1,8 +1,9 @@
-import CreatedAgoBadge from '@components/badges/created-ago-badge'
-import ExpirationBadge from '@components/badges/expiration-badge'
-import VisibilityBadge from '@components/badges/visibility-badge'
-import Skeleton from '@components/skeleton'
-import styles from './title.module.css'
+import CreatedAgoBadge from "@components/badges/created-ago-badge"
+import ExpirationBadge from "@components/badges/expiration-badge"
+import VisibilityBadge from "@components/badges/visibility-badge"
+import Link from "@components/link"
+import Skeleton from "@components/skeleton"
+import styles from "./title.module.css"
 
 type TitleProps = {
 	title: string
@@ -11,6 +12,7 @@ type TitleProps = {
 	visibility?: string
 	createdAt?: Date
 	expiresAt?: Date
+	authorId?: string
 }
 
 export const PostTitle = ({
@@ -19,14 +21,16 @@ export const PostTitle = ({
 	visibility,
 	createdAt,
 	expiresAt,
-    loading
+	loading,
+	authorId
 }: TitleProps) => {
 	return (
 		<span className={styles.title}>
 			<h3>
 				{title}{" "}
 				<span style={{ color: "var(--gray)" }}>
-					by {displayName || "anonymous"}
+					by{" "}
+					<Link href={`/author/${authorId}`}>{displayName || "anonymous"}</Link>
 				</span>
 			</h3>
 			{!loading && (

client/app/(posts)/post/[id]/page.tsx

@@ -65,9 +65,10 @@ const getPost = async (id: string) => {
 				title: "",
 				createdAt: new Date("1970-01-01"),
 				author: {
-					displayName: ""
+					displayName: "",
 				},
-				description: ""
+				description: "",
+				authorId: "",
 			},
 			isProtected: true,
 			isAuthor: isAuthorOrAdmin
@@ -110,6 +111,7 @@ const PostView = async ({
 					createdAt={post.createdAt}
 					displayName={post.author?.displayName || ""}
 					visibility={post.visibility}
+					authorId={post.authorId}
 				/>
 			</div>
 			{post.description && (

client/app/author/[username]/page.tsx

@@ -0,0 +1,38 @@
+import PostList from "@components/post-list"
+import { getPostsByUser, getUserById } from "@lib/server/prisma"
+import { Suspense } from "react"
+
+async function PostListWrapper({
+	posts,
+	userId,
+}: {
+	posts: ReturnType<typeof getPostsByUser>
+	userId: string
+}) {
+	const data = (await posts).filter((post) => post.visibility === "public")
+	return <PostList morePosts={false} userId={userId} initialPosts={JSON.stringify(data)} />
+}
+
+export default async function UserPage({
+	params
+}: {
+	params: {
+		username: string
+	}
+}) {
+	// TODO: the route should be user.name, not id
+	const id = params.username
+	const user = await getUserById(id)
+
+	const posts = getPostsByUser(id, true)
+
+	return (
+		<>
+			<h1>{user?.displayName}&apos;s public posts</h1>
+			<Suspense fallback={<PostList initialPosts={JSON.stringify({})} />}>
+				{/* @ts-ignore because TS async JSX support is iffy */}
+				<PostListWrapper posts={posts} userId={id} />
+			</Suspense>
+		</>
+	)
+}

client/app/components/post-list/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import styles from "./post-list.module.css"
-import { ListItemSkeleton } from "./list-item-skeleton"
 import ListItem from "./list-item"
 import { ChangeEvent, useCallback, useEffect, useState } from "react"
 import useDebounce from "@lib/hooks/use-debounce"
@@ -10,10 +9,11 @@ import type { PostWithFiles } from "@lib/server/prisma"
 import Input from "@components/input"
 import Button from "@components/button"
 import { useToasts } from "@components/toasts"
+import { ListItemSkeleton } from "./list-item-skeleton"
 
 type Props = {
 	initialPosts: string | PostWithFiles[]
-	morePosts: boolean
+	morePosts?: boolean
 	userId?: string
 }
 
@@ -120,12 +120,12 @@ const PostList = ({
 				/>
 			</div>
 			{!posts && <p style={{ color: "var(--warning)" }}>Failed to load.</p>}
-			{/* {!posts?.length && (
+			{!posts?.length && (
 				<ul>
 					<ListItemSkeleton />
 					<ListItemSkeleton />
 				</ul>
-			)} */}
+			)}
 			{posts?.length === 0 && posts && (
 				<p>
 					No posts found. Create one{" "}

client/lib/server/prisma.ts

@@ -218,10 +218,12 @@ export const searchPosts = async (
 	query: string,
 	{
 		withFiles = false,
-		userId
+		userId,
+		publicOnly
 	}: {
 		withFiles?: boolean
 		userId?: User["id"]
+		publicOnly?: boolean
 	} = {}
 ): Promise<PostWithFiles[]> => {
 	const posts = await prisma.post.findMany({
@@ -231,7 +233,8 @@ export const searchPosts = async (
 					title: {
 						search: query
 					},
-					authorId: userId
+					authorId: userId,
+					visibility: publicOnly ? "public" : undefined
 				},
 				{
 					files: {
@@ -241,7 +244,8 @@ export const searchPosts = async (
 							},
 							userId: userId
 						}
-					}
+					},
+					visibility: publicOnly ? "public" : undefined
 				}
 			]
 		},

client/pages/api/post/search.ts

@@ -1,11 +1,14 @@
 import { withMethods } from "@lib/api-middleware/with-methods"
 import { parseQueryParam } from "@lib/server/parse-query-param"
-import { searchPosts } from "@lib/server/prisma"
+import { PostWithFiles, searchPosts } from "@lib/server/prisma"
 import { NextApiRequest, NextApiResponse } from "next"
+import { getSession } from "next-auth/react"
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 	const { q, userId } = req.query
 
+	const session = await getSession()
+
 	const query = parseQueryParam(q)
 	if (!query) {
 		res.status(400).json({ error: "Invalid query" })
@@ -13,9 +16,18 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 	}
 
 	try {
-		const posts = await searchPosts(query, {
+		let posts: PostWithFiles[]
+		if (session?.user.id === userId || session?.user.role === "admin") {
+			posts = await searchPosts(query, {
 				userId: parseQueryParam(userId),
+				publicOnly: true
 			})
+		} else {
+			posts = await searchPosts(query, {
+				userId: parseQueryParam(userId),
+				publicOnly: true
+			})
+		}
 
 		res.status(200).json(posts)
 	} catch (err) {