Several pagination improvements (#170)

Home/Notification gets pagination, Follows becomes ListView

activities/views/follows.py

@@ -1,33 +1,39 @@
+from django.db.models import Q
 from django.utils.decorators import method_decorator
-from django.views.generic import TemplateView
+from django.views.generic import ListView
 
 from users.decorators import identity_required
-from users.models import FollowStates
+from users.models import Follow, FollowStates
 
 
 @method_decorator(identity_required, name="dispatch")
-class FollowsPage(TemplateView):
+class Follows(ListView):
     """
     Shows followers/follows.
     """
 
     template_name = "activities/follows.html"
+    extra_context = {
+        "section": "follows",
+    }
+    paginate_by = 50
+
+    def get_queryset(self):
+        return Follow.objects.filter(
+            Q(source=self.request.identity) | Q(target=self.request.identity),
+            state__in=FollowStates.group_active(),
+        ).order_by("-created")
 
     def get_context_data(self):
-        # Gather all identities with a following relationship with us
-        identities = {}
-        for outbound_follow in self.request.identity.outbound_follows.filter(
-            state__in=FollowStates.group_active()
-        ):
-            identities.setdefault(outbound_follow.target, {})[
-                "outbound"
-            ] = outbound_follow
-        for inbound_follow in self.request.identity.inbound_follows.filter(
-            state__in=FollowStates.group_active()
-        ):
-            identities.setdefault(inbound_follow.source, {})["inbound"] = inbound_follow
-
-        return {
-            "section": "follows",
-            "identities": sorted(identities.items(), key=lambda i: i[0].username),
-        }
+        context = super().get_context_data()
+        identities = []
+        for follow in context["page_obj"].object_list:
+            if follow.source == self.request.identity:
+                identity = follow.target
+                follow_type = "outbound"
+            else:
+                identity = follow.source
+                follow_type = "inbound"
+            identities.append((identity, follow_type))
+        context["page_obj"].object_list = identities
+        return context

activities/views/timelines.py

@@ -1,3 +1,4 @@
+from django.core.paginator import Paginator
 from django.shortcuts import get_object_or_404, redirect
 from django.template.defaultfilters import linebreaks_filter
 from django.utils.decorators import method_decorator
@@ -22,20 +23,23 @@ class Home(FormView):
 
     def get_context_data(self):
         context = super().get_context_data()
-        context["events"] = list(
+        events = (
             TimelineEvent.objects.filter(
                 identity=self.request.identity,
                 type__in=[TimelineEvent.Types.post, TimelineEvent.Types.boost],
             )
             .select_related("subject_post", "subject_post__author")
             .prefetch_related("subject_post__attachments", "subject_post__mentions")
-            .order_by("-created")[:50]
+            .order_by("-created")
         )
         context["interactions"] = PostInteraction.get_event_interactions(
-            context["events"], self.request.identity
+            events, self.request.identity
         )
         context["current_page"] = "home"
         context["allows_refresh"] = True
+        paginator = Paginator(events, 50)
+        page_number = self.request.GET.get("page")
+        context["page_obj"] = paginator.get_page(page_number)
         return context
 
     def form_valid(self, form):
@@ -74,7 +78,7 @@ class Tag(ListView):
             .tagged_with(self.hashtag)
             .select_related("author")
             .prefetch_related("attachments", "mentions")
-            .order_by("-created")[:50]
+            .order_by("-created")
         )
 
     def get_context_data(self):
@@ -103,7 +107,7 @@ class Local(ListView):
             Post.objects.local_public()
             .select_related("author", "author__domain")
             .prefetch_related("attachments", "mentions", "emojis")
-            .order_by("-created")[:50]
+            .order_by("-created")
         )
 
     def get_context_data(self):
@@ -131,7 +135,7 @@ class Federated(ListView):
             )
             .select_related("author", "author__domain")
             .prefetch_related("attachments", "mentions", "emojis")
-            .order_by("-created")[:50]
+            .order_by("-created")
         )
 
     def get_context_data(self):
@@ -175,7 +179,7 @@ class Notifications(ListView):
                 types.append(type)
         return (
             TimelineEvent.objects.filter(identity=self.request.identity, type__in=types)
-            .order_by("-created")[:50]
+            .order_by("-created")
             .select_related(
                 "subject_post",
                 "subject_post__author",

static/css/style.css

@@ -1089,6 +1089,12 @@ table.metadata td .emoji {
     margin-right: 4px;
 }
 
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 1em;
+}
+
 .load-more {
     margin: 10px 0;
     text-align: center;

takahe/urls.py

@@ -22,7 +22,7 @@ urlpatterns = [
     path("explore/tags/", explore.ExploreTag.as_view(), name="explore-tag"),
     path(
         "follows/",
-        follows.FollowsPage.as_view(),
+        follows.Follows.as_view(),
         name="follows",
     ),
     # Settings views

templates/activities/follows.html

@@ -4,17 +4,17 @@
 
 {% block content %}
     <section class="icon-menu">
-        {% for identity, details in identities %}
+        {% for identity, follow_type in page_obj %}
             <a class="option" href="{{ identity.urls.view }}">
                 <img src="{{ identity.local_icon_url.relative }}">
                 <span class="handle">
                     {{ identity.html_name_or_handle }}
                     <small>@{{ identity.handle }}</small>
                 </span>
-                {% if details.outbound %}
+                {% if follow_type == "outbound" %}
                     <span class="pill">Following</span>
                 {% endif %}
-                {% if details.inbound %}
+                {% if follow_type == "inbound" %}
                     <span class="pill">Follows You</span>
                 {% endif %}
             </a>
@@ -22,4 +22,14 @@
             <p class="option empty">You have no follows.</p>
         {% endfor %}
     </section>
+
+    <div class="pagination">
+        {% if page_obj.has_previous %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.previous_page_number }}">Previous Page</a></div>
+        {% endif %}
+
+        {% if page_obj.has_next %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+        {% endif %}
+    </div>
 {% endblock %}

templates/activities/home.html

@@ -4,7 +4,7 @@
 {% block title %}Home{% endblock %}
 
 {% block content %}
-    {% for event in events %}
+    {% for event in page_obj %}
         {% if event.type == "post" %}
             {% include "activities/_post.html" with post=event.subject_post %}
         {% elif event.type == "boost" %}
@@ -21,4 +21,14 @@
     {% empty %}
         Nothing to show yet.
     {% endfor %}
+
+    <div class="pagination">
+        {% if page_obj.has_previous %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.previous_page_number }}">Previous Page</a></div>
+        {% endif %}
+
+        {% if page_obj.has_next %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+        {% endif %}
+    </div>
 {% endblock %}

templates/activities/local.html

@@ -9,7 +9,13 @@
         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 %}
+    <div class="pagination">
+        {% if page_obj.has_previous %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.previous_page_number }}">Previous Page</a></div>
+        {% endif %}
+
+        {% if page_obj.has_next %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+        {% endif %}
+    </div>
 {% endblock %}

templates/activities/notifications.html

@@ -32,7 +32,13 @@
         No notifications 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 %}
+    <div class="pagination">
+        {% if page_obj.has_previous %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.previous_page_number }}">Previous Page</a></div>
+        {% endif %}
+
+        {% if page_obj.has_next %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+        {% endif %}
+    </div>
 {% endblock %}

templates/activities/tag.html

@@ -10,7 +10,13 @@
         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 %}
+    <div class="pagination">
+        {% if page_obj.has_previous %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.previous_page_number }}">Previous Page</a></div>
+        {% endif %}
+
+        {% if page_obj.has_next %}
+            <div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
+        {% endif %}
+    </div>
 {% endblock %}