120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
const feedEl = document.getElementById('feed');
|
|
const sortSelect = document.getElementById('sort-select');
|
|
const userFilter = document.getElementById('user-filter');
|
|
|
|
const cookieName = 'linklog-feed-preferences';
|
|
|
|
function readPreferences() {
|
|
const cookie = document.cookie
|
|
.split('; ')
|
|
.find((row) => row.startsWith(`${cookieName}=`));
|
|
|
|
if (!cookie) {
|
|
return { sort: 'newest', user: '' };
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(decodeURIComponent(cookie.split('=')[1]));
|
|
} catch (error) {
|
|
return { sort: 'newest', user: '' };
|
|
}
|
|
}
|
|
|
|
function writePreferences(pref) {
|
|
const value = encodeURIComponent(JSON.stringify(pref));
|
|
document.cookie = `${cookieName}=${value}; path=/; max-age=31536000`;
|
|
}
|
|
|
|
function renderFeed(items) {
|
|
feedEl.innerHTML = '';
|
|
|
|
if (!items.length) {
|
|
feedEl.innerHTML = '<div class="link-item"><p>No links yet.</p></div>';
|
|
return;
|
|
}
|
|
|
|
items.forEach((item) => {
|
|
const article = document.createElement('article');
|
|
article.className = 'link-item';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'link-header';
|
|
|
|
const avatar = document.createElement('div');
|
|
avatar.className = 'avatar';
|
|
avatar.textContent = (item.user?.username || 'U').slice(0, 1).toUpperCase();
|
|
|
|
const userName = document.createElement('div');
|
|
userName.className = 'user-name';
|
|
userName.textContent = item.user?.username || 'unknown';
|
|
|
|
header.appendChild(avatar);
|
|
header.appendChild(userName);
|
|
|
|
const title = document.createElement('h2');
|
|
const link = document.createElement('a');
|
|
link.href = item.url;
|
|
link.target = '_blank';
|
|
link.rel = 'noopener noreferrer';
|
|
link.textContent = item.title || item.url;
|
|
title.appendChild(link);
|
|
|
|
const comment = document.createElement('div');
|
|
comment.className = 'comment';
|
|
comment.textContent = item.comment || 'No comment provided';
|
|
|
|
const meta = document.createElement('div');
|
|
meta.className = 'meta';
|
|
meta.textContent = item.created_at || 'updated recently';
|
|
|
|
article.appendChild(header);
|
|
article.appendChild(title);
|
|
article.appendChild(comment);
|
|
article.appendChild(meta);
|
|
feedEl.appendChild(article);
|
|
});
|
|
}
|
|
|
|
async function loadFeed() {
|
|
const routeUser = document.body.dataset.userFilter;
|
|
const endpoint = routeUser
|
|
? `/api/public/feed/${encodeURIComponent(routeUser)}`
|
|
: '/api/public/feed';
|
|
const response = await fetch(endpoint);
|
|
const data = await response.json();
|
|
|
|
let items = data || [];
|
|
const pref = readPreferences();
|
|
|
|
if (pref.user && !routeUser) {
|
|
items = items.filter((item) => (item.user?.username || '').toLowerCase() === pref.user.toLowerCase());
|
|
}
|
|
|
|
if (pref.sort === 'oldest') {
|
|
items = [...items].reverse();
|
|
}
|
|
|
|
renderFeed(items);
|
|
}
|
|
|
|
function syncPreferences() {
|
|
const pref = readPreferences();
|
|
sortSelect.value = pref.sort;
|
|
userFilter.value = pref.user;
|
|
|
|
sortSelect.addEventListener('change', (event) => {
|
|
const next = { ...readPreferences(), sort: event.target.value };
|
|
writePreferences(next);
|
|
loadFeed();
|
|
});
|
|
|
|
userFilter.addEventListener('input', (event) => {
|
|
const next = { ...readPreferences(), user: event.target.value.trim() };
|
|
writePreferences(next);
|
|
loadFeed();
|
|
});
|
|
}
|
|
|
|
syncPreferences();
|
|
loadFeed();
|