.drone.yml

@@ -29,4 +29,3 @@ volumes:
 trigger:
   branch:
     - master
-    - develop

instalinks/links/views.py

@@ -16,27 +16,11 @@ def links_list(request):
     """
     Return JSON list of all links.
     """
-
+    if request.method == 'GET':
-    try:
+        all_links = Link.objects.all().values('id', 'url', 'watched')
-        page = int(request.GET.get('page', 1))
+        return JsonResponse(list(all_links), safe=False)
-        per_page = int(request.GET.get('per_page', 8))
+    else:
-    except ValueError:
+        return JsonResponse({'error': 'Method not allowed'}, status=405)
-        return JsonResponse({'error': 'Invalid page or per_page'}, status=400)
-
-    offset = (page - 1) * per_page
-    limit = offset + per_page
-
-    all_links = Link.objects.all().order_by('-id')  # latest first
-    total = all_links.count()
-    results = list(all_links[offset:limit].values('id', 'url', 'watched'))
-
-    return JsonResponse({
-        'results': results,
-        'total': total,
-        'page': page,
-        'per_page': per_page,
-        'pages': (total + per_page - 1) // per_page
-    })
 
 
 @csrf_exempt

static/links/main.js

@@ -3,65 +3,52 @@ const addLinkBtn = document.getElementById('addLinkBtn');
 const newLinksContainer = document.getElementById('newLinksContainer');
 const watchedLinksContainer = document.getElementById('watchedLinksContainer');
 
-const PER_PAGE = 8;
 let linksData = [];
-let currentPage = 1;
 
+// Fetch all links from the server
 function loadLinks() {
-  fetch('/api/links/?page=${currentPage}&per_page=${PER_PAGE}')
+  fetch('/api/links/')
     .then(res => res.json())
     .then(data => {
-      linksData = data.results;
+      linksData = data;  // store in a global variable
-      renderPaginatedList(linksData, newLinksContainer, false, data.page, data.pages);
+      renderLinks();
-      renderPaginatedList(linksData.filter(l => l.watched), watchedLinksContainer, true, data.page, data.pages);
     })
     .catch(err => console.error(err));
 }
 
-function renderPaginatedList(linkList, container, isWatched, page, totalPages) {
+// Render the links into the two tabs
-  container.innerHTML = '';
+function renderLinks() {
+  // separate them
+  const newLinks = linksData.filter(link => !link.watched);
+  const watchedLinks = linksData.filter(link => link.watched);
 
-  const row = document.createElement('div');
+  const newRow = document.createElement('div');
-  row.className = 'row gy-4';
+  newRow.className = 'row gy-4';
 
-  linkList
+  // Render "New" links
-    .filter(link => link.watched === isWatched)
+  newLinksContainer.innerHTML = '';
-    .forEach(link => {
+  newLinks.forEach(link => {
     const col = document.createElement('div');
-      col.className = 'col-12 col-sm-6 col-md-4 col-lg-3';
+    col.className = 'col-12 col-sm-6 col-md-4 col-lg-3'; // responsive columns
-      col.appendChild(createLinkElement(link, isWatched));
+    col.appendChild(createLinkElement(link, false));
-      row.appendChild(col);
+    newRow.appendChild(col);
   });
 
-  container.appendChild(row);
+  newLinksContainer.appendChild(newRow);
 
-  // Pagination controls
+  const watchedRow = document.createElement('div');
-  if (totalPages > 1) {
+  watchedRow.className = 'row gy-4';
-    const nav = document.createElement('div');
-    nav.className = 'd-flex justify-content-center mt-4 gap-2';
 
-    const prevBtn = document.createElement('button');
+  // Render "Watched" links
-    prevBtn.innerText = '← Previous';
+  watchedLinksContainer.innerHTML = '';
-    prevBtn.className = 'btn btn-outline-primary';
+  watchedLinks.forEach(link => {
-    prevBtn.disabled = page <= 1;
+    const col = document.createElement('div');
-    prevBtn.onclick = () => {
+    col.className = 'col-12 col-sm-6 col-md-4 col-lg-3';
-      currentPage--;
+    col.appendChild(createLinkElement(link, true));
-      loadLinks();
+    watchedRow.appendChild(col);
-    };
+  });
 
-    const nextBtn = document.createElement('button');
+  watchedLinksContainer.appendChild(watchedRow);
-    nextBtn.innerText = 'Next →';
-    nextBtn.className = 'btn btn-outline-primary';
-    nextBtn.disabled = page >= totalPages;
-    nextBtn.onclick = () => {
-      currentPage++;
-      loadLinks();
-    };
-
-    nav.appendChild(prevBtn);
-    nav.appendChild(nextBtn);
-    container.appendChild(nav);
-  }
 
   reinitializeInstagramEmbeds();
 }
@@ -108,8 +95,7 @@ function deleteLink(linkId) {
   .then(res => {
     if (res.ok) {
       linksData = linksData.filter(link => link.id !== linkId);
-      currentPage = 1;
+      renderLinks();
-      renderPaginatedList();
       reinitializeInstagramEmbeds();
     }
   })
@@ -135,7 +121,7 @@ function markLinkWatched(linkId) {
       if (idx !== -1) {
         linksData[idx] = updatedLink;
       }
-      renderPaginatedList();
+      renderLinks();
       reinitializeInstagramEmbeds();
     })
     .catch(err => console.error(err));
@@ -156,8 +142,7 @@ addLinkBtn.addEventListener('click', () => {
       // update local data
       linksData.push(addedLink);
       newLinkInput.value = '';
-      currentPage = 1;
+      renderLinks();
-      renderPaginatedList();
       reinitializeInstagramEmbeds();
     })
     .catch(err => console.error(err));