Added status messages

scripts/Actions.ts

@@ -40,7 +40,7 @@ export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaE
 			throw body
 		}
 	})
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 	.then(() => {
 		arn.loading(false)
 
@@ -54,6 +54,11 @@ export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaE
 	})
 }
 
+// Close status message
+export function closeStatusMessage(arn: AnimeNotifier) {
+	arn.statusMessage.close()
+}
+
 // Load
 export function load(arn: AnimeNotifier, element: HTMLElement) {
 	let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
@@ -112,7 +117,7 @@ export function savePost(arn: AnimeNotifier, element: HTMLElement) {
 
 	arn.post(apiEndpoint, updates)
 	.then(() => arn.reloadContent())
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 }
 
 // like
@@ -121,7 +126,7 @@ export function like(arn: AnimeNotifier, element: HTMLElement) {
 
 	arn.post(apiEndpoint + "/like", null)
 	.then(() => arn.reloadContent())
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 }
 
 // unlike
@@ -130,7 +135,7 @@ export function unlike(arn: AnimeNotifier, element: HTMLElement) {
 
 	arn.post(apiEndpoint + "/unlike", null)
 	.then(() => arn.reloadContent())
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 }
 
 // Forum reply
@@ -147,7 +152,7 @@ export function forumReply(arn: AnimeNotifier) {
 	arn.post("/api/new/post", post)
 	.then(() => arn.reloadContent())
 	.then(() => textarea.value = "")
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 }
 
 // Create thread
@@ -164,7 +169,7 @@ export function createThread(arn: AnimeNotifier) {
 
 	arn.post("/api/new/thread", thread)
 	.then(() => arn.app.load("/forum/" + thread.tags[0]))
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 }
 
 // Create soundtrack
@@ -180,15 +185,9 @@ export function createSoundTrack(arn: AnimeNotifier, button: HTMLButtonElement)
 		tags: [anime.value, osu.value],
 	}
 
-	button.innerText = "Adding..."
-	button.disabled = true
-
 	arn.post("/api/new/soundtrack", soundtrack)
 	.then(() => arn.app.load("/music"))
-	.catch(err => {
-		console.error(err)
-		arn.reloadContent()
-	})
+	.catch(err => arn.statusMessage.showError(err))
 }
 
 // Search
@@ -250,7 +249,7 @@ export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
 		
 		return arn.reloadContent()
 	})
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 	.then(() => arn.loading(false))
 }
 
@@ -274,7 +273,7 @@ export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElemen
 		
 		return arn.app.load("/+" + userNick + "/animelist")
 	})
-	.catch(console.error)
+	.catch(err => arn.statusMessage.showError(err))
 	.then(() => arn.loading(false))
 }
 

scripts/AnimeNotifier.ts

@@ -3,6 +3,7 @@ import { Diff } from "./Diff"
 import { displayAiringDate, displayDate } from "./DateView"
 import { findAll, delay, canUseWebP } from "./Utils"
 import { MutationQueue } from "./MutationQueue"
+import { StatusMessage } from "./StatusMessage"
 import * as actions from "./Actions"
 
 export class AnimeNotifier {
@@ -10,6 +11,7 @@ export class AnimeNotifier {
 	user: HTMLElement
 	title: string
 	webpEnabled: boolean
+	statusMessage: StatusMessage
 	visibilityObserver: IntersectionObserver
 
 	imageFound: MutationQueue
@@ -89,6 +91,12 @@ export class AnimeNotifier {
 		this.app.content = this.app.find("content")
 		this.app.loading = this.app.find("loading")
 
+		// Status message
+		this.statusMessage = new StatusMessage(
+			this.app.find("status-message"),
+			this.app.find("status-message-text")
+		)
+
 		// Let's start
 		this.app.run()
 	}

scripts/StatusMessage.ts

@@ -0,0 +1,37 @@
+import { delay } from "./Utils"
+
+export class StatusMessage {
+	container: HTMLElement
+	text: HTMLElement
+
+	constructor(container: HTMLElement, text: HTMLElement) {
+		this.container = container
+		this.text = text
+	}
+
+	show(message: string, duration?: number) {
+		let messageId = String(Date.now())
+
+		this.text.innerText = message
+
+		this.container.classList.remove("fade-out")
+		this.container.dataset.messageId = messageId
+
+		delay(duration || 4000).then(() => {
+			if(this.container.dataset.messageId !== messageId) {
+				return
+			}
+
+			this.close()
+		})
+	}
+
+	showError(message: string, duration?: number) {
+		this.show(message, duration)
+		this.container.classList.add("error-message")
+	}
+
+	close() {
+		this.container.classList.add("fade-out")
+	}
+}