refactor: remove discover tab and surprise me client code
This commit is contained in:
@@ -1,96 +0,0 @@
|
|||||||
import { parseClassList } from "./utils";
|
|
||||||
|
|
||||||
const setActiveDiscoverTab = (clickedTab: Element): void => {
|
|
||||||
const group = clickedTab.closest('[data-tab-group="discover"]');
|
|
||||||
if (!group) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// reset all tabs in group
|
|
||||||
const triggers = group.querySelectorAll("[data-tab-trigger]");
|
|
||||||
triggers.forEach((tab) => {
|
|
||||||
const activeClasses = parseClassList(tab.getAttribute("data-tab-active-classes"));
|
|
||||||
const inactiveClasses = parseClassList(tab.getAttribute("data-tab-inactive-classes"));
|
|
||||||
tab.classList.remove(...activeClasses);
|
|
||||||
tab.classList.add(...inactiveClasses);
|
|
||||||
});
|
|
||||||
|
|
||||||
// mark clicked tab as active
|
|
||||||
const activeClasses = parseClassList(clickedTab.getAttribute("data-tab-active-classes"));
|
|
||||||
const inactiveClasses = parseClassList(clickedTab.getAttribute("data-tab-inactive-classes"));
|
|
||||||
clickedTab.classList.remove(...inactiveClasses);
|
|
||||||
clickedTab.classList.add(...activeClasses);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDiscoverTabClick = (event: MouseEvent): void => {
|
|
||||||
const target = event.target;
|
|
||||||
if (!(target instanceof Element)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const trigger = target.closest("[data-tab-trigger]");
|
|
||||||
if (!trigger) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setActiveDiscoverTab(trigger);
|
|
||||||
};
|
|
||||||
|
|
||||||
const initDiscoverTabs = (): void => {
|
|
||||||
document.addEventListener("click", onDiscoverTabClick);
|
|
||||||
};
|
|
||||||
|
|
||||||
initDiscoverTabs();
|
|
||||||
|
|
||||||
const initSurpriseMe = (): void => {
|
|
||||||
let isFetchingRandom = false;
|
|
||||||
|
|
||||||
const onClick = async (): Promise<void> => {
|
|
||||||
if (isFetchingRandom) return;
|
|
||||||
|
|
||||||
const btn = document.getElementById("surprise-btn") as HTMLButtonElement | null;
|
|
||||||
if (!btn) return;
|
|
||||||
isFetchingRandom = true;
|
|
||||||
|
|
||||||
const spinner = document.getElementById("surprise-spinner");
|
|
||||||
const text = document.getElementById("surprise-text");
|
|
||||||
const icon = document.getElementById("surprise-icon");
|
|
||||||
|
|
||||||
btn.disabled = true;
|
|
||||||
spinner?.classList.remove("hidden");
|
|
||||||
icon?.classList.add("hidden");
|
|
||||||
if (text) text.textContent = "Picking…";
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/jikan/random/anime?t=${Date.now()}`, { cache: "no-store" });
|
|
||||||
if (!res.ok) throw new Error("Failed to fetch random anime");
|
|
||||||
const json = (await res.json()) as unknown;
|
|
||||||
const data = (json as { data?: unknown }).data as { mal_id?: unknown } | undefined;
|
|
||||||
const malId = typeof data?.mal_id === "number" ? data.mal_id : 0;
|
|
||||||
if (malId > 0) {
|
|
||||||
window.location.href = `/anime/${malId}`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw new Error("Random anime missing mal_id");
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
alert("Could not pick a random anime right now. Please try again.");
|
|
||||||
} finally {
|
|
||||||
isFetchingRandom = false;
|
|
||||||
btn.disabled = false;
|
|
||||||
spinner?.classList.add("hidden");
|
|
||||||
icon?.classList.remove("hidden");
|
|
||||||
if (text) text.textContent = "Surprise Me";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
|
||||||
const target = e.target;
|
|
||||||
if (!(target instanceof Element)) return;
|
|
||||||
const surprise = target.closest("[data-surprise-me]");
|
|
||||||
if (!surprise) return;
|
|
||||||
void onClick();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
initSurpriseMe();
|
|
||||||
Reference in New Issue
Block a user