Merge pull request #538 from mouse-reeve/polling

Polling to update notification count

bookwyrm/static/js/shared.js

@@ -31,8 +31,32 @@ window.onload = function() {
     // hidden submit button in a form
     document.querySelectorAll('.hidden-form input')
         .forEach(t => t.onchange = revealForm);
+
+    // polling
+    document.querySelectorAll('[data-poll]')
+        .forEach(el => polling(el));
 };
 
+function polling(el) {
+    let delay = 10000 + (Math.random() * 1000);
+    setTimeout(function() {
+        fetch('/api/updates/' + el.getAttribute('data-poll'))
+            .then(response => response.json())
+            .then(data => updateCountElement(el, data));
+        polling(el);
+    }, delay, el);
+}
+
+function updateCountElement(el, data) {
+    const currentCount = el.innerText;
+    const count = data[el.getAttribute('data-poll')];
+    if (count != currentCount) {
+        addRemoveClass(el, 'hidden', count < 1);
+        el.innerText = count;
+    }
+}
+
+
 function revealForm(e) {
     var hidden = e.currentTarget.closest('.hidden-form').getElementsByClassName('hidden')[0];
     if (hidden) {

bookwyrm/templates/layout.html

@@ -106,17 +106,15 @@
                 </ul>
             </div>
             <div class="navbar-item">
-                <a href="/notifications">
+                <a href="/notifications" class="tags has-addons">
-                    <div class="tags has-addons">
+                    <span class="tag is-medium">
-                        <span class="tag is-medium">
+                        <span class="icon icon-bell" title="Notifications">
-                            <span class="icon icon-bell" title="Notifications">
+                            <span class="is-sr-only">Notifications</span>
-                                <span class="is-sr-only">Notifications</span>
-                            </span>
                         </span>
-                        {% if request.user|notification_count %}
+                    </span>
-                        <span class="tag is-danger is-medium">{{ request.user | notification_count }}</span>
+                    <span class="{% if not request.user|notification_count %}hidden {% endif %}tag is-danger is-medium" data-poll="notifications">
-                        {% endif %}
+                        {{ request.user | notification_count }}
-                    </div>
+                    </span>
                 </a>
             </div>
             {% else %}

bookwyrm/urls.py

@@ -31,14 +31,15 @@ urlpatterns = [
     re_path(r'^inbox/?$', incoming.shared_inbox),
     re_path(r'%s/inbox/?$' % local_user_path, incoming.inbox),
     re_path(r'%s/outbox/?$' % local_user_path, views.Outbox.as_view()),
-
-    # .well-known endpoints
     re_path(r'^.well-known/webfinger/?$', wellknown.webfinger),
     re_path(r'^.well-known/nodeinfo/?$', wellknown.nodeinfo_pointer),
     re_path(r'^nodeinfo/2\.0/?$', wellknown.nodeinfo),
     re_path(r'^api/v1/instance/?$', wellknown.instance_info),
     re_path(r'^api/v1/instance/peers/?$', wellknown.peers),
 
+    # polling updates
+    re_path('^api/updates/notifications/?$', views.Updates.as_view()),
+
     # authentication
     re_path(r'^login/?$', views.Login.as_view()),
     re_path(r'^register/?$', views.Register.as_view()),

bookwyrm/views/__init__.py

@@ -23,4 +23,5 @@ from .shelf import Shelf
 from .shelf import user_shelves_page, create_shelf, delete_shelf
 from .shelf import shelve, unshelve
 from .status import Status, Replies, CreateStatus, DeleteStatus
+from .updates import Updates
 from .user import User, EditUser, Followers, Following

bookwyrm/views/updates.py

@@ -0,0 +1,17 @@
+''' endpoints for getting updates about activity '''
+from django.contrib.auth.decorators import login_required
+from django.http import JsonResponse
+from django.utils.decorators import method_decorator
+from django.views import View
+
+# pylint: disable= no-self-use
+@method_decorator(login_required, name='dispatch')
+class Updates(View):
+    ''' so the app can poll '''
+    def get(self, request):
+        ''' any notifications waiting? '''
+        return JsonResponse({
+            'notifications': request.user.notification_set.filter(
+                read=False
+            ).count(),
+        })