stacker.news/components/item.js

145 lines
5.6 KiB
JavaScript
Raw Normal View History

2021-04-14 23:56:29 +00:00
import Link from 'next/link'
2021-04-14 00:57:32 +00:00
import styles from './item.module.css'
2021-04-22 22:14:32 +00:00
import UpVote from './upvote'
2023-12-27 02:27:52 +00:00
import { useRef } from 'react'
2023-08-16 19:03:37 +00:00
import { AD_USER_ID, NOFOLLOW_LIMIT } from '../lib/constants'
2022-01-10 18:53:26 +00:00
import Pin from '../svgs/pushpin-fill.svg'
2022-02-03 22:01:42 +00:00
import reactStringReplace from 'react-string-replace'
2022-07-30 13:25:46 +00:00
import PollIcon from '../svgs/bar-chart-horizontal-fill.svg'
2023-01-26 16:11:55 +00:00
import BountyIcon from '../svgs/bounty-bag.svg'
import ActionTooltip from './action-tooltip'
2023-07-13 20:18:04 +00:00
import ImageIcon from '../svgs/image-fill.svg'
import { numWithUnits } from '../lib/format'
import ItemInfo from './item-info'
2023-09-26 21:44:57 +00:00
import Prism from '../svgs/prism.svg'
2023-08-06 19:18:40 +00:00
import { commentsViewedAt } from '../lib/new-comments'
import { useRouter } from 'next/router'
2023-08-16 19:03:37 +00:00
import { Badge } from 'react-bootstrap'
2023-08-16 22:53:51 +00:00
import AdIcon from '../svgs/advertisement-fill.svg'
import { DownZap } from './dont-link-this'
2022-02-03 22:01:42 +00:00
2022-07-21 22:55:05 +00:00
export function SearchTitle ({ title }) {
return reactStringReplace(title, /\*\*\*([^*]+)\*\*\*/g, (match, i) => {
return <mark key={`strong-${match}-${i}`}>{match}</mark>
2022-02-03 22:01:42 +00:00
})
}
2021-04-14 00:57:32 +00:00
export default function Item ({ item, rank, belowTitle, right, full, children, siblingComments, onQuoteReply }) {
2021-09-15 23:42:44 +00:00
const titleRef = useRef()
2023-08-06 19:18:40 +00:00
const router = useRouter()
2021-09-15 23:42:44 +00:00
2023-07-13 20:18:04 +00:00
const image = item.url && item.url.startsWith(process.env.NEXT_PUBLIC_IMGPROXY_URL)
2023-10-16 18:44:07 +00:00
const nofollow = item.sats + item.boost < NOFOLLOW_LIMIT && !item.position ? 'nofollow' : ''
2023-07-13 20:18:04 +00:00
2021-04-14 00:57:32 +00:00
return (
2021-04-14 23:56:29 +00:00
<>
2021-04-22 22:14:32 +00:00
{rank
? (
<div className={styles.rank}>
{rank}
</div>)
: <div />}
2023-10-26 17:52:06 +00:00
<div className={`${styles.item} ${siblingComments ? 'pt-3' : ''}`}>
2022-09-21 19:57:36 +00:00
{item.position
? <Pin width={24} height={24} className={styles.pin} />
: item.meDontLikeSats > item.meSats
? <DownZap width={24} height={24} className={styles.dontLike} id={item.id} meDontLikeSats={item.meDontLikeSats} />
2023-08-16 22:53:51 +00:00
: Number(item.user?.id) === AD_USER_ID
? <AdIcon width={24} height={24} className={styles.ad} />
2023-12-27 02:27:52 +00:00
: <UpVote item={item} className={styles.upvote} />}
2021-04-14 23:56:29 +00:00
<div className={styles.hunk}>
2023-05-01 20:58:30 +00:00
<div className={`${styles.main} flex-wrap`}>
2023-08-06 19:18:40 +00:00
<Link
2023-10-16 18:44:07 +00:00
rel={nofollow}
2023-08-06 19:18:40 +00:00
href={`/items/${item.id}`}
onClick={(e) => {
const viewedAt = commentsViewedAt(item)
if (viewedAt) {
e.preventDefault()
if (e.ctrlKey || e.metaKey) {
window.open(
2023-10-26 19:36:20 +00:00
`/items/${item.id}`,
'_blank',
'noopener,noreferrer'
)
} else {
router.push(
2023-08-06 19:18:40 +00:00
`/items/${item.id}?commentsViewedAt=${viewedAt}`,
`/items/${item.id}`)
}
2023-08-06 19:18:40 +00:00
}
}} ref={titleRef} className={`${styles.title} text-reset me-2`}
>
{item.searchTitle ? <SearchTitle title={item.searchTitle} /> : item.title}
2023-07-24 18:35:05 +00:00
{item.pollCost && <span className={styles.icon}> <PollIcon className='fill-grey ms-1' height={14} width={14} /></span>}
{item.bounty > 0 &&
<span className={styles.icon}>
<ActionTooltip notForm overlayText={`${numWithUnits(item.bounty)} ${item.bountyPaidTo?.length ? ' paid' : ' bounty'}`}>
<BountyIcon className={`${styles.bountyIcon} ${item.bountyPaidTo?.length ? 'fill-success' : 'fill-grey'}`} height={16} width={16} />
</ActionTooltip>
</span>}
2023-09-26 21:44:57 +00:00
{item.forwards?.length > 0 && <span className={styles.icon}><Prism className='fill-grey ms-1' height={14} width={14} /></span>}
2023-07-24 18:35:05 +00:00
{image && <span className={styles.icon}><ImageIcon className='fill-grey ms-2' height={16} width={16} /></span>}
2021-04-14 23:56:29 +00:00
</Link>
2023-07-13 20:18:04 +00:00
{item.url && !image &&
2021-12-06 21:27:14 +00:00
<>
<a
2023-07-25 14:14:45 +00:00
className={styles.link} target='_blank' href={item.url}
2023-10-16 18:44:07 +00:00
rel={`noreferrer ${nofollow} noopener`}
2021-12-06 21:27:14 +00:00
>
{item.url.replace(/(^https?:|^)\/\//, '')}
</a>
</>}
2021-04-14 23:56:29 +00:00
</div>
2023-08-16 19:03:37 +00:00
<ItemInfo
2023-12-27 02:27:52 +00:00
full={full} item={item}
onQuoteReply={onQuoteReply}
2023-10-16 18:44:07 +00:00
nofollow={nofollow}
extraBadges={Number(item?.user?.id) === AD_USER_ID && <Badge className={styles.newComment} bg={null}>AD</Badge>}
2023-08-16 19:03:37 +00:00
/>
{belowTitle}
2021-04-14 00:57:32 +00:00
</div>
{right}
2021-04-14 00:57:32 +00:00
</div>
2021-04-14 23:56:29 +00:00
{children && (
<div className={styles.children}>
{children}
</div>
)}
</>
2021-04-14 00:57:32 +00:00
)
}
2021-04-22 22:14:32 +00:00
2021-04-27 00:55:48 +00:00
export function ItemSkeleton ({ rank, children }) {
2021-04-22 22:14:32 +00:00
return (
<>
2022-01-27 19:18:48 +00:00
{rank
? (
<div className={styles.rank}>
{rank}
</div>)
: <div />}
2021-04-22 22:14:32 +00:00
<div className={`${styles.item} ${styles.skeleton}`}>
2021-04-28 19:30:14 +00:00
<UpVote className={styles.upvote} />
2021-04-22 22:14:32 +00:00
<div className={styles.hunk}>
<div className={`${styles.main} flex-wrap flex-md-nowrap`}>
2023-07-24 18:35:05 +00:00
<span className={`${styles.title} clouds text-reset flex-md-fill flex-md-shrink-0 me-2`} />
2021-04-22 22:14:32 +00:00
<span className={`${styles.link} clouds`} />
</div>
<div className={styles.other}>
2021-04-28 22:52:03 +00:00
<span className={`${styles.otherItem} clouds`} />
2021-04-22 22:14:32 +00:00
<span className={`${styles.otherItem} clouds`} />
<span className={`${styles.otherItem} ${styles.otherItemLonger} clouds`} />
<span className={`${styles.otherItem} ${styles.otherItemLonger} clouds`} />
</div>
</div>
</div>
2021-04-27 00:55:48 +00:00
{children && (
<div className={styles.children}>
{children}
</div>
)}
2021-04-22 22:14:32 +00:00
</>
)
}