CoastalCommitsPastes/client/app/components/post-list/list-item.tsx

116 lines
2.9 KiB
TypeScript
Raw Normal View History

import VisibilityBadge from "../badges/visibility-badge"
2022-11-12 04:28:06 -05:00
import FadeIn from "@components/fade-in"
2022-03-26 03:24:18 -04:00
import Trash from "@geist-ui/icons/trash"
2022-11-12 04:28:06 -05:00
import ExpirationBadge from "@components/badges/expiration-badge"
import CreatedAgoBadge from "@components/badges/created-ago-badge"
import Edit from "@geist-ui/icons/edit"
import { useRouter } from "next/navigation"
2022-04-09 20:48:19 -04:00
import Parent from "@geist-ui/icons/arrowUpCircle"
import styles from "./list-item.module.css"
2022-11-12 04:28:06 -05:00
import Link from "@components/link"
import type { PostWithFiles } from "@lib/server/prisma"
import type { File } from "@lib/server/prisma"
2022-11-12 21:39:03 -05:00
import Tooltip from "@components/tooltip"
import Badge from "@components/badges/badge"
import Card from "@components/card"
import Button from "@components/button"
2022-03-09 20:11:37 -05:00
// TODO: isOwner should default to false so this can be used generically
2022-04-09 20:48:19 -04:00
const ListItem = ({
post,
isOwner = true,
deletePost
}: {
2022-11-10 02:11:36 -05:00
post: PostWithFiles
2022-04-09 20:48:19 -04:00
isOwner?: boolean
deletePost: () => void
}) => {
const router = useRouter()
2022-04-09 20:48:19 -04:00
const editACopy = () => {
router.push(`/new/from/${post.id}`)
}
2022-03-09 20:11:37 -05:00
const viewParentClick = () => {
2022-11-10 02:11:36 -05:00
router.push(`/post/${post.parentId}`)
}
2022-04-09 20:48:19 -04:00
return (
<FadeIn>
<li key={post.id}>
<Card style={{ overflowY: "scroll" }}>
<>
<div className={styles.title}>
<h3 style={{ display: "inline-block", margin: 0 }}>
<Link
colored
style={{ marginRight: "var(--gap)" }}
href={`/post/${post.id}`}
>
{post.title}
</Link>
</h3>
2022-04-09 20:48:19 -04:00
{isOwner && (
<span className={styles.buttons}>
2022-11-10 02:11:36 -05:00
{post.parentId && (
2022-11-12 21:39:03 -05:00
<Tooltip content={"View parent"}>
2022-04-09 20:48:19 -04:00
<Button
iconRight={<Parent />}
onClick={viewParentClick}
height={38}
2022-04-09 20:48:19 -04:00
/>
</Tooltip>
)}
2022-11-12 21:39:03 -05:00
<Tooltip content={"Make a copy"}>
2022-11-18 01:36:53 -05:00
<Button
iconRight={<Edit />}
onClick={editACopy}
height={38}
/>
2022-04-09 20:48:19 -04:00
</Tooltip>
2022-11-12 21:39:03 -05:00
<Tooltip content={"Delete"}>
2022-11-18 01:36:53 -05:00
<Button
iconRight={<Trash />}
onClick={deletePost}
height={38}
/>
2022-04-09 20:48:19 -04:00
</Tooltip>
</span>
)}
</div>
{post.description && (
<p className={styles.oneline}>{post.description}</p>
)}
2022-04-09 20:48:19 -04:00
<div className={styles.badges}>
2022-11-14 21:39:42 -05:00
<VisibilityBadge visibility={post.visibility} />
2022-04-09 20:48:19 -04:00
<Badge type="secondary">
{post.files?.length === 1
? "1 file"
: `${post.files?.length || 0} files`}
</Badge>
<CreatedAgoBadge createdAt={post.createdAt} />
2022-04-09 20:48:19 -04:00
<ExpirationBadge postExpirationDate={post.expiresAt} />
</div>
</>
<hr />
<>
{post?.files?.map((file: File) => {
2022-04-09 20:48:19 -04:00
return (
<div key={file.id}>
<Link colored href={`/post/${post.id}#${file.title}`}>
2022-04-09 20:48:19 -04:00
{file.title || "Untitled file"}
</Link>
</div>
)
})}
</>
2022-04-09 20:48:19 -04:00
</Card>
</li>
2022-04-09 20:48:19 -04:00
</FadeIn>
)
2022-03-09 20:11:37 -05:00
}
2022-04-09 20:48:19 -04:00
export default ListItem