From 79f8ca6ecfe57b5c38c0a6f703208089331bb5b7 Mon Sep 17 00:00:00 2001
From: "oleg.vodyanov91@gmail.com" <o.vodianov@hh.ru>
Date: Wed, 23 Apr 2025 15:24:08 +0400
Subject: [PATCH] add_separation

---
 instalinks/links/views.py |  4 ++-
 static/links/main.js      | 59 ++++++++++++++++++++++++++-------------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/instalinks/links/views.py b/instalinks/links/views.py
index 1036f5b..daec22c 100644
--- a/instalinks/links/views.py
+++ b/instalinks/links/views.py
@@ -20,6 +20,7 @@ def links_list(request):
     try:
         page = int(request.GET.get('page', 1))
         per_page = int(request.GET.get('per_page', 8))
+        watched = bool(request.GET.get('watched', ""))
     except ValueError:
         return JsonResponse({'error': 'Invalid page or per_page'}, status=400)
 
@@ -28,7 +29,8 @@ def links_list(request):
 
     all_links = Link.objects.all().order_by('-id')  # latest first
     total = all_links.count()
-    results = list(all_links[offset:limit].values('id', 'url', 'watched'))
+    limit_results = list(all_links[offset:limit].values('id', 'url', 'watched'))
+    results = filter(lambda row: row['watched'] == str(watched), limit_results)
 
     return JsonResponse({
         'results': results,
diff --git a/static/links/main.js b/static/links/main.js
index 1c3a950..7e12002 100644
--- a/static/links/main.js
+++ b/static/links/main.js
@@ -4,6 +4,7 @@ const newLinksContainer = document.getElementById('newLinksContainer');
 const watchedLinksContainer = document.getElementById('watchedLinksContainer');
 
 const PER_PAGE = 8;
+const WATCHED = false;
 let currentPage = 1;
 let linksData = [];
 
@@ -14,32 +15,50 @@ function extractReelId(url) {
 }
 
 function loadLinks() {
+  const cacheKeyWatched = `links_cache_page_${currentPage}_per_${PER_PAGE}&watched='true'`;
+  const cachedWatched = localStorage.getItem(cacheKeyWatched);
+
   const cacheKey = `links_cache_page_${currentPage}_per_${PER_PAGE}`;
   const cached = localStorage.getItem(cacheKey);
 
+  if (cachedWatched) {
+    const data = JSON.parse(cachedWatched);
+    linksData = data.results;
+    renderPaginatedList(
+      linksData,watchedLinksContainer,true,data.page,data.pages
+    );
+  }
+
   if (cached) {
     const data = JSON.parse(cached);
     linksData = data.results;
     renderPaginatedList(
-      linksData.filter(l => !l.watched),newLinksContainer,false,data.page,data.pages
-    );
-    renderPaginatedList(
-      linksData.filter(l => l.watched),watchedLinksContainer,true,data.page,data.pages
+      linksData,watchedLinksContainer,true,data.page,data.pages
     );
   }
 
   // Always fetch fresh data in the background
+  fetch(`/api/links/?page=${currentPage}&per_page=${PER_PAGE}&watched='true'`)
+    .then(response => response.json())
+    .then(data => {
+      localStorage.setItem(cacheKeyWatched, JSON.stringify(data));
+      if (!cachedWatched) {
+        linksData = data.results;
+        renderPaginatedList(
+          linksData,watchedLinksContainer,true,data.page,data.pages
+        );
+      }
+    })
+    .catch(err => console.error(err));
+
   fetch(`/api/links/?page=${currentPage}&per_page=${PER_PAGE}`)
-    .then(res => res.json())
+    .then(response => response.json())
     .then(data => {
       localStorage.setItem(cacheKey, JSON.stringify(data));
       if (!cached) {
         linksData = data.results;
         renderPaginatedList(
-          linksData.filter(l => !l.watched),newLinksContainer,false,data.page,data.pages
-        );
-        renderPaginatedList(
-          linksData.filter(l => l.watched),watchedLinksContainer,true,data.page,data.pages
+          linksData,newLinksContainer,false,data.page,data.pages
         );
       }
     })
@@ -68,11 +87,11 @@ function renderPaginatedList(linkList, container, isWatched, page, totalPages) {
     const navigation = document.createElement('div');
     navigation.className = 'd-flex justify-content-center mt-4 gap-2';
 
-    const prevBtn = document.createElement('button');
-    prevBtn.innerText = '← Previous';
-    prevBtn.className = 'btn btn-outline-primary';
-    prevBtn.disabled = page <= 1;
-    prevBtn.onclick = () => {
+    const previousBtn = document.createElement('button');
+    previousBtn.innerText = '← Previous';
+    previousBtn.className = 'btn btn-outline-primary';
+    previousBtn.disabled = page <= 1;
+    previousBtn.onclick = () => {
       currentPage--;
       loadLinks();
     };
@@ -86,7 +105,7 @@ function renderPaginatedList(linkList, container, isWatched, page, totalPages) {
       loadLinks();
     };
 
-    navigation.appendChild(prevBtn);
+    navigation.appendChild(previousBtn);
     navigation.appendChild(nextBtn);
     container.appendChild(navigation);
   }
@@ -152,8 +171,8 @@ function deleteLink(linkId) {
   fetch(`/api/links/${linkId}/delete/`, {
     method: 'DELETE'
   })
-  .then(res => {
-    if (res.ok) {
+  .then(response => {
+    if (response.ok) {
       linksData = linksData.filter(link => link.id !== linkId);
       currentPage = 1;
       loadLinks();
@@ -175,10 +194,10 @@ function markLinkWatched(linkId) {
   fetch(`/api/links/${linkId}/watched/`, {
     method: 'PATCH'
   })
-    .then(res => res.json())
+    .then(response => response.json())
     .then(updatedLink => {
       // Update the local array
-      const idx = linksData.findIndex(l => l.id === updatedLink.id);
+      const idx = linksData.findIndex(link => link.id === updatedLink.id);
       if (idx !== -1) {
         linksData[idx] = updatedLink;
       }
@@ -198,7 +217,7 @@ addLinkBtn.addEventListener('click', () => {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ url: newUrl })
   })
-    .then(res => res.json())
+    .then(response => response.json())
     .then(addedLink => {
       // update local data
       linksData.push(addedLink);