Added button to add to collection on explore pages (closes #77)

mixins/AnimeGrid.pixy

@@ -1,7 +1,12 @@
 component AnimeGrid(animeList []*arn.Anime, user *arn.User)
 	.anime-grid
 		each anime in animeList
-			a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
-				img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
-				.anime-grid-title
-					.anime-grid-title-text= anime.Title.ByUser(user)
+			.anime-grid-cell
+				a.ajax(href="/anime/" + toString(anime.ID))
+					img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji)
+					.anime-grid-title
+						.anime-grid-title-text= anime.Title.ByUser(user)
+				
+				if user != nil && !user.AnimeList().Contains(anime.ID)
+					button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID)
+						RawIcon("plus")

pages/anime/anime.pixy

@@ -10,13 +10,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
 		.anime-image-container.mountable
 			img.anime-cover-image.lazy(data-src=anime.Image("large"), data-webp="true", alt=anime.Title.ByUser(user))
 
-			//- if anime.StartDate != ""
-			//- 	.anime-start-date
-			//- 		span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
-			//- 		if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
-			//- 			span  -
-			//- 			span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
-
 		.space
 
 		.anime-info
@@ -25,7 +18,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
 			h2.anime-alternative-title.mountable
 				Japanese(anime.Title.Japanese)
 
-			//- h3.anime-section-name.anime-summary-header Summary
 			p.anime-summary.mountable= anime.Summary
 
 			AnimeActions(anime, user)
@@ -35,12 +27,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
 	AnimeTracks(anime, tracks)
 	AnimeEpisodes(episodes)
 
-	//- //- h3.anime-section-name Reviews
-	//- //- p Coming soon.
-
-	//- .footer
-	//- 	span Powered by Kitsu.
-
 component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
 	AnimeTrailer(anime)
 	AnimeInformation(anime)

scripts/Actions/AnimeList.ts

@@ -1,15 +1,23 @@
 import { AnimeNotifier } from "../AnimeNotifier"
 
 // Add anime to collection
-export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
-	button.innerText = "Adding..."
-	
+export async function addAnimeToCollection(arn: AnimeNotifier, button: HTMLButtonElement) {
+	button.disabled = true
+
 	let {animeId} = button.dataset
 	let apiEndpoint = arn.findAPIEndpoint(button)
 
-	arn.post(apiEndpoint + "/add/" + animeId, "")
-	.then(() => arn.reloadContent())
-	.catch(err => arn.statusMessage.showError(err))
+	try {
+		await arn.post(apiEndpoint + "/add/" + animeId, "")
+		arn.reloadContent()
+
+		// Show status message
+		let response = await fetch("/api/anime/" + animeId)
+		let anime = await response.json()
+		arn.statusMessage.showInfo(`Added ${anime.title.canonical} to your collection.`)
+	} catch(err) {
+		arn.statusMessage.showError(err)
+	}
 }
 
 // Remove anime from collection

styles/anime-grid.scarlet

@@ -7,7 +7,8 @@
 	shadow-up
 
 	:hover
-		.anime-grid-title
+		.anime-grid-title,
+		.anime-grid-add-button
 			opacity 1
 
 < 450px
@@ -34,4 +35,11 @@
 	color white
 	text-shadow 0 0 3px black
 	font-size 80%
-	line-height 1.8em
+	line-height 1.8em
+
+.anime-grid-add-button
+	opacity 0
+	position absolute
+	top 5px
+	right 5px
+	padding 0.25rem