mark read backend

vue/src/components/RssFeeds.vue

@@ -7,7 +7,6 @@ const showMessage = ref(false)
 const feeds = ref([]);
 const message = ref('')
 const buttonText = 'Sync'
-
 async function getReadable(feed, index) {
   try {
     const response = await axios.post("feeds/read", {
@@ -29,6 +28,23 @@ async function getReadable(feed, index) {
   }
 }
 
+async function markRead(id) {
+  try {
+    const response = await axios.put("feeds/read/" + id,
+      null,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'user-token': localStorage.getItem("user-token")
+        }
+      }
+    )
+    console.log(response.status)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 function showMessageForXSeconds(text, seconds) {
   message.value = text;
   showMessage.value = true;
@@ -86,14 +102,14 @@ function setupIntersectionObserver() {
   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
+    // 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);
-    });
+    })
   }
 }
 
@@ -102,20 +118,26 @@ function handleIntersection(entries) {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       console.log('Element is in sight');
-    } else {
+    } else if (initialLoad === true) {
+      console.log(entry.isIntersecting)
       // Element is out of sight
-      console.log('Element is out of sight ' + entry.intersectionRect.y);
-      if (entry.intersectionRect.y == 0) {
-        console.log(feeds.value[entry.target.id]);
-
+      if (entry.isVisible === false) {
+        console.log('Element is out of sight ' + entry.intersectionRatio);
+        //console.log(feeds.value[entry.target.id])
+        markRead(feeds.value[entry.target.id].id)
       }
     }
-  });
+  })
 }
 
-
+let initialLoad = false
 onMounted(() => {
-  fetchData();
+  initialLoad = false
+  fetchData().await
+  setTimeout(function () {
+    initialLoad = true
+    console.log('set to true')
+  }, 2000);
 });
 </script>