list-hn-polls-separately.js

import {format} from 'timeago.js';

import {getUrlParams} from '../libs/utils';

function navbarLink() {
	const navbar = document.querySelector('span.pagetop');
	if (!navbar) {
		return false;
	}

	const submitLink = navbar.querySelector('a[href="submit"]');
	if (!submitLink) {
		return false;
	}

	const pollsLink = document.createElement('a');
	const separator = document.createTextNode(' | ');

	pollsLink.innerText = 'polls';
	pollsLink.href = '/#polls';

	navbar.insertBefore(pollsLink, submitLink);
	navbar.insertBefore(separator, submitLink);

	return pollsLink;
}

async function getPollItems(page) {
	const order = getUrlParams('order') === 'score' ? 'score' : undefined;

	const rawResults = await fetch(`https://hn.algolia.com/api/v1/${order ? 'search' : 'search_by_date'}?tags=poll&page=${page}&hitsPerPage=30`)
		.then(res => res.json())
		.then(obj => obj.hits);

	const results = [];
	for (const result of rawResults) {
		results.push({
			id: result.objectID,
			author: result.author,
			comments: result.num_comments + ' comment' + (result.num_comments === 1 ? '' : 's'),
			points: result.points + ' point' + (result.points === 1 ? '' : 's'),
			title: result.title,
			date: format(result.created_at)
		});
	}

	return results;
}

async function setPollItems() {
	const itemlistTable = document.querySelector('table.itemlist > tbody');
	const stories = itemlistTable.querySelectorAll(':scope > tr');
	const [moreSpace, moreButton] = [...stories].slice(-2);

	for (const row of stories) {
		row.remove();
	}

	const pageNumber = Number(getUrlParams('p'));
	const realPageNumber = pageNumber === 0 ? 1 : pageNumber;

	const order = getUrlParams('order') === 'score' ? 'score' : undefined;
	const orderUrl = `/?p=${realPageNumber}${order ? '' : '&order=score'}#polls`;
	itemlistTable.innerHTML = `
		<tr style="height:6px"></tr>
		<tr>
			<td colspan="2"></td>
			<td>
			Polls are listed in ${order ? 'order of \'most points\'' : 'reverse chronological order'}.
			<a href='${orderUrl}'><u>Order by ${order ? 'date' : 'score'}</u>.</a>
			<br>You can also <a href="/newpoll"><u>create a new poll</u></a>.
			</td>
		</tr>
		<tr style="height:12px"></tr>
	`;

	const items = await getPollItems(realPageNumber - 1);
	items.forEach((item, index) => {
		itemlistTable.innerHTML += `
			<tr class='athing' id='${item.id}'>
				<td align="right" valign="top" class="title">
					<span class="rank">${((realPageNumber - 1) * 30) + index + 1}.</span>
				</td>
				<td valign="top" class="votelinks nosee">
					<center>
							<div class="votearrow" title="upvote"></div>
						</a>
					</center>
				</td>
				<td class="title">
					<a href="item?id=${item.id}" class="storylink">${item.title}</a>
				</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td class="subtext">
					<span class="score" id="score_${item.id}">${item.points}</span>
					by
					<a href="user?id=${item.author}" class="hnuser">${item.author}</a>
					<span class="age"><a href="item?id=${item.id}">${item.date}</a></span>
					|
					<a href="https://hn.algolia.com/?query=${encodeURI(item.title)}&sort=byDate&dateRange=all&type=poll&storyText=false&prefix&page=0" class="hnpast">past</a>
					|
					<a href="https://www.google.com/search?q=${encodeURI(item.title)}">web</a>
					|
					<a href="item?id=${item.id}">${item.comments}</a>
				</td>
			</tr>
			<tr class="spacer" style="height:5px"></tr>
		`;
	});

	moreButton.querySelector('a').href = `/?p=${realPageNumber + 1}#polls`;
	itemlistTable.append(moreSpace, moreButton);

	document.title = 'Polls | Hacker News';
}

async function init(metadata) {
	const pollsLink = navbarLink();

	if (metadata.path === '/') {
		if (window.location.hash === '#polls') {
			pollsLink.style.color = '#ffffff';
			await setPollItems();
		} else {
			window.addEventListener('hashchange', () => {
				if (window.location.hash === '#polls') {
					window.location.reload();
				}
			});
		}
	}

	return Boolean(pollsLink);
}

const details = {
	id: 'list-hn-polls-separately',
	pages: {
		include: ['*'],
		exclude: []
	},
	loginRequired: false,
	awaitInit: true,
	init
};

export default details;