Merge pull request #208 from simple-login/notif-improve

Improve the notification

README.md

@@ -1229,11 +1229,28 @@ Input:
 - page in url: the page number, starts at 0
 
 Output:
-List of notification, each notification has:
-- id
-- message: the message in html
-- read: whether the user has read the notification
-- created_at: when the notification is created
+- more: whether there's more notifications
+- notifications: list of notification, each notification has:
+    - id
+    - message: the message in html
+    - read: whether the user has read the notification
+    - created_at: when the notification is created
+
+For example
+
+```json
+{
+    "more": false,
+    "notifications": [
+        {
+            "created_at": "2 minutes ago",
+            "id": 1,
+            "message": "Hey!",
+            "read": false
+        }
+    ]
+}
+```
 
 #### POST /api/notifications/:notification_id
 

app/api/views/notification.py

@@ -1,5 +1,3 @@
-from time import sleep
-
 from flask import g
 from flask import jsonify
 from flask import request
@@ -21,11 +19,13 @@ def get_notifications():
     Input:
     - page: in url. Starts at 0
 
-    Output: list of notifications. Each notification has the following field:
-    - id
-    - message
-    - read
-    - created_at
+    Output:
+    - more: boolean. Whether there's more notification to load
+    - notifications: list of notifications.
+        - id
+        - message
+        - read
+        - created_at
     """
     user = g.user
     try:
@@ -36,22 +36,25 @@ def get_notifications():
     notifications = (
         Notification.query.filter_by(user_id=user.id)
         .order_by(Notification.read, Notification.created_at.desc())
-        .limit(PAGE_LIMIT)
+        .limit(PAGE_LIMIT + 1)  # load a record more to know whether there's more
         .offset(page * PAGE_LIMIT)
         .all()
     )
 
+    have_more = len(notifications) > PAGE_LIMIT
+
     return (
         jsonify(
-            [
+            more=have_more,
+            notifications=[
                 {
                     "id": notification.id,
                     "message": notification.message,
                     "read": notification.read,
                     "created_at": notification.created_at.humanize(),
                 }
-                for notification in notifications
-            ]
+                for notification in notifications[:PAGE_LIMIT]
+            ],
         ),
         200,
     )

templates/footer.html

@@ -57,7 +57,8 @@
       notifications: [],
       page: 0,
       loading: true,
-      canLoadMore: true
+      canLoadMore: false,
+      showNotification: false,
     },
     computed: {
       has_non_read_notification: function () {
@@ -94,8 +95,8 @@
         });
         if (res.ok) {
           let json = await res.json();
-          if (json.length == 0) that.canLoadMore = false;
-          that.notifications = that.notifications.concat(json);
+          that.canLoadMore = json.more;
+          that.notifications = that.notifications.concat(json.notifications);
         }
       }
 
@@ -110,8 +111,11 @@
       });
       if (res.ok) {
         let json = await res.json();
-        that.notifications = json;
+        that.notifications = json.notifications;
         that.loading = false;
+        that.canLoadMore = json.more
+        if (that.notifications.length > 0)
+          that.showNotification = true;
       }
     }
   })

templates/header.html

@@ -15,7 +15,8 @@
           </div>
         {% endif %}
 
-        <div id="notification-app" class="dropdown d-none d-md-flex">
+
+        <div id="notification-app" class="dropdown d-none d-md-flex" v-if="showNotification">
           <a class="nav-link icon" data-toggle="collapse" href="#notifications" style="height: 100%">
             <i class="fe fe-bell"></i>
             <span v-if="has_non_read_notification" class="nav-unread"></span>

tests/api/test_notification.py

@@ -25,8 +25,9 @@ def test_get_notifications(flask_client):
     )
 
     assert r.status_code == 200
-    assert len(r.json) == 2
-    for n in r.json:
+    assert r.json["more"] is False
+    assert len(r.json["notifications"]) == 2
+    for n in r.json["notifications"]:
         assert n["id"] > 0
         assert n["message"]
         assert n["read"] is False
@@ -37,7 +38,8 @@ def test_get_notifications(flask_client):
         url_for("api.get_notifications", page=1),
         headers={"Authentication": api_key.code},
     )
-    assert len(r.json) == 0
+    assert r.json["more"] is False
+    assert len(r.json["notifications"]) == 0
 
 
 def test_mark_notification_as_read(flask_client):