import {Component, render} from "preact"; import { log, makeIntercoolerRequest, pluralize, querySelectorAll, } from "../../../utilities/exports.js"; export function runGroupListSubscribeButtonFeature(): void { const count = addSubscribeButtonsToGroupList(); if (count > 0) { const pluralized = `${count} ${pluralize(count, "subscribe button")}`; log(`Added ${pluralized} to the group list`); } } function addSubscribeButtonsToGroupList(): number { if (window.location.pathname !== "/groups") { return 0; } let count = 0; for (const listItem of querySelectorAll( ".group-list li:not(.trx-group-list-subscribe-button)", )) { const group = listItem.querySelector(".link-group")?.textContent?.slice(1); if (group === undefined) { log(`Missing expected group in list item`, true); log(listItem, true); continue; } const button = document.createDocumentFragment(); render(, button); const activity = listItem.querySelector(".group-list-activity") ?? undefined; if (activity === undefined) { listItem.append(button); } else { activity.before(button); } listItem.classList.add("trx-group-list-subscribe-button"); count++; } return count; } type Props = { listItem: HTMLLIElement; group: string; }; type State = { isSubscribed: boolean; }; class SubscribeButton extends Component { constructor(props: Props) { super(props); this.state = { isSubscribed: props.listItem.classList.contains( "group-list-item-subscribed", ), }; } clickHandler = async () => { const {group} = this.props; const {isSubscribed} = this.state; const response = await makeIntercoolerRequest( `https://tildes.net/api/web/group/${group}/subscribe`, { method: isSubscribed ? "DELETE" : "PUT", }, ); if (response.status !== 200) { log(`Unexpected status code: ${response.status}`, true); return; } this.setState({isSubscribed: !isSubscribed}); }; render() { const {listItem} = this.props; const {isSubscribed} = this.state; if (isSubscribed) { listItem.classList.add("group-list-item-subscribed"); listItem.classList.remove("group-list-item-not-subscribed"); } else { listItem.classList.add("group-list-item-not-subscribed"); listItem.classList.remove("group-list-item-subscribed"); } return ( ); } }