hamburger menu, article view

vue/src/composables/useFeeds.js

@@ -0,0 +1,211 @@
+import { ref, unref, nextTick } from 'vue';
+import axios from 'axios';
+import { Readability } from '@mozilla/readability';
+
+// Module-level state — declared outside useFeeds() so every caller shares the
+// same singleton refs (a Pinia-free "store" for the feed list and its UI state).
+const showMessage = ref(false)
+const feeds = ref([]);
+const message = ref('')
+const showModal = ref(false)
+const viewMode = ref('list') // 'list' | 'article' — toggled from the hamburger menu
+const currentIndex = ref(0)
+
+let observer; // Declare observer outside the setup function
+let initialLoad = false
+
+function authHeaders() {
+  return {
+    headers: {
+      'Content-Type': 'application/json',
+      'user-token': localStorage.getItem("user-token")
+    }
+  }
+}
+
+// Some feeds (e.g. Deutsche Welle) ship <img> tags whose `src`/`data-url`
+// contain an unresolved `${formatId}` template that their own frontend fills
+// in from the sibling `data-format` attribute before loading — verbatim they
+// 404. Resolve them the same way here, or drop the <img> if we can't, so
+// Readability doesn't carry a broken image into the parsed article.
+function resolveTemplatedImage(img) {
+  const placeholder = '${formatId}'
+  const format = img.getAttribute('data-format')
+  const dataUrl = img.getAttribute('data-url')
+  if (format && dataUrl && dataUrl.includes(placeholder)) {
+    img.setAttribute('src', dataUrl.replace(placeholder, format))
+  } else if (/[{]|%7[bB]/.test(img.getAttribute('src') ?? '')) {
+    img.remove()
+  }
+}
+
+function showMessageForXSeconds(text, seconds) {
+  message.value = text;
+  showMessage.value = true;
+
+  // Set a timeout to hide the message after x seconds
+  setTimeout(() => {
+    showMessage.value = false;
+    message.value = '';
+  }, seconds * 1000); // Convert seconds to milliseconds
+}
+
+async function getReadable(feed, index) {
+  try {
+    const response = await axios.post("/api/v1/article/read", {
+      url: feed.url
+    }, authHeaders())
+
+    const doc = new DOMParser().parseFromString(response.data.content, 'text/html');
+    // Scraped articles often contain image/link URLs that are relative to the
+    // source site. A <base> tag makes the browser (and Readability) resolve
+    // them against the article's original URL instead of our own origin.
+    const base = doc.createElement('base');
+    base.setAttribute('href', feed.url);
+    doc.head.prepend(base);
+    doc.querySelectorAll('img').forEach(resolveTemplatedImage);
+    const article = new Readability(doc).parse();
+    feeds.value[index].content = article.content;
+    feeds.value[index].readable = true;
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    showMessageForXSeconds(error, 5)
+  }
+}
+
+async function markRead(id) {
+  try {
+    const response = await axios.put("/api/v1/article/read/" + id, null, authHeaders())
+    console.log(response.status)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const fetchData = async () => {
+  const user_id = localStorage.getItem("user-id")
+  try {
+    const response = await axios.get("/api/v1/article/get/" + user_id, authHeaders());
+    const items = [];
+    response.data.feeds.forEach(feed => {
+      feed.items.forEach(item => items.push({ ...item, feedTitle: feed.title }));
+    });
+    // timestamps are zero-padded "YYYY-MM-DD HH:MM:SS" strings, so a plain
+    // lexicographic comparison sorts them chronologically.
+    items.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+    feeds.value = items;
+    await nextTick();
+    setupIntersectionObserver();
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    showMessageForXSeconds(error, 5)
+  }
+};
+
+async function sync() {
+  try {
+    const response = await axios.post('/api/v1/article/sync', {
+      user_id: parseInt(localStorage.getItem("user-id"))
+    }, authHeaders())
+
+    if (response.status == 200) {
+      showMessageForXSeconds('Sync successful.', 5)
+    }
+    fetchData();
+  } catch (error) {
+    console.error('Error sync', error)
+    showMessageForXSeconds(error, 5)
+  }
+}
+
+function setupIntersectionObserver() {
+  if (observer) {
+    observer.disconnect();
+  }
+
+  observer = new IntersectionObserver(handleIntersection, {
+    root: null, // Use the viewport as the root
+    rootMargin: '0px',
+    // threshold: 0.5, // Fire the callback when at least 50% of the element is visible
+  });
+
+  const observedDivs = document.querySelectorAll(".observe");
+  if (observedDivs.length > 0) {
+    observedDivs.forEach(observedDiv => {
+      observer.observe(observedDiv);
+    })
+  }
+}
+
+async function handleIntersection(entries) {
+  // The callback function for when the target element enters or exits the viewport
+  for (const entry of entries) {
+    // An article that has scrolled above the viewport (not intersecting,
+    // bounding box above the top edge) has been read — mark it and remove it.
+    if (initialLoad === true && !entry.isIntersecting && entry.boundingClientRect.y < 0) {
+      await markRead(feeds.value[entry.target.id].id)
+      removeFeed(entry.target.id)
+      document.getElementById(0)?.scrollIntoView()
+    }
+  }
+}
+
+function removeFeed(index) {
+  const array = unref(feeds);
+  array.splice(index, 1);
+}
+
+function setInitialLoad(value) {
+  initialLoad = value
+}
+
+function markCurrentArticleRead() {
+  const feed = feeds.value[currentIndex.value]
+  // Marking read here (rather than via removeFeed, as the scroll-based list
+  // view does) keeps the array stable so currentIndex stays valid while paging.
+  if (feed) markRead(feed.id)
+}
+
+function toggleViewMode() {
+  viewMode.value = viewMode.value === 'list' ? 'article' : 'list'
+  if (viewMode.value === 'article') {
+    currentIndex.value = 0
+    markCurrentArticleRead()
+  }
+}
+
+function nextArticle() {
+  if (currentIndex.value < feeds.value.length - 1) {
+    currentIndex.value += 1
+    markCurrentArticleRead()
+  }
+}
+
+function prevArticle() {
+  if (currentIndex.value > 0) {
+    currentIndex.value -= 1
+    markCurrentArticleRead()
+  }
+}
+
+export function useFeeds() {
+  return {
+    feeds,
+    showMessage,
+    message,
+    showModal,
+    viewMode,
+    currentIndex,
+    toggleViewMode,
+    nextArticle,
+    prevArticle,
+    fetchData,
+    sync,
+    getReadable,
+    markRead,
+    showMessageForXSeconds,
+    setupIntersectionObserver,
+    removeFeed,
+    setInitialLoad,
+  }
+}