Refactor

pages/anime/anime.pixy

@@ -31,7 +31,7 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
 					Icon("pencil")
 					span Edit in collection
 			else
-				button.action(data-api="/api/animelist/" + user.ID, data-action="arrayAppend", data-trigger="click", data-field="Items", data-object="{\"AnimeID\": \"" + anime.ID + "\"}")
+				button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID)
 					Icon("plus")
 					span Add to collection
 

pages/animelist/animelist.scarlet

@@ -38,6 +38,7 @@
 	:hover
 		.plus-episode
 			opacity 1
+			pointer-events all
 
 .anime-list-item-episodes-watched
 	flex 0.4
@@ -48,6 +49,7 @@
 	display inline-block
 	cursor pointer
 	opacity 0
+	pointer-events none
 	margin-left 1px
 	transition opacity transition-speed ease
 

pages/animelistitem/animelistitem.pixy

@@ -33,6 +33,6 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
 				a.ajax.button(href=anime.Link())
 					Icon("search-plus")
 					span View anime
-				button.action(data-action="removeAnimeFromCollection", data-trigger="click", data-api="/api/animelist/" + viewUser.ID, data-field="Items", data-index="AnimeID=\"" + anime.ID + "\"", data-nick=viewUser.Nick)
+				button.action(data-action="removeAnimeFromCollection", data-trigger="click", data-api="/api/animelist/" + viewUser.ID, data-anime-id=anime.ID, data-nick=viewUser.Nick)
 					Icon("trash")
 					span Remove from collection

scripts/Actions.ts

@@ -26,12 +26,14 @@ export function toggleSidebar(arn: AnimeNotifier) {
 
 // Save new data from an input field
 export function save(arn: AnimeNotifier, input: HTMLElement) {
-	arn.loading(true)
-
-	let isContentEditable = input.isContentEditable
 	let obj = {}
+	let isContentEditable = input.isContentEditable
 	let value = isContentEditable ? input.innerText : (input as HTMLInputElement).value
 	
+	if(value === undefined) {
+		return
+	}
+
 	if((input as HTMLInputElement).type === "number" || input.dataset.type === "number") {
 		if(input.getAttribute("step") === "1" || input.dataset.step === "1") {
 			obj[input.dataset.field] = parseInt(value)
@@ -50,21 +52,9 @@ export function save(arn: AnimeNotifier, input: HTMLElement) {
 
 	let apiEndpoint = arn.findAPIEndpoint(input)
 
-	fetch(apiEndpoint, {
+	arn.post(apiEndpoint, obj)
-		method: "POST",
-		body: JSON.stringify(obj),
-		credentials: "same-origin"
-	})
-	.then(response => response.text())
-	.then(body => {
-		if(body !== "ok") {
-			throw body
-		}
-	})
 	.catch(err => arn.statusMessage.showError(err))
 	.then(() => {
-		arn.loading(false)
-
 		if(isContentEditable) {
 			input.contentEditable = "true"
 		} else {
@@ -82,6 +72,10 @@ export function closeStatusMessage(arn: AnimeNotifier) {
 
 // Increase episode
 export function increaseEpisode(arn: AnimeNotifier, element: HTMLElement) {
+	if(arn.isLoading) {
+		return
+	}
+
 	let prev = element.previousSibling as HTMLElement
 	let episodes = parseInt(prev.innerText)
 	prev.innerText = String(episodes + 1)
@@ -254,12 +248,26 @@ export function testNotification(arn: AnimeNotifier) {
 	})
 }
 
-// Remove anime from collection
+// Add anime to collection
-export function removeAnimeFromCollection(arn: AnimeNotifier, element: HTMLElement) {
+export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
-	let {field, index, nick} = element.dataset
+	button.innerText = "Adding..."
-	let apiEndpoint = arn.findAPIEndpoint(element)
 	
-	arn.post(apiEndpoint + "/field/" + field + "/remove/" + index, "")
+	let {animeId} = button.dataset
+	let apiEndpoint = arn.findAPIEndpoint(button)
+
+	arn.post(apiEndpoint + "/add/" + animeId, "")
+	.then(() => arn.reloadContent())
+	.catch(err => arn.statusMessage.showError(err))
+}
+
+// Remove anime from collection
+export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElement) {
+	button.innerText = "Removing..."
+
+	let {animeId, nick} = button.dataset
+	let apiEndpoint = arn.findAPIEndpoint(button)
+
+	arn.post(apiEndpoint + "/remove/" + animeId, "")
 	.then(() => arn.app.load("/animelist/" + (arn.app.find("Status") as HTMLSelectElement).value))
 	.catch(err => arn.statusMessage.showError(err))
 }

scripts/AnimeNotifier.ts

@@ -23,6 +23,7 @@ export class AnimeNotifier {
 	touchController: TouchController
 	sideBar: SideBar
 	mainPageLoaded: boolean
+	isLoading: boolean
 	lastReloadContentPath: string
 
 	elementFound: MutationQueue
@@ -33,6 +34,7 @@ export class AnimeNotifier {
 		this.app = app
 		this.user = null
 		this.title = "Anime Notifier"
+		this.isLoading = true
 
 		this.elementFound = new MutationQueue(elem => elem.classList.add("element-found"))
 		this.elementNotFound = new MutationQueue(elem => elem.classList.add("element-not-found"))
@@ -124,8 +126,8 @@ export class AnimeNotifier {
 		// Sidebar control
 		this.sideBar = new SideBar(this.app.find("sidebar"))
 		
-		// Let"s start
+		// Loading
-		this.app.run()
+		this.loading(false)
 	}
 
 	onContentLoaded() {
@@ -446,8 +448,10 @@ export class AnimeNotifier {
 		.then(() => this.loading(false)) // Because our loading element gets reset due to full page diff
 	}
 
-	loading(isLoading: boolean) {
+	loading(newState: boolean) {
-		if(isLoading) {
+		this.isLoading = newState
+
+		if(this.isLoading) {
 			document.documentElement.style.cursor = "progress"
 			this.app.loading.classList.remove(this.app.fadeOutClass)
 		} else {
@@ -666,6 +670,10 @@ export class AnimeNotifier {
 	}
 
 	post(url: string, body: any) {
+		if(this.isLoading) {
+			return Promise.resolve()
+		}
+
 		if(typeof body !== "string") {
 			body = JSON.stringify(body)
 		}

scripts/Application.ts

@@ -30,10 +30,6 @@ export class Application {
 		})
 	}
 
-	run() {
-		this.loading.classList.add(this.fadeOutClass)
-	}
-
 	find(id: string): HTMLElement {
 		return document.getElementById(id)
 	}