From 13735e7d4e027dda4c4a763bb2bd36a8cb2ea333 Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Mon, 10 Jun 2024 23:20:44 +0200
Subject: [PATCH] convert tags.js to ts

---
 assets/js/sources.ts           |  4 ++--
 assets/js/{tags.js => tags.ts} | 35 +++++++++++++++++++++-------------
 assets/js/tagsmisc.ts          |  4 ++--
 3 files changed, 26 insertions(+), 17 deletions(-)
 rename assets/js/{tags.js => tags.ts} (64%)

diff --git a/assets/js/sources.ts b/assets/js/sources.ts
index b2c29c45..f1fbb88a 100644
--- a/assets/js/sources.ts
+++ b/assets/js/sources.ts
@@ -1,7 +1,7 @@
 import { $ } from './utils/dom';
 import { inputDuplicatorCreator } from './input-duplicator';
 
-export interface SourcesEvent extends CustomEvent<Response> {
+export interface TagSourceEvent extends CustomEvent<Response> {
   target: HTMLElement,
 }
 
@@ -17,7 +17,7 @@ function setupInputs() {
 function imageSourcesCreator() {
   setupInputs();
 
-  document.addEventListener('fetchcomplete', (({ target, detail }: SourcesEvent) => {
+  document.addEventListener('fetchcomplete', (({ target, detail }: TagSourceEvent) => {
     const sourceSauce = $<HTMLElement>('.js-sourcesauce');
 
     if (sourceSauce && target && target.matches('#source-form')) {
diff --git a/assets/js/tags.js b/assets/js/tags.ts
similarity index 64%
rename from assets/js/tags.js
rename to assets/js/tags.ts
index 1a97c196..eaed02f7 100644
--- a/assets/js/tags.js
+++ b/assets/js/tags.ts
@@ -2,23 +2,28 @@
  * Tags Dropdown
  */
 
-import { showEl, hideEl } from './utils/dom';
+import { $$, showEl, hideEl } from './utils/dom';
+import { assertNotUndefined } from './utils/assert';
+import { TagSourceEvent } from './sources';
 
-function addTag(tagId, list) {
+type TagDropdownActionFunction = () => void;
+type TagDropdownActionList = Record<string, TagDropdownActionFunction>;
+
+function addTag(tagId: number, list: number[]) {
   list.push(tagId);
 }
 
-function removeTag(tagId, list) {
+function removeTag(tagId: number, list: number[]) {
   list.splice(list.indexOf(tagId), 1);
 }
 
-function createTagDropdown(tag) {
+function createTagDropdown(tag: HTMLSpanElement) {
   const { userIsSignedIn, userCanEditFilter, watchedTagList, spoileredTagList, hiddenTagList } = window.booru;
-  const [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = [].slice.call(tag.querySelectorAll('.tag__dropdown__link'));
-  const [ unwatched, watched, spoilered, hidden ] = [].slice.call(tag.querySelectorAll('.tag__state'));
-  const tagId = parseInt(tag.dataset.tagId, 10);
+  const [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = $$<HTMLElement>('.tag__dropdown__link');
+  const [ unwatched, watched, spoilered, hidden ] = $$<HTMLSpanElement>('.tag__state');
+  const tagId = parseInt(assertNotUndefined(tag.dataset.tagId), 10);
 
-  const actions = {
+  const actions: TagDropdownActionList = {
     unwatch()   { hideEl(unwatch, watched);     showEl(watch, unwatched);     removeTag(tagId, watchedTagList);   },
     watch()     { hideEl(watch, unwatched);     showEl(unwatch, watched);     addTag(tagId, watchedTagList);      },
 
@@ -51,11 +56,15 @@ function createTagDropdown(tag) {
   if (userIsSignedIn &&
      !userCanEditFilter) showEl(filter);
 
-  tag.addEventListener('fetchcomplete', event => actions[event.target.dataset.tagAction]());
+  tag.addEventListener('fetchcomplete', ((event: TagSourceEvent) => {
+    const act = event.target.dataset.tagAction;
+
+    if (act && actions[act]) {
+      actions[act]()
+    }
+  }) as EventListener);
 }
 
-function initTagDropdown() {
-  [].forEach.call(document.querySelectorAll('.tag.dropdown'), createTagDropdown);
+export function initTagDropdown() {
+  [].forEach.call($$<HTMLSpanElement>('.tag.dropdown'), createTagDropdown);
 }
-
-export { initTagDropdown };
diff --git a/assets/js/tagsmisc.ts b/assets/js/tagsmisc.ts
index ea5f4976..e9882bae 100644
--- a/assets/js/tagsmisc.ts
+++ b/assets/js/tagsmisc.ts
@@ -6,7 +6,7 @@ import { $, $$ } from './utils/dom';
 import store from './utils/store';
 import { initTagDropdown } from './tags';
 import { setupTagsInput, reloadTagsInput } from './tagsinput';
-import { SourcesEvent } from './sources';
+import { TagSourceEvent } from './sources';
 
 type TagInputActionFunction = (tagInput: HTMLTextAreaElement | null) => void
 type TagInputActionList = {
@@ -49,7 +49,7 @@ function setupTags() {
   });
 }
 
-function updateTagSauce({target, detail}: SourcesEvent) {
+function updateTagSauce({target, detail}: TagSourceEvent) {
   const tagSauce = $<HTMLDivElement>('.js-tagsauce');
 
   if (tagSauce && target.matches('#tags-form')) {