instalinks/links/views.py

@@ -20,7 +20,6 @@ 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)
 
@@ -29,8 +28,7 @@ def links_list(request):
 
     all_links = Link.objects.all().order_by('-id')  # latest first
     total = all_links.count()
-    limit_results = list(all_links[offset:limit].values('id', 'url', 'watched'))
-    results = filter(lambda row: row['watched'] == str(watched), limit_results)
+    results = list(all_links[offset:limit].values('id', 'url', 'watched'))
 
     return JsonResponse({
         'results': results,

static/links/main.js

@@ -4,7 +4,6 @@ const newLinksContainer = document.getElementById('newLinksContainer');
 const watchedLinksContainer = document.getElementById('watchedLinksContainer');
 
 const PER_PAGE = 8;
-const WATCHED = false;
 let currentPage = 1;
 let linksData = [];
 
@@ -15,50 +14,32 @@ 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,watchedLinksContainer,true,data.page,data.pages
+      linksData.filter(l => !l.watched),newLinksContainer,false,data.page,data.pages
+    );
+    renderPaginatedList(
+      linksData.filter(l => l.watched),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(response => response.json())
+    .then(res => res.json())
     .then(data => {
       localStorage.setItem(cacheKey, JSON.stringify(data));
       if (!cached) {
         linksData = data.results;
         renderPaginatedList(
-          linksData,newLinksContainer,false,data.page,data.pages
+          linksData.filter(l => !l.watched),newLinksContainer,false,data.page,data.pages
+        );
+        renderPaginatedList(
+          linksData.filter(l => l.watched),watchedLinksContainer,true,data.page,data.pages
         );
       }
     })
@@ -87,11 +68,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 previousBtn = document.createElement('button');
-    previousBtn.innerText = '← Previous';
-    previousBtn.className = 'btn btn-outline-primary';
-    previousBtn.disabled = page <= 1;
-    previousBtn.onclick = () => {
+    const prevBtn = document.createElement('button');
+    prevBtn.innerText = '← Previous';
+    prevBtn.className = 'btn btn-outline-primary';
+    prevBtn.disabled = page <= 1;
+    prevBtn.onclick = () => {
       currentPage--;
       loadLinks();
     };
@@ -105,7 +86,7 @@ function renderPaginatedList(linkList, container, isWatched, page, totalPages) {
       loadLinks();
     };
 
-    navigation.appendChild(previousBtn);
+    navigation.appendChild(prevBtn);
     navigation.appendChild(nextBtn);
     container.appendChild(navigation);
   }
@@ -171,8 +152,8 @@ function deleteLink(linkId) {
   fetch(`/api/links/${linkId}/delete/`, {
     method: 'DELETE'
   })
-  .then(response => {
-    if (response.ok) {
+  .then(res => {
+    if (res.ok) {
       linksData = linksData.filter(link => link.id !== linkId);
       currentPage = 1;
       loadLinks();
@@ -194,10 +175,10 @@ function markLinkWatched(linkId) {
   fetch(`/api/links/${linkId}/watched/`, {
     method: 'PATCH'
   })
-    .then(response => response.json())
+    .then(res => res.json())
     .then(updatedLink => {
       // Update the local array
-      const idx = linksData.findIndex(link => link.id === updatedLink.id);
+      const idx = linksData.findIndex(l => l.id === updatedLink.id);
       if (idx !== -1) {
         linksData[idx] = updatedLink;
       }
@@ -217,7 +198,7 @@ addLinkBtn.addEventListener('click', () => {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ url: newUrl })
   })
-    .then(response => response.json())
+    .then(res => res.json())
     .then(addedLink => {
       // update local data
       linksData.push(addedLink);