From 41c761512d8ce026698582ad0b6ec76942f011cf Mon Sep 17 00:00:00 2001
From: Leo Lim <reverileo@gmail.com>
Date: Wed, 30 Oct 2024 15:46:01 -0400
Subject: [PATCH] feat: fix club announcements for 15+ announcements

---
 intranet/apps/dashboard/views.py              |  6 +-----
 intranet/static/css/dashboard.scss            |  4 ++++
 intranet/static/js/dashboard/announcements.js |  6 ++++--
 intranet/templates/dashboard/dashboard.html   | 13 +++++--------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/intranet/apps/dashboard/views.py b/intranet/apps/dashboard/views.py
index e8550d9938..c16c02573f 100644
--- a/intranet/apps/dashboard/views.py
+++ b/intranet/apps/dashboard/views.py
@@ -369,12 +369,8 @@ def paginate_announcements_list_raw(
     prev_page = items.previous_page_number() if items.has_previous() else 0
     next_page = items.next_page_number() if more_items else 0
 
-    # limit to 15 to prevent extreme slowdowns for large amounts
-    # of club announcements
-    club_items = visible_club_items[:15]
-
     return RawPaginationData(
-        club_items=club_items,
+        club_items=visible_club_items,
         items=items,
         page_num=page_num,
         prev_page=prev_page,
diff --git a/intranet/static/css/dashboard.scss b/intranet/static/css/dashboard.scss
index 0a0c7a98a0..b36666dad8 100644
--- a/intranet/static/css/dashboard.scss
+++ b/intranet/static/css/dashboard.scss
@@ -419,3 +419,7 @@ div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
     padding-right: 432px;
   }
 }
+
+.hidden-club-announcements {
+  display: none;
+}
\ No newline at end of file
diff --git a/intranet/static/js/dashboard/announcements.js b/intranet/static/js/dashboard/announcements.js
index 25c3411195..b3ff3b3928 100644
--- a/intranet/static/js/dashboard/announcements.js
+++ b/intranet/static/js/dashboard/announcements.js
@@ -154,10 +154,12 @@ function announcementToggle() {
                 announcement.remove();
                 const numAnnouncementsSpan = $(".num-club-announcements");
                 const numAnnouncements = numAnnouncementsSpan.text().match(/\d+/);
-                // 15 is the cap, and prevent clicking on the button too fast
-                if(numAnnouncements != 15 && !announcement.hasClass("announcement-read")) {
+                if(!announcement.hasClass("announcement-read")) {
                   numAnnouncementsSpan.text(numAnnouncements - 1);
                   announcement.addClass("announcement-read");
+                  let newAnnouncement = $(".hidden-club-announcements").first();
+                  newAnnouncement.toggleClass("hidden-club-announcements");
+                  newAnnouncement.fadeIn(350);
                 }
                 $(".club-announcements:has(.club-announcements-content:not(:has(.announcement)))").slideUp(350);
             }, 450);
diff --git a/intranet/templates/dashboard/dashboard.html b/intranet/templates/dashboard/dashboard.html
index 5f34b45b4a..8027964635 100644
--- a/intranet/templates/dashboard/dashboard.html
+++ b/intranet/templates/dashboard/dashboard.html
@@ -217,20 +217,17 @@ <h3>
             <div class="club-announcements">
                 <h3 class="club-announcements-header">
                     <i class="fas fa-users"></i>&nbsp;
-                    <!-- This only goes up to 15 items. Removing this restriction causes slowdowns. -->
-                    {% if club_items|length < 15 %}
-                        You have <span class="num-club-announcements">{{ club_items|length }}</span> new club announcement{{ club_items|length|pluralize }}
-                    {% else %}
-                        You have <span class="num-club-announcements">15+</span> new club announcements
-                    {% endif %}
+                    You have <span class="num-club-announcements">{{ club_items|length }}</span> new club announcement{{ club_items|length|pluralize }}
                     <i class="fas fa-chevron-down club-announcements-toggle-icon"></i>
                 </h3>
                 <div class="club-announcements-content">
                     {% for item in club_items %}
                         {% if not hide_announcements or not item.id in user_hidden_announcements %}
-                            {% with announcement=item show_icon=True %}
+                            <div class="{% if forloop.counter >= 15 %}hidden-club-announcements{% endif %}">
+                                {% with announcement=item show_icon=True %}
                                 {% include "announcements/announcement.html" %}
-                            {% endwith %}
+                                {% endwith %}
+                            </div>
                         {% endif %}
                     {% endfor %}
                 </div>