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

117 lines
2.8 KiB
TypeScript
Raw Normal View History

import NextLink from "next/link"
import VisibilityBadge from "../badges/visibility-badge"
2022-04-09 20:48:19 -04:00
import {
Link,
Text,
Card,
Tooltip,
Divider,
Badge,
Button
} from "@geist-ui/core"
import { File, Post } from "@lib/types"
import FadeIn from "@components/fade-in"
2022-03-26 03:24:18 -04:00
import Trash from "@geist-ui/icons/trash"
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/router"
2022-04-09 20:48:19 -04:00
import Parent from "@geist-ui/icons/arrowUpCircle"
import styles from "./list-item.module.css"
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
}: {
post: Post
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 = () => {
router.push(`/post/${post.parent?.id}`)
}
2022-04-09 20:48:19 -04:00
return (
<FadeIn>
<li key={post.id}>
<Card style={{ overflowY: "scroll" }}>
<Card.Body>
<Text h3 className={styles.title}>
<NextLink
passHref={true}
href={`/post/[id]`}
as={`/post/${post.id}`}
2022-04-09 20:48:19 -04:00
>
<Link color marginRight={"var(--gap)"}>
{post.title}
</Link>
</NextLink>
{isOwner && (
<span className={styles.buttons}>
{post.parent && (
<Tooltip text={"View parent"} hideArrow>
<Button
auto
icon={<Parent />}
onClick={viewParentClick}
2022-04-09 20:48:19 -04:00
/>
</Tooltip>
)}
<Tooltip text={"Make a copy"} hideArrow>
<Button auto iconRight={<Edit />} onClick={editACopy} />
</Tooltip>
<Tooltip text={"Delete"} hideArrow>
<Button iconRight={<Trash />} onClick={deletePost} auto />
</Tooltip>
</span>
)}
</Text>
{post.description && (
<Text p className={styles.oneline}>
{post.description}
</Text>
)}
2022-04-09 20:48:19 -04:00
<div className={styles.badges}>
<VisibilityBadge visibility={post.visibility} />
<CreatedAgoBadge createdAt={post.createdAt} />
<Badge type="secondary">
{post.files?.length === 1
? "1 file"
: `${post.files?.length || 0} files`}
</Badge>
<ExpirationBadge postExpirationDate={post.expiresAt} />
</div>
</Card.Body>
<Divider h="1px" my={0} />
<Card.Content>
{post.files?.map((file: File) => {
return (
<div key={file.id}>
<Link
color
href={`/post/${post.id}#${file.title}`}
2022-04-09 20:48:19 -04:00
>
{file.title || "Untitled file"}
</Link>
</div>
)
})}
</Card.Content>
</Card>
</li>{" "}
</FadeIn>
)
2022-03-09 20:11:37 -05:00
}
2022-04-09 20:48:19 -04:00
export default ListItem