Infinite scrolling for activities

pages/activity/activity.go

@@ -3,24 +3,21 @@ package activity
 import (
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
-	"github.com/animenotifier/notify.moe/components"
 	"github.com/animenotifier/notify.moe/utils"
 )
 
-const maxActivitiesPerPage = 40
-
 // Global activity page.
 func Global(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 	activities := fetchActivities(user, false)
-	return ctx.HTML(components.ActivityFeed(activities, user))
+	return render(ctx, activities)
 }
 
 // Followed activity page.
 func Followed(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 	activities := fetchActivities(user, true)
-	return ctx.HTML(components.ActivityFeed(activities, user))
+	return render(ctx, activities)
 }
 
 // fetchActivities filters the activities by the given filters.
@@ -55,10 +52,5 @@ func fetchActivities(user *arn.User, followedOnly bool) []arn.Activity {
 	})
 
 	arn.SortActivitiesLatestFirst(activities)
-
-	if len(activities) > maxActivitiesPerPage {
-		activities = activities[:maxActivitiesPerPage]
-	}
-
 	return activities
 }

pages/activity/activity.pixy

@@ -1,16 +1,19 @@
-component ActivityFeed(entries []arn.Activity, user *arn.User)
+component ActivityFeed(entries []arn.Activity, nextIndex int, user *arn.User)
 	h1.page-title Activity
 
 	.tabs
 		Tab("Global", "globe", "/activity")
 		Tab("Followed", "user-plus", "/activity/followed")
 
-	.activities
 	if len(entries) == 0
 		p.no-data.mountable No activity here.
 	else
-			each entry in entries
-				Activity(entry, user)
+		#load-more-target.activities
+			ActivitiesScrollable(entries, user)
+	
+	if nextIndex != -1
+		.buttons
+			LoadMore(nextIndex)
 	
 	#load-new-activities(data-count="0")
 		.buttons
@@ -18,6 +21,10 @@ component ActivityFeed(entries []arn.Activity, user *arn.User)
 				Icon("refresh")
 				span#load-new-activities-text 0 new activities
 
+component ActivitiesScrollable(entries []arn.Activity, user *arn.User)
+	each entry in entries
+		Activity(entry, user)
+
 component Activity(activity arn.Activity, user *arn.User)
 	.activity.post-parent.mountable(id=fmt.Sprintf("activity-%s", activity.GetID()))
 		.post-author
@@ -31,7 +38,7 @@ component Activity(activity arn.Activity, user *arn.User)
 						ActivityConsumeAnimeTitle(activity.(*arn.ActivityConsumeAnime), user)
 				
 				if user != nil && user.ID == activity.GetCreatedBy() && activity.Type() == "ActivityConsumeAnime"
-					button.post-delete.activity-action.tip.action(data-action="deleteObject", data-trigger="click", aria-label="Delete", data-return-path="/activity", data-confirm-type="activity", data-api=fmt.Sprintf("/api/%s/%s", strings.ToLower(activity.Type()), activity.GetID()))
+					button.activity-action.tip.action(data-action="deleteObject", data-trigger="click", aria-label="Delete", data-return-path="/activity", data-confirm-type="activity", data-api=fmt.Sprintf("/api/%s/%s", strings.ToLower(activity.Type()), activity.GetID()))
 						RawIcon("trash")
 				
 				.activity-date.utc-date(data-date=activity.GetCreated())

pages/activity/activity.scarlet

@@ -31,6 +31,7 @@
 	height auto
 	margin-right 0.5rem
 	opacity 0
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
 
 	:hover
 		color link-hover-color

pages/activity/render.go

@@ -0,0 +1,43 @@
+package activity
+
+import (
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
+	"github.com/animenotifier/notify.moe/utils/infinitescroll"
+)
+
+const (
+	activitiesFirstLoad = 40
+	activitiesPerScroll = 20
+)
+
+// render renders the activities page with the given activities.
+func render(ctx *aero.Context, allActivities []arn.Activity) string {
+	user := utils.GetUser(ctx)
+	index, _ := ctx.GetInt("index")
+
+	// Slice the part that we need
+	activities := allActivities[index:]
+	maxLength := activitiesFirstLoad
+
+	if index > 0 {
+		maxLength = activitiesPerScroll
+	}
+
+	if len(activities) > maxLength {
+		activities = activities[:maxLength]
+	}
+
+	// Next index
+	nextIndex := infinitescroll.NextIndex(ctx, len(allActivities), maxLength, index)
+
+	// In case we're scrolling, send activities only (without the page frame)
+	if index > 0 {
+		return ctx.HTML(components.ActivitiesScrollable(activities, user))
+	}
+
+	// Otherwise, send the full page
+	return ctx.HTML(components.ActivityFeed(activities, nextIndex, user))
+}

pages/index/coreroutes/coreroutes.go

@@ -21,7 +21,9 @@ func Register(l *layout.Layout) {
 
 	// Activity
 	l.Page("/activity", activity.Global)
+	l.Page("/activity/from/:index", activity.Global)
 	l.Page("/activity/followed", activity.Followed)
+	l.Page("/activity/followed/from/:index", activity.Followed)
 
 	// Calendar
 	l.Page("/calendar", calendar.Get)