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

import NextLink from "next/link"
import VisibilityBadge from "../badges/visibility-badge"
import {
	Link,
	Text,
	Card,
	Tooltip,
	Divider,
	Badge,
	Button
} from "@geist-ui/core"
import { File, Post } from "@lib/types"
import FadeIn from "@components/fade-in"
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"
import Parent from "@geist-ui/icons/arrowUpCircle"
import styles from "./list-item.module.css"

// TODO: isOwner should default to false so this can be used generically
const ListItem = ({
	post,
	isOwner = true,
	deletePost
}: {
	post: Post
	isOwner?: boolean
	deletePost: () => void
}) => {
	const router = useRouter()

	const editACopy = () => {
		router.push(`/new/from/${post.id}`)
	}

	const viewParentClick = () => {
		router.push(`/post/${post.parent?.id}`)
	}

	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}`}
							>
								<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}
											/>
										</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>
						)}

						<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}`}
									>
										{file.title || "Untitled file"}
									</Link>
								</div>
							)
						})}
					</Card.Content>
				</Card>
			</li>{" "}
		</FadeIn>
	)
}

export default ListItem