import Link from 'next/link' import styles from './item.module.css' import { timeSince } from '../lib/time' import UpVote from './upvote' import { useEffect, useRef, useState } from 'react' import Countdown from './countdown' import { NOFOLLOW_LIMIT } from '../lib/constants' import Pin from '../svgs/pushpin-fill.svg' import reactStringReplace from 'react-string-replace' import Toc from './table-of-contents' import PollIcon from '../svgs/bar-chart-horizontal-fill.svg' import { Badge } from 'react-bootstrap' import { newComments } from '../lib/new-comments' export function SearchTitle ({ title }) { return reactStringReplace(title, /:high\[([^\]]+)\]/g, (match, i) => { return {match} }) } function FwdUser ({ user }) { return (
100% of tips are forwarded to{' '} @{user.name}
) } export default function Item ({ item, rank, showFwdUser, toc, children }) { const mine = item.mine const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000 const [canEdit, setCanEdit] = useState(mine && (Date.now() < editThreshold)) const [wrap, setWrap] = useState(false) const titleRef = useRef() const [hasNewComments, setHasNewComments] = useState(false) useEffect(() => { setWrap( Math.ceil(parseFloat(window.getComputedStyle(titleRef.current).lineHeight)) < titleRef.current.clientHeight) }, []) useEffect(() => { // if we are showing toc, then this is a full item setHasNewComments(!toc && newComments(item)) }, [item]) return ( <> {rank ? (
{rank}
) :
}
{item.position ? : }
{!item.position && <> {item.sats} sats \ } {item.boost > 0 && <> {item.boost} boost \ } {item.ncomments} comments {hasNewComments && <>{' '}new} \ @{item.user.name} {timeSince(new Date(item.createdAt))} {item.prior && <> \ yesterday } {canEdit && <> \ edit { setCanEdit(false) }} /> }
{showFwdUser && item.fwdUser && }
{toc && }
{children && (
{children}
)} ) } export function ItemSkeleton ({ rank, children }) { return ( <> {rank ? (
{rank}
) :
}
{children && (
{children}
)} ) }