Implemented adding and removing anime

scripts/AnimeNotifier.ts

@@ -1,4 +1,6 @@
 import { Application } from "./Application"
+import { findAll } from "./utils"
+import * as actions from "./actions"
 
 export class AnimeNotifier {
 	app: Application
@@ -21,15 +23,29 @@ export class AnimeNotifier {
 		this.app.run()
 	}
 
+	loading(isLoading: boolean) {
+		if(isLoading) {
+			this.app.loading.classList.remove(this.app.fadeOutClass)
+		} else {
+			this.app.loading.classList.add(this.app.fadeOutClass)
+		}
+	}
+
 	onContentLoaded() {
 		this.updateAvatars()
+
+		for(let element of findAll(".action")) {
+			let actionName = element.dataset.action
+
+			element.onclick = () => {
+				actions[actionName](this, element)
+			}
+		}
 	}
 
 	updateAvatars() {
-		let images = document.querySelectorAll('.user-image')
-
-		for(let i = 0; i < images.length; ++i) {
-			let img = images[i] as HTMLImageElement
+		for(let element of findAll(".user-image")) {
+			let img = element as HTMLImageElement
 
 			if(img.naturalWidth === 0) {
 				img.onload = function() {

scripts/Application.ts

@@ -4,13 +4,13 @@ export class Application {
 	activeLinkClass: string
 	content: HTMLElement
 	loading: HTMLElement
-	currentURL: string
-	originalURL: string
+	currentPath: string
+	originalPath: string
 	lastRequest: XMLHttpRequest
 
 	constructor() {
-		this.currentURL = window.location.pathname
-		this.originalURL = window.location.pathname
+		this.currentPath = window.location.pathname
+		this.originalPath = window.location.pathname
 		this.ajaxClass = "ajax"
 		this.activeLinkClass = "active"
 		this.fadeOutClass = "fade-out"
@@ -52,7 +52,7 @@ export class Application {
 			this.lastRequest = null
 		}
 	
-		this.currentURL = url
+		this.currentPath = url
 
 		// Start sending a network request
 		let request = this.get("/_" + url)
@@ -91,6 +91,8 @@ export class Application {
 		this.content.classList.add(this.fadeOutClass)
 		this.loading.classList.remove(this.fadeOutClass)
 		this.markActiveLinks()
+
+		return request
 	}
 
 	setContent(html: string) {
@@ -109,7 +111,7 @@ export class Application {
 			let link = links[i]
 			let href = link.getAttribute("href")
 
-			if(href === this.currentURL)
+			if(href === this.currentPath)
 				link.classList.add(this.activeLinkClass)
 			else
 				link.classList.remove(this.activeLinkClass)
@@ -138,7 +140,7 @@ export class Application {
 				e.preventDefault()
 				e.stopPropagation()
 
-				if(!url || url === self.currentURL)
+				if(!url || url === self.currentPath)
 					return
 				
 				// Load requested page

scripts/actions.ts

@@ -0,0 +1,48 @@
+import { Application } from "./Application"
+import { AnimeNotifier } from "./AnimeNotifier"
+
+// Add anime to collection
+export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
+	button.innerText = "Adding..."
+	arn.loading(true)
+
+	let {animeId, userId, userNick} = button.dataset
+
+	fetch("/api/animelist/" + userId + "/add", {
+		method: "POST",
+		body: animeId
+	})
+	.then(response => response.text())
+	.then(body => {
+		if(body !== "ok") {
+			throw body
+		}
+		
+		return arn.app.load("/+" + userNick + "/animelist/" + animeId, true)
+	})
+	.catch(console.error)
+	.then(() => arn.loading(false))
+}
+
+// Remove anime from collection
+export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElement) {
+	button.innerText = "Removing..."
+	arn.loading(true)
+
+	let {animeId, userId, userNick} = button.dataset
+
+	fetch("/api/animelist/" + userId + "/remove", {
+		method: "POST",
+		body: animeId
+	})
+	.then(response => response.text())
+	.then(body => {
+		if(body !== "ok") {
+			throw body
+		}
+		
+		return arn.app.load("/+" + userNick + "/animelist", true)
+	})
+	.catch(console.error)
+	.then(() => arn.loading(false))
+}

scripts/main.ts

@@ -10,6 +10,6 @@ document.addEventListener("readystatechange", arn.onReadyStateChange.bind(arn))
 window.onpopstate = e => {
 	if(e.state)
 		app.load(e.state, false)
-	else if(app.currentURL !== app.originalURL)
-		app.load(app.originalURL, false)
+	else if(app.currentPath !== app.originalPath)
+		app.load(app.originalPath, false)
 }

scripts/utils.ts

@@ -0,0 +1,7 @@
+export function* findAll(query: string) {
+	let elements = document.querySelectorAll(query)
+
+	for(let i = 0; i < elements.length; ++i) {
+		yield elements[i] as HTMLElement
+	}
+}