Scrolling animelist

pages/animelist/animelist.pixy

@@ -16,38 +16,45 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u
 		if len(animeLists[arn.AnimeListStatusWatching].Items) > 0
 			.anime-list-container
 				h3.status-name Watching
-				AnimeList(animeLists[arn.AnimeListStatusWatching], viewUser, user)
+				AnimeList(animeLists[arn.AnimeListStatusWatching].Items, -1, viewUser, user)
 
 		if len(animeLists[arn.AnimeListStatusCompleted].Items) > 0
 			.anime-list-container
 				h3.status-name Completed
-				AnimeList(animeLists[arn.AnimeListStatusCompleted], viewUser, user)
+				AnimeList(animeLists[arn.AnimeListStatusCompleted].Items, -1, viewUser, user)
 
 		if len(animeLists[arn.AnimeListStatusPlanned].Items) > 0
 			.anime-list-container
 				h3.status-name Planned
-				AnimeList(animeLists[arn.AnimeListStatusPlanned], viewUser, user)
+				AnimeList(animeLists[arn.AnimeListStatusPlanned].Items, -1, viewUser, user)
 
 		if len(animeLists[arn.AnimeListStatusHold].Items) > 0
 			.anime-list-container
 				h3.status-name On hold
-				AnimeList(animeLists[arn.AnimeListStatusHold], viewUser, user)
+				AnimeList(animeLists[arn.AnimeListStatusHold].Items, -1, viewUser, user)
 
 		if len(animeLists[arn.AnimeListStatusDropped].Items) > 0
 			.anime-list-container
 				h3.status-name Dropped
-				AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user)
+				AnimeList(animeLists[arn.AnimeListStatusDropped].Items, -1, viewUser, user)
 
-component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User)
+component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser *arn.User, user *arn.User)
-	.anime-list
+	#load-more-target.anime-list
-		each item in animeList.Items
+		AnimeListScrollable(animeListItems, viewUser, user)
-			.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
+	
+	if nextIndex != -1
+		.buttons
+			LoadMore(nextIndex)
+
+component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User)
+	each item in animeListItems
+		.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
 			.anime-list-item-image-container
 				a.anime-list-item-image-link.ajax(href=item.Anime().Link())
 					img.anime-list-item-image.lazy(data-src=item.Anime().Image("small"), data-webp="true", alt=item.Anime().Title.ByUser(user))
 
 			.anime-list-item-name
-					a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.ByUser(user)
+				a.ajax(href=item.Link(viewUser.Nick))= item.Anime().Title.ByUser(user)
 
 			.anime-list-item-actions
 				if user != nil && item.Status == arn.AnimeListStatusWatching

pages/animelist/status.pixy

@@ -1,12 +1,12 @@
 component ProfileAnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string, uri string)
 	ProfileHeader(viewUser, user, uri)
 
-	AnimeListFilteredByStatus(animeList, viewUser, user, status)
+	AnimeListFilteredByStatus(animeList.Items, -1, viewUser, user, status)
 
-component AnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string)
+component AnimeListFilteredByStatus(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser *arn.User, user *arn.User, status string)
-	if len(animeList.Items) == 0
+	if len(animeListItems) == 0
 		p.no-data.mountable= viewUser.Nick + " hasn't added any anime to this list yet."
 	else
 		.anime-list-container
 			//- h3.status-name= arn.ListItemStatusName(status)
-			AnimeList(animeList, viewUser, user)
+			AnimeList(animeListItems, nextIndex, viewUser, user)

pages/embed/embed.pixy

@@ -1,5 +1,5 @@
 component BrowserExtension(watchingList *arn.AnimeList, viewUser *arn.User, user *arn.User)
-	AnimeList(watchingList, viewUser, user)
+	AnimeList(watchingList.Items, -1, viewUser, user)
 
 component ExtensionNavigation(user *arn.User)
 	nav.extension-navigation

pages/home/animelist.go

@@ -8,8 +8,11 @@ import (
 	"github.com/animenotifier/notify.moe/components"
 	"github.com/animenotifier/notify.moe/pages/frontpage"
 	"github.com/animenotifier/notify.moe/utils"
+	"github.com/animenotifier/notify.moe/utils/infinitescroll"
 )
 
+const maxAnimeListItems = 50
+
 // FilterByStatus returns a handler for the given anime list item status.
 func FilterByStatus(status string) aero.Handle {
 	return func(ctx *aero.Context) string {
@@ -19,20 +22,67 @@ func FilterByStatus(status string) aero.Handle {
 			return frontpage.Get(ctx)
 		}
 
-		return AnimeList(ctx, user, status)
+		return AnimeListItems(ctx, user, status)
 	}
 }
 
-// AnimeList sends the anime list with the given status for given user.
+// // AnimeList sends the anime list with the given status for given user.
-func AnimeList(ctx *aero.Context, user *arn.User, status string) string {
+// func AnimeList(ctx *aero.Context, user *arn.User, status string) string {
+// 	viewUser := user
+// 	animeList := viewUser.AnimeList()
+
+// 	if animeList == nil {
+// 		return ctx.Error(http.StatusNotFound, "Anime list not found", nil)
+// 	}
+
+// 	animeList = animeList.FilterStatus(status)
+// 	animeList.Sort()
+// 	items := animeList.Items
+
+// 	if len(items) > maxAnimeListItems {
+// 		items = items[:maxAnimeListItems]
+// 	}
+
+// 	fmt.Println(len(items))
+
+// 	return ctx.HTML(components.Home(items, viewUser, user, status))
+// }
+
+// AnimeListItems renders the anime list items.
+func AnimeListItems(ctx *aero.Context, user *arn.User, status string) string {
 	viewUser := user
+	index, _ := ctx.GetInt("index")
+
+	// Fetch all eligible items
 	animeList := viewUser.AnimeList()
 
 	if animeList == nil {
 		return ctx.Error(http.StatusNotFound, "Anime list not found", nil)
 	}
 
+	animeList = animeList.FilterStatus(status)
+
+	// Sort the items
 	animeList.Sort()
 
-	return ctx.HTML(components.Home(animeList.FilterStatus(status), viewUser, user, status))
+	// These are all animer list items for the given status
+	allItems := animeList.Items
+
+	// Slice the part that we need
+	items := allItems[index:]
+
+	if len(items) > maxAnimeListItems {
+		items = items[:maxAnimeListItems]
+	}
+
+	// Next index
+	nextIndex := infinitescroll.NextIndex(ctx, len(allItems), maxAnimeListItems, index)
+
+	// In case we're scrolling, send items only (without the page frame)
+	if index > 0 {
+		return ctx.HTML(components.AnimeListScrollable(items, viewUser, user))
+	}
+
+	// Otherwise, send the full page
+	return ctx.HTML(components.Home(items, nextIndex, viewUser, user, status))
 }

pages/home/home.pixy

@@ -1,3 +1,3 @@
-component Home(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string)
+component Home(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser *arn.User, user *arn.User, status string)
 	StatusTabs("/animelist")
-	AnimeListFilteredByStatus(animeList, viewUser, user, status)
+	AnimeListFilteredByStatus(animeListItems, nextIndex, viewUser, user, status)

pages/index.go

@@ -189,6 +189,12 @@ func Configure(app *aero.Application) {
 	l.Page("/animelist/hold", home.FilterByStatus(arn.AnimeListStatusHold))
 	l.Page("/animelist/dropped", home.FilterByStatus(arn.AnimeListStatusDropped))
 
+	l.Page("/animelist/watching/from/:index", home.FilterByStatus(arn.AnimeListStatusWatching))
+	l.Page("/animelist/completed/from/:index", home.FilterByStatus(arn.AnimeListStatusCompleted))
+	l.Page("/animelist/planned/from/:index", home.FilterByStatus(arn.AnimeListStatusPlanned))
+	l.Page("/animelist/hold/from/:index", home.FilterByStatus(arn.AnimeListStatusHold))
+	l.Page("/animelist/dropped/from/:index", home.FilterByStatus(arn.AnimeListStatusDropped))
+
 	// Compare
 	l.Page("/compare/animelist/:nick-1/:nick-2", compare.AnimeList)