mark read backend

src/json_serialization/mod.rs

@@ -3,6 +3,7 @@ pub mod login;
 pub mod new_feed;
 pub mod new_feed_item;
 pub mod new_user;
+pub mod read_feed_item;
 pub mod readable;
 pub mod url;
 pub mod user;

src/json_serialization/read_feed_item.rs

@@ -0,0 +1,6 @@
+use serde_derive::Deserialize;
+
+#[derive(Deserialize)]
+pub struct ReadItem {
+    pub id: i32,
+}

src/reader/mark_read.rs

@@ -0,0 +1,8 @@
+use actix_web::{web, HttpRequest, HttpResponse, Responder};
+
+use crate::json_serialization::read_feed_item::ReadItem;
+
+pub async fn mark_read(_req: HttpRequest, path: web::Path<ReadItem>) -> impl Responder {
+    log::info!("Id: {}", path.id);
+    HttpResponse::Ok()
+}

src/reader/mod.rs

@@ -4,6 +4,7 @@ use crate::views::path::Path;
 mod add;
 pub mod feeds;
 mod get;
+mod mark_read;
 mod read;
 mod scraper;
 pub mod structs;
@@ -30,4 +31,8 @@ pub fn feed_factory(app: &mut web::ServiceConfig) {
         &base_path.define(String::from("/read")),
         actix_web::Route::to(web::post(), read::read),
     );
+    app.route(
+        &base_path.define(String::from("/read/{id}")),
+        actix_web::Route::to(web::put(), mark_read::mark_read),
+    );
 }

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>