Factor out the Intercooler HTTP request into a utility function.
This commit is contained in:
parent
809943edcc
commit
2fa59f14d6
|
@ -1,5 +1,10 @@
|
||||||
import {Component, render} from "preact";
|
import {Component, render} from "preact";
|
||||||
import {log, pluralize, querySelectorAll} from "../../utilities/exports.js";
|
import {
|
||||||
|
log,
|
||||||
|
makeIntercoolerRequest,
|
||||||
|
pluralize,
|
||||||
|
querySelectorAll,
|
||||||
|
} from "../../utilities/exports.js";
|
||||||
|
|
||||||
export function runGroupListSubscribeButtonFeature(): void {
|
export function runGroupListSubscribeButtonFeature(): void {
|
||||||
const count = addSubscribeButtonsToGroupList();
|
const count = addSubscribeButtonsToGroupList();
|
||||||
|
@ -14,14 +19,6 @@ function addSubscribeButtonsToGroupList(): number {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
const csrfToken = document.querySelector<HTMLMetaElement>(
|
|
||||||
'meta[name="csrftoken"]',
|
|
||||||
)?.content;
|
|
||||||
if (csrfToken === undefined) {
|
|
||||||
log("No CSRF token found", true);
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
let count = 0;
|
let count = 0;
|
||||||
for (const listItem of querySelectorAll<HTMLLIElement>(
|
for (const listItem of querySelectorAll<HTMLLIElement>(
|
||||||
".group-list li:not(.trx-group-list-subscribe-button)",
|
".group-list li:not(.trx-group-list-subscribe-button)",
|
||||||
|
@ -34,14 +31,7 @@ function addSubscribeButtonsToGroupList(): number {
|
||||||
}
|
}
|
||||||
|
|
||||||
const button = document.createDocumentFragment();
|
const button = document.createDocumentFragment();
|
||||||
render(
|
render(<SubscribeButton group={group} listItem={listItem} />, button);
|
||||||
<SubscribeButton
|
|
||||||
csrfToken={csrfToken}
|
|
||||||
group={group}
|
|
||||||
listItem={listItem}
|
|
||||||
/>,
|
|
||||||
button,
|
|
||||||
);
|
|
||||||
|
|
||||||
const activity =
|
const activity =
|
||||||
listItem.querySelector(".group-list-activity") ?? undefined;
|
listItem.querySelector(".group-list-activity") ?? undefined;
|
||||||
|
@ -59,7 +49,6 @@ function addSubscribeButtonsToGroupList(): number {
|
||||||
}
|
}
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
csrfToken: string;
|
|
||||||
listItem: HTMLLIElement;
|
listItem: HTMLLIElement;
|
||||||
group: string;
|
group: string;
|
||||||
};
|
};
|
||||||
|
@ -80,21 +69,15 @@ class SubscribeButton extends Component<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
clickHandler = async () => {
|
clickHandler = async () => {
|
||||||
const {csrfToken, group} = this.props;
|
const {group} = this.props;
|
||||||
const {isSubscribed} = this.state;
|
const {isSubscribed} = this.state;
|
||||||
|
|
||||||
const response = await window.fetch(
|
const response = await makeIntercoolerRequest(
|
||||||
`https://tildes.net/api/web/group/${group}/subscribe`,
|
`https://tildes.net/api/web/group/${group}/subscribe`,
|
||||||
{
|
{
|
||||||
headers: {
|
|
||||||
"X-CSRF-Token": csrfToken,
|
|
||||||
"X-IC-Request": "true",
|
|
||||||
},
|
|
||||||
method: isSubscribed ? "DELETE" : "PUT",
|
method: isSubscribed ? "DELETE" : "PUT",
|
||||||
referrer: "https://tildes.net",
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
if (response.status !== 200) {
|
if (response.status !== 200) {
|
||||||
log(`Unexpected status code: ${response.status}`, true);
|
log(`Unexpected status code: ${response.status}`, true);
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -3,6 +3,7 @@ export * from "./components/link.js";
|
||||||
export * from "./elements.js";
|
export * from "./elements.js";
|
||||||
export * from "./globals.js";
|
export * from "./globals.js";
|
||||||
export * from "./groups.js";
|
export * from "./groups.js";
|
||||||
|
export * from "./http.js";
|
||||||
export * from "./logging.js";
|
export * from "./logging.js";
|
||||||
export * from "./query-selectors.js";
|
export * from "./query-selectors.js";
|
||||||
export * from "./report-a-bug.js";
|
export * from "./report-a-bug.js";
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
import {log} from "./logging.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make an HTTP request to the Tildes API that is normally used by Intercooler.
|
||||||
|
* This should only be used when using HTML elements from Tildes itself isn't
|
||||||
|
* feasible.
|
||||||
|
* @param url The API URL to call.
|
||||||
|
* @param request Any extra request details, note that some of these values will
|
||||||
|
* be overridden by the ones required to make a proper Intercooler request.
|
||||||
|
*/
|
||||||
|
export async function makeIntercoolerRequest(
|
||||||
|
url: string,
|
||||||
|
request: RequestInit,
|
||||||
|
): Promise<Response> {
|
||||||
|
if (!url.startsWith("https://tildes.net")) {
|
||||||
|
throw new Error(`Can't make Intercooler request to non-Tildes URL: ${url}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const csrfToken = document.querySelector<HTMLMetaElement>(
|
||||||
|
'meta[name="csrftoken"]',
|
||||||
|
)!.content;
|
||||||
|
|
||||||
|
const ic: RequestInit = {
|
||||||
|
headers: {
|
||||||
|
"X-CSRF-Token": csrfToken,
|
||||||
|
"X-IC-Request": "true",
|
||||||
|
// Include this header so it's clear this isn't a request actually sent by
|
||||||
|
// Intercooler but by Tildes ReExtended.
|
||||||
|
"X-TRX-Request": "true",
|
||||||
|
},
|
||||||
|
referrer: "https://tildes.net",
|
||||||
|
};
|
||||||
|
|
||||||
|
request.headers =
|
||||||
|
request.headers === undefined
|
||||||
|
? ic.headers
|
||||||
|
: {
|
||||||
|
...request.headers,
|
||||||
|
// Apply the Intercooler headers last so they can't be overridden.
|
||||||
|
...ic.headers,
|
||||||
|
};
|
||||||
|
|
||||||
|
request.referrer = request.referrer ?? ic.referrer;
|
||||||
|
|
||||||
|
// Explicitly log the request because content script HTTP calls don't show up
|
||||||
|
// in the Network DevTools.
|
||||||
|
log("Making Intercooler request:");
|
||||||
|
log(request);
|
||||||
|
return window.fetch(url, request);
|
||||||
|
}
|
Loading…
Reference in New Issue