1
Fork 0
tildes-reextended/source/content-scripts/features/miscellaneous/group-list-subscribe-button...

111 lines
2.7 KiB
TypeScript

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<HTMLLIElement>(
".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(<SubscribeButton group={group} listItem={listItem} />, 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<Props, State> {
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 (
<button
class={`btn btn-sm ${isSubscribed ? "btn-used" : ""}`}
onClick={this.clickHandler}
>
{isSubscribed ? "Unsubscribe" : "Subscribe"}
</button>
);
}
}