Move instance fetching to client

This commit is contained in:
Nikita Karamov 2023-03-26 16:49:22 +02:00
parent 454694447c
commit cded0a9cbb
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
2 changed files with 21 additions and 13 deletions

View file

@ -4,21 +4,10 @@
* Licensed under AGPL v3 or later
*/
let instances;
try {
const response = await fetch(new URL("/api/instances", Astro.url));
instances = await response.json();
} catch (error) {
console.error("Couln't fetch instances:", error);
instances = [];
}
const { prefilledInstance } = Astro.props;
---
<datalist id="instanceDatalist">
{instances.map((instance: string) => <option value={instance} />)}
</datalist>
<datalist id="instance-list"></datalist>
<label id="s2f-instanceContainer">
Fediverse instance
<div class="instance-input">
@ -28,7 +17,7 @@ const { prefilledInstance } = Astro.props;
name="instance"
id="instance"
placeholder="mastodon.social"
list="instanceDatalist"
list="instance-list"
required
aria-describedby="https-label"
value={prefilledInstance}
@ -144,3 +133,4 @@ const { prefilledInstance } = Astro.props;
return true;
});
</script>
<script src="../fetch-instances.ts" async defer></script>

18
src/fetch-instances.ts Normal file
View file

@ -0,0 +1,18 @@
const instanceList = document.querySelector(
"#instance-list",
) as HTMLDataListElement;
/** @type {Array<string>} */
let instances = [];
try {
const response = await fetch("/api/instances");
instances = await response.json();
} catch (error) {
console.error("Could not fetch instances:", error);
}
for (const instaneDomain of instances) {
const $option = document.createElement("option");
$option.value = instaneDomain;
instanceList.append($option);
}