OurBigBook Docs
web/front/ArticleList.tsx
import React from 'react'
import Link from 'next/link'
import Router, { useRouter } from 'next/router'
import lodash from 'lodash'
import CustomLink from 'front/CustomLink'
import LikeArticleButton from 'front/LikeArticleButton'
import Pagination, { PaginationPropsUrlFunc } from 'front/Pagination'
import ShowBody from 'front/ShowBody'
import UserLinkWithImage from 'front/UserLinkWithImage'
import {
AnnounceIcon,
ArticleCreatedUpdatedPills,
ArticleIcon,
DiscussionIcon,
LikeIcon,
TimeIcon,
TopicIcon,
UnlistedIcon,
UserIcon,
getShortFragFromLongForPath,
shortFragGoTo,
} from 'front'
import {
articleLimit,
} from 'front/config'
import routes from 'front/routes'
import { TRI_ALL, TRI_FALSE } from 'front/js'
import { ArticleType } from 'front/types/ArticleType'
import { ItemBody } from 'front/ItemBody'
import { IssueType } from 'front/types/IssueType'
import { TopicType } from 'front/types/TopicType'
import { UserType } from 'front/types/UserType'
import { encodeGetParams, QUERY_FALSE_VAL, QUERY_TRUE_VAL } from 'ourbigbook/web_api'
import {
AT_MENTION_CHAR,
UNICODE_SEARCH_CHAR,
formatDate,
} from 'ourbigbook'
import {
USER_FINISHED_TYPING_MS
} from 'ourbigbook/runtime_common'
function getKey(
itemType: string,
article,
issueArticle=undefined
) {
if (itemType === 'discussion') {
let curIssueArticle
if (issueArticle) {
curIssueArticle = issueArticle
} else {
curIssueArticle = article.article
}
return `${article.number}/${curIssueArticle.slug}`
} else {
return itemType === 'article' ? article.slug :
itemType === 'like' ? `${article.likedBy.username}/${article.slug}` :
article.topicId
}
}
export type ArticleListProps = {
// TODO not ideal. Only Articles are really possible. This is to appease ArticleList.
articles: (ArticleType & IssueType & TopicType)[];
articlesCount: number;
followed?: boolean;
handleShortFragmentSkipOnce?: React.MutableRefObject<boolean>;
hasUnlisted?: boolean;
issueArticle?: ArticleType;
itemType?: 'article' | 'discussion' | 'like' | 'topic';
list?: boolean;
loggedInUser?: UserType,
page?: number;
paginationUrlFunc?: PaginationPropsUrlFunc;
showAuthor: boolean;
showBody?: boolean,
showControls?: boolean;
showFullBody?: boolean,
what?: string;
}
const ArticleList = ({
articles,
articlesCount,
followed=false,
itemType='article',
handleShortFragmentSkipOnce,
hasUnlisted,
issueArticle,
list,
loggedInUser,
page,
paginationUrlFunc,
showAuthor,
showBody=true,
showControls=true,
showFullBody=false,
what='all',
}: ArticleListProps) => {
const router = useRouter();
const { pathname, query } = router
const { uid } = query;
const itemTypeHasShowBody = itemType === 'article'
// This almost works to have discussion body previews. The only missing problem is that
// "render" contains full body including h1 which we don't want. We'd need to convert
// render to be body without h1 like in Article for it to work well.
// || itemType === 'discussion'
let showBodyInit
if (itemTypeHasShowBody) {
if (query.body === QUERY_TRUE_VAL) {
showBodyInit = true
} else if (query.body === QUERY_FALSE_VAL) {
showBodyInit = false
} else {
showBodyInit = showBody
}
} else {
showBodyInit = false
}
const [showBodyState, setShowBodyState] = React.useState(showBodyInit)
const [search, setSearch] = React.useState(query.search || '')
const resetShowBodyGetString = encodeGetParams(lodash.omit(query, 'body'))
React.useEffect(() => {
// Reset on tab change.
setShowBodyState(showBodyInit)
}, [pathname, resetShowBodyGetString, showBodyInit])
let isIssue
let hasSearch
switch (itemType) {
case 'article':
switch (what) {
case 'all':
case 'user-articles':
if (followed) {
hasSearch = false
} else {
hasSearch = true
}
break
default:
hasSearch = false
break
}
break
case 'discussion':
isIssue = true
hasSearch = false
break
case 'topic':
showAuthor = false
hasSearch = true
break
}
let pagination
let emptyMessage
if (articles.length === 0) {
let voice
if (loggedInUser?.username === uid) {
voice = "You have not"
} else {
voice = "This user has not"
}
switch (what) {
case 'likes':
emptyMessage = `${voice} liked any articles yet.`
break
case 'user-articles':
emptyMessage = `${voice} published any articles yet.`
break
case 'all':
if (followed) {
emptyMessage = `Follow some users to see their posts here.`
} else {
emptyMessage = <>
There are no matching {isIssue ? 'discussions' : 'articles'}{isIssue ? ' on this article' : ''}.
{((!isIssue) || (isIssue && issueArticle)) &&
<>
{' '}
Why don't you
{' '}
<CustomLink
href={isIssue ? routes.issueNew(issueArticle.slug) : routes.articleNew()}
>
create a new one
</CustomLink>?
</>
}
</>
}
break
default:
emptyMessage = `There are currently no matching ${isIssue ? 'discussions' : itemType === 'like' ? 'likes' : 'articles'}.`
}
} else {
if (showControls) {
pagination = <Pagination {...{
currentPage: page,
what: isIssue ? 'discussions' : itemType === 'like' ? 'likes' : itemType === 'topic' ? 'topics' : 'articles',
itemsCount: articlesCount,
itemsPerPage: articleLimit,
urlFunc: paginationUrlFunc,
}} />
} else {
pagination = <></>
}
}
const aElemToMetaMap = React.useRef(new Set())
const handleSearchI = React.useRef(0)
let handleSearchIClosure = handleSearchI.current
const handleSearch = (e) => {
const search = e.target.value
setSearch(search)
const url = new URL(window.location.href)
const query = Object.fromEntries(url.searchParams)
if (search) {
query.search = search
} else {
delete query.search
}
delete query.page
Router.push(
`${url.pathname}${encodeGetParams(query)}`,
undefined,
{ shallow: true }
)
handleSearchI.current++
setTimeout(() => {
if (handleSearchIClosure + 1 === handleSearchI.current) {
Router.push(
`${url.pathname}${encodeGetParams(query)}`,
undefined,
)
}
}, USER_FINISHED_TYPING_MS)
}
return (
<div className={`article-list`}>
<div className="list-nav-container">
<nav className="content-not-ourbigbook controls">
{(hasSearch) &&
<input
className="search"
onChange={handleSearch}
placeholder={`${UNICODE_SEARCH_CHAR} Search`}
//ref={displayNameInputElem}
type="text"
value={search}
/>
}
{(itemTypeHasShowBody && articles.length !== 0) ? <ShowBody {...{ setShowBodyState, showBodyState, showBody }}/> : <></>}
</nav>
{ (articles.length === 0)
? <div className="list-container content-not-ourbigbook">
{emptyMessage}
</div>
: <>
<div className="content-not-ourbigbook">
<div className={`list-container${showBodyState ? ' show-body' : '' }`}>
{showBodyState
? articles?.map((article, i) => {
let curIssueArticle
if (issueArticle) {
curIssueArticle = issueArticle
} else {
curIssueArticle = article.article
}
return (
<div
key={getKey(itemType, article) }
className="item"
>
<div className={`item-header content-not-ourbigbook${article.render ? '' : ' empty-body'}`}>
<LikeArticleButton {...{
article,
isIssue,
issueArticle,
loggedInUser,
showText: false,
}} />
{' '}
<CustomLink
href={itemType === 'discussion' ? routes.issue(curIssueArticle.slug, article.number) :
itemType === 'article' ? routes.article(article.slug) :
routes.topic(article.topicId, { sort: 'score' })
}
>
<span
className="ourbigbook-title title"
dangerouslySetInnerHTML={{
__html: itemType === 'article' ? article.titleRenderWithScope : article.titleRender
}}
/>
</CustomLink>
{' '}
{showAuthor &&
<>
by
{' '}
<UserLinkWithImage showUsername={false} user={article.author} />
{' '}
</>
}
<ArticleCreatedUpdatedPills article={article} />
{article.announcedAt && <>
{' '}
<span className="pill" title="Announced">
<AnnounceIcon />
{' '}
{formatDate(article.updatedAt)}
</span>
</>}
</div>
{article.render &&
<ItemBody {...{ showFullBody }}>
<div
className=" ourbigbook"
dangerouslySetInnerHTML={{ __html: article.render }}
ref={(elem) => {
if (elem) {
const as = elem.getElementsByTagName('a')
for (let i = 0; i < as.length; i++) {
const a = as[i]
if (!aElemToMetaMap.current.has(a)) {
const href = a.href
aElemToMetaMap.current.add(a)
let url
let urlOrigin
try {
url = new URL(href, document.baseURI)
urlOrigin = new URL(document.baseURI)
} catch(e) {}
if (
url &&
urlOrigin &&
// Don't do processing for external links.
url.origin === urlOrigin.origin
) {
let frag
let longFrag
let goToTargetInPage = false
let targetElem
const urlFrag = routes.decodeUrlPath(url.hash.slice(1))
const urlPath = routes.decodeUrlPath(url.pathname.slice(1))
if (url.hash) {
frag = urlFrag
targetElem = document.getElementById(frag)
longFrag = AT_MENTION_CHAR + frag
if (targetElem) {
goToTargetInPage = true
a.href = '#' + routes.encodeUrlFragment(longFrag)
}
}
if (!goToTargetInPage) {
const frag = getShortFragFromLongForPath(urlFrag, urlPath)
a.href = url.pathname + (frag ? ('#' + routes.encodeUrlFragment(frag)) : '')
}
a.addEventListener('click', e => {
if (
// Don't capture Ctrl + Click, as that means user wants link to open on a separate page.
// https://stackoverflow.com/questions/16190455/how-to-detect-controlclick-in-javascript-from-an-onclick-div-attribute
!e.ctrlKey
) {
e.preventDefault()
if (
// This is needed to prevent a blowup when clicking the "parent" link of a direct child of the toplevel page of an issue.
// For artiles all works fine because each section is rendered separately and thus has a non empty href.
// But issues currently work more like static renderings, and use empty ID for the toplevel header. This is even though
// the toplevel header does have already have an ID. We should instead of doing this actually make those hrefs correct.
// But lazy now.
!href
) {
window.location.hash = ''
} else {
if (goToTargetInPage) {
shortFragGoTo(handleShortFragmentSkipOnce, frag, longFrag, targetElem)
} else {
Router.push(a.href)
}
}
}
})
}
}
}
}
}}
/>
</ItemBody>
}
<div className="item-footer content-not-ourbigbook">
<CustomLink
href={itemType === 'discussion' ? routes.issue(curIssueArticle.slug, article.number) :
itemType === 'article' ? routes.article(article.slug) :
routes.topic(article.topicId, { sort: 'score' })
}
>
<ArticleIcon /> Read the full article
</CustomLink>
</div>
</div>
)})
: <table className="list">
<thead>
<tr>
{itemType === 'like' &&
<>
<th className="shrink"><TimeIcon /> Date</th>
<th className="shrink"><UserIcon /> Liked by</th>
</>
}
{itemType === 'topic' &&
<th className="shrink right"><ArticleIcon /> Articles</th>
}
{(() => {
const score = itemType === 'topic'
? <></>
: <th className="shrink center"><LikeIcon /> Score</th>
const title = <>
{isIssue &&
<th className="shrink">
<span className="icon">#</span> id
</th>
}
<th className="expand">
{ itemType === 'discussion' ? <DiscussionIcon /> :
itemType === 'topic' ? <TopicIcon /> :
<ArticleIcon />
}
{' '}
Title
</th>
</>
if (itemType === 'like') {
return <>{title}{score}</>
} else {
return <>{score}{title}</>
}
})()
}
{itemType === 'topic' &&
<th className="shrink center"><TopicIcon /> Id</th>
}
{showAuthor &&
<th className="shrink"><UserIcon /> Author</th>
}
{(itemType !== 'topic') &&
<th className="shrink"><DiscussionIcon /> { isIssue ? 'Comments' : 'Discussions' }</th>
}
<th className="shrink"><TimeIcon /> Created</th>
<th className="shrink"><TimeIcon /> Updated</th>
</tr>
</thead>
<tbody>
{articles?.map(article => {
let curIssueArticle
if (issueArticle) {
curIssueArticle = issueArticle
} else {
curIssueArticle = article.article
}
const mainHref =
itemType === 'article' || itemType === 'like' ? routes.article(article.slug) :
itemType === 'discussion' ? routes.issue(curIssueArticle.slug, article.number) :
itemType === 'topic' ? routes.topic(article.topicId, { sort: 'score' }) :
null
return <tr
key={getKey(itemType, article, issueArticle) }
>
{itemType === 'like' &&
<>
<td className="shrink right">{formatDate(article.likedByDate)}</td>
<td className="shrink ">
<UserLinkWithImage showUsername={false} user={article.likedBy} />
</td>
</>
}
{(itemType === 'topic') &&
<td className="shrink right bold">
<CustomLink href={mainHref}>{article.articleCount}</CustomLink>
</td>
}
{(() => {
const score = <>
{(itemType === 'topic')
? <></>
: <td className="shrink center like">
<LikeArticleButton {...{
article,
isIssue,
issueArticle: curIssueArticle,
loggedInUser,
showText: false,
}} />
</td>
}
</>
const title = <>
{isIssue &&
<td className="shrink bold">
<CustomLink href={mainHref}>
{issueArticle ? '' : curIssueArticle.slug }#{article.number}
</CustomLink>
</td>
}
<td className="expand bold">
<CustomLink href={mainHref} >
<span
className="ourbigbook-title"
dangerouslySetInnerHTML={{
__html: itemType === 'article' ? article.titleRenderWithScope : article.titleRender
}}
/>
</CustomLink>
</td>
</>
if (itemType === 'like') {
return <>{title}{score}</>
} else {
return <>{score}{title}</>
}
})()}
{showAuthor &&
<td className="shrink">
<UserLinkWithImage showUsername={false} user={article.author} />
</td>
}
{itemType === 'topic' &&
<th className="shrink left">
<CustomLink href={mainHref}>{article.topicId}</CustomLink>
</th>
}
{(itemType !== 'topic') &&
<td className="shrink right bold">
<CustomLink href={isIssue ? routes.issueComments(curIssueArticle.slug, article.number) : routes.articleIssues(article.slug)}>
{isIssue ? article.commentCount : article.issueCount}
</CustomLink>
</td>
}
<td className="shrink">{formatDate(article.createdAt)}</td>
<td className="shrink">{formatDate(article.updatedAt)}</td>
</tr>
})}
</tbody>
</table>
}
</div>
</div>
<div className="controls">
{pagination}
</div>
</>
}
</div>
{((itemType === 'article' || itemType === 'discussion') && hasUnlisted === true) &&
<p className="content-not-ourbigbook">
<UnlistedIcon />{' '}
{list === true
? <>
{`There are unlisted ${itemType === 'discussion' ? 'discussions' : 'articles'},`}
{' '}
<Link
href={routes.currentPageHref(router, { listed: TRI_ALL })}
>
also show them
</Link>
{' '}or{' '}
<Link
href={routes.currentPageHref(router, { listed: TRI_FALSE })}
>
only show them
</Link>.
</>
: <>
{list === false
? `Only unlisted ${itemType === 'discussion' ? 'discussions' : 'articles'} are being shown`
: `Unlisted ${itemType === 'discussion' ? 'discussions' : 'articles'} are being shown`},
{' '}
<Link
href={routes.currentPageHref(router, { listed: undefined })}
>
{`click here to show only listed ${itemType === 'discussion' ? 'discussions' : 'articles'}`}
</Link>.
</>
}
</p>
}
</div>
)
}
export default ArticleList;