Start adding pagniation to timelines

5 files changed, 48 insertions, 47 deletions

diff --git a/activities/views/timelines.py b/activities/views/timelines.py
index 65b6c49..e8e74ed 100644
--- a/activities/views/timelines.py
+++ b/activities/views/timelines.py
@@ -2,7 +2,7 @@ from django import forms
 from django.shortcuts import redirect
 from django.template.defaultfilters import linebreaks_filter
 from django.utils.decorators import method_decorator
-from django.views.generic import FormView, TemplateView
+from django.views.generic import FormView, ListView
 
 from activities.models import Post, PostInteraction, TimelineEvent
 from users.decorators import identity_required
@@ -57,47 +57,46 @@ class Home(FormView):
         return redirect(".")
 
 
-class Local(TemplateView):
+class Local(ListView):
 
     template_name = "activities/local.html"
+    extra_context = {"current_page": "local"}
+    paginate_by = 50
 
-    def get_context_data(self):
-        context = super().get_context_data()
-        context["posts"] = (
+    def get_queryset(self):
+        return (
             Post.objects.filter(visibility=Post.Visibilities.public, author__local=True)
             .select_related("author")
             .prefetch_related("attachments")
             .order_by("-created")[:50]
         )
-        context["current_page"] = "local"
-        return context
 
 
 @method_decorator(identity_required, name="dispatch")
-class Federated(TemplateView):
+class Federated(ListView):
 
     template_name = "activities/federated.html"
+    extra_context = {"current_page": "federated"}
+    paginate_by = 50
 
-    def get_context_data(self):
-        context = super().get_context_data()
-        context["posts"] = (
+    def get_queryset(self):
+        return (
             Post.objects.filter(visibility=Post.Visibilities.public)
             .select_related("author")
             .prefetch_related("attachments")
             .order_by("-created")[:50]
         )
-        context["current_page"] = "federated"
-        return context
 
 
 @method_decorator(identity_required, name="dispatch")
-class Notifications(TemplateView):
+class Notifications(ListView):
 
     template_name = "activities/notifications.html"
+    extra_context = {"current_page": "notifications"}
+    paginate_by = 50
 
-    def get_context_data(self):
-        context = super().get_context_data()
-        context["events"] = (
+    def get_queryset(self):
+        return (
             TimelineEvent.objects.filter(
                 identity=self.request.identity,
                 type__in=[
@@ -110,5 +109,3 @@ class Notifications(TemplateView):
             .order_by("-created")[:50]
             .select_related("subject_post", "subject_post__author", "subject_identity")
         )
-        context["current_page"] = "notifications"
-        return context
diff --git a/static/css/style.css b/static/css/style.css
index 774d8bb..83ea194 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -559,8 +559,8 @@ form p+.buttons {
     margin: 5px 10px 5px 0;
 }
 
-form button,
-form .button {
+button,
+.button {
     padding: 5px 10px;
     margin: 0 0 0 5px;
     border-radius: 5px;
@@ -572,39 +572,39 @@ form .button {
     display: inline-block;
 }
 
-form button.delete,
-form .button.delete {
+button.delete,
+.button.delete {
     background: var(--color-delete);
 }
 
-form button.secondary,
-form .button.secondary {
+button.secondary,
+.button.secondary {
     background: var(--color-bg-menu);
 }
 
-form button.toggle,
-form .button.toggle {
+button.toggle,
+.button.toggle {
     background: var(--color-bg-main);
 }
 
-form button.left,
-form .button.left {
+button.left,
+.button.left {
     float: left;
     margin: 0 5px 0 0;
 }
 
-form button.toggle.enabled,
-form .button.toggle.enabled {
+button.toggle.enabled,
+.button.toggle.enabled {
     background: var(--color-highlight);
 }
 
-form button:hover,
-form .button:hover {
+button:hover,
+.button:hover {
     border: 3px solid rgba(255, 255, 255, 0.3);
 }
 
-.right-column form button,
-.right-column form .button {
+.right-column button,
+.right-column .button {
     padding: 2px 6px;
 }
 
@@ -810,6 +810,10 @@ h1.identity small {
     margin-right: 4px;
 }
 
+.load-more {
+    margin: 10px 0;
+    text-align: center;
+}
 
 
 @media (max-width: 920px) or (display-mode: standalone) {
diff --git a/templates/activities/federated.html b/templates/activities/federated.html
index 4b57b9d..9e61b6b 100644
--- a/templates/activities/federated.html
+++ b/templates/activities/federated.html
@@ -1,11 +1,3 @@
-{% extends "base.html" %}
+{% extends "activities/local.html" %}
 
 {% block title %}Federated Timeline{% endblock %}
-
-{% block content %}
-    {% for post in posts %}
-        {% include "activities/_post.html" %}
-    {% empty %}
-        No posts yet.
-    {% endfor %}
-{% endblock %}
diff --git a/templates/activities/local.html b/templates/activities/local.html
index 79ce9a3..b6f246e 100644
--- a/templates/activities/local.html
+++ b/templates/activities/local.html
@@ -3,9 +3,13 @@
 {% block title %}Local Timeline{% endblock %}
 
 {% block content %}
-    {% for post in posts %}
+    {% for post in page_obj %}
         {% include "activities/_post.html" %}
     {% empty %}
         No posts yet.
     {% endfor %}
+
+    {% if page_obj.has_next %}
+        <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+    {% endif %}
 {% endblock %}
diff --git a/templates/activities/notifications.html b/templates/activities/notifications.html
index 9bf66bb..a9c51be 100644
--- a/templates/activities/notifications.html
+++ b/templates/activities/notifications.html
@@ -3,9 +3,13 @@
 {% block title %}Notifications{% endblock %}
 
 {% block content %}
-    {% for event in events %}
+    {% for event in page_obj %}
         {% include "activities/_event.html" %}
     {% empty %}
-        No events yet.
+        No notirications yet.
     {% endfor %}
+
+    {% if page_obj.has_next %}
+        <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+    {% endif %}
 {% endblock %}