Async load activity feed

Author: jimchamp

openlibrary/plugins/openlibrary/js/activity-feed/index.js

@@ -0,0 +1,52 @@
+import { buildPartialsUrl } from '../utils'
+
+/**
+ * Fetches and displays the activity feed for a "My Books" page.
+ *
+ * @param {HTMLElement} elem - Container for the activity feed
+ * @returns {Promise<void>}
+ *
+ * @see `/openlibrary/templates/account/activity_feed.html` for activity feed template
+ */
+export async function initActivityFeedRequest(elem) {
+    const fullPath = window.location.pathname
+    const splitPath = fullPath.split('/')
+    const username = splitPath[2]  // Assumes an activity feed can only appear on the patron's "My Books" page
+
+    const loadingIndicator = elem.querySelector('.loadingIndicator')
+    const retryElem = elem.querySelector('.activity-feed-retry')
+    const retryButton = retryElem.querySelector('.retry-btn')
+
+    function fetchPartialsAndUpdatePage() {
+        return fetch(buildPartialsUrl('ActivityFeed', {username: username}))
+            .then(resp => {
+                if (!resp.ok) {
+                    throw Error('Failed to fetch partials')
+                }
+                return resp.json()
+            })
+            .then(data => {
+                const div = document.createElement('div')
+                div.innerHTML = data.partials.trim()
+                loadingIndicator.classList.add('hidden')
+                retryButton.classList.add('hidden')
+                for (const child of Array.from(div.children)) {
+                    elem.insertAdjacentElement('beforeend', child)
+                }
+            })
+            .catch(() => {
+                // Show retry affordance
+                loadingIndicator.classList.add('hidden')
+                retryElem.classList.remove('hidden')
+            })
+    }
+
+    // Hydrate retry button
+    retryButton.addEventListener('click', async () => {
+        retryElem.classList.add('hidden')
+        loadingIndicator.classList.remove('hidden')
+        await fetchPartialsAndUpdatePage()
+    })
+
+    await fetchPartialsAndUpdatePage()
+}

openlibrary/plugins/openlibrary/js/index.js

@@ -582,4 +582,11 @@ jQuery(function () {
         import(/* webpackChunkName: "list-books" */ './list_books')
             .then(module => module.ListBooks.init());
     }
+
+    // Async-load activity feed
+    const activityFeedContainer = document.querySelector('.activity-feed-container')
+    if (activityFeedContainer) {
+        import(/* webpackChunkName: "activity-feed" */ './activity-feed')
+            .then(module => module.initActivityFeedRequest(activityFeedContainer))
+    }
 });

openlibrary/plugins/openlibrary/partials.py

@@ -12,6 +12,7 @@
 from openlibrary.core.lending import compose_ia_url, get_available
 from openlibrary.i18n import gettext as _
 from openlibrary.plugins.openlibrary.lists import get_lists, get_user_lists
+from openlibrary.plugins.upstream.mybooks import ActivityFeed
 from openlibrary.plugins.upstream.yearly_reading_goals import get_reading_goals
 from openlibrary.plugins.worksearch.code import do_search, work_search
 from openlibrary.plugins.worksearch.subjects import (
@@ -354,6 +355,19 @@ def generate(self) -> dict:
         return {"partials": str(macro)}
 
 
+
+class ActivityFeedPartial(PartialDataHandler):
+    """Handler for "My Books" page activity feeds"""
+    def __init__(self):
+        self.i = web.input(username=None)
+
+    def generate(self) -> dict:
+        feed, follows_others = ActivityFeed.get_activity_feed(self.i.username)
+        feed_url = f'/people/{self.i.username}/books/feed'
+        template_result = render_template('account/activity_feed', feed, feed_url, follows_others)
+        return {"partials": str(template_result)}
+
+
 class PartialRequestResolver:
     # Maps `_component` values to PartialDataHandler subclasses
     component_mapping = {  # noqa: RUF012
@@ -365,6 +379,7 @@ class PartialRequestResolver:
         "LazyCarousel": LazyCarouselPartial,
         "MyBooksDropperLists": MyBooksDropperListsPartial,
         "ReadingGoalProgress": ReadingGoalProgressPartial,
+        "ActivityFeed": ActivityFeedPartial,
     }
 
     @staticmethod

openlibrary/templates/account/activity_feed.html

@@ -1,12 +1,12 @@
-$def with(username)
+$def with(feed, feed_url, follows_others)
 
 $# Renders the given feed in a container filled with cards.
 $#
-$# * username (string) -- Username of a patron
+$# * feed (list)              -- List of recent bookshelf events
+$# * feed_url (string)        -- `href` for the feed's source
+$# * follows_others (boolean) -- `True` if the authenticated patron follows at least one person
 
 $code:
-    feed_url = '/people/%s/books/feed' % username
-    feed, follows_others = get_activity_feed(username)
     shelf_id_to_name = {
         1: _('Want to Read'),
         2: _('Currently Reading'),

openlibrary/templates/account/mybooks.html

@@ -50,7 +50,10 @@ <h2 class="home-h2">
                 <a href="$feed_url">$_("My Feed")</a>
             </h2>
         </div>
-        $:render_template('account/activity_feed', username)
+        $:macros.LoadingIndicator(_("Loading activity feed"), hidden=False)
+        <div class="activity-feed-retry hidden">
+            $_("Failed to fetch activity feed.") <a href="#" class="retry-btn">$_("Retry?")</a>
+        </div>
     </div>
   $if owners_page or public:
     $:(compact_carousel(currently_reading) or empty_carousel(currently_reading))