Re-implement saving instances

Also implements saving of multiple instances, which
closes https://github.com/kytta/share2fedi/issues/29

lib/main.js

@@ -27,9 +27,7 @@
  */
 
 const LOCAL_STORAGE_KEY = "recentInstances";
-const RECENT_INSTANCES_SIZE = 5;
 
-const $form = document.querySelector("#js-s2f-form");
 const $instance = document.querySelector("#instance");
 
 /**
@@ -54,31 +52,6 @@ function getRecentInstances() {
 	return JSON.parse(storedValue);
 }
 
-function rememberInstance(instance) {
-	const recentInstances = getRecentInstances();
-
-	const index = recentInstances.indexOf(instance);
-	if (index >= 0) {
-		recentInstances.splice(index, 1);
-	}
-	recentInstances.unshift(instance);
-	recentInstances.length = RECENT_INSTANCES_SIZE;
-
-	window.localStorage.setItem(
-		LOCAL_STORAGE_KEY,
-		JSON.stringify(recentInstances),
-	);
-}
-
-function onFormSubmit(event) {
-	const formData = new FormData(event.target);
-
-	if (formData.get("remember")) {
-		rememberInstance(formData.get("instance"));
-	}
-	return true;
-}
-
 let prefillInstance = getRecentInstances()[0];
 
 const URLParameters = window.location.search.slice(1).split("&");
@@ -96,5 +69,3 @@ for (const URLParameter of URLParameters) {
 if (prefillInstance != undefined) {
 	$instance.value = normalizeUrl(prefillInstance);
 }
-
-$form.addEventListener("submit", onFormSubmit);

src/components/instance-select.astro

@@ -12,7 +12,7 @@ try {
 <datalist id="instanceDatalist">
 	{instances.map((instance) => <option value={instance} />)}
 </datalist>
-<label>
+<label id="s2f-instanceContainer">
 	Mastodon, Pleroma, or GNU Social instance
 	<div class="instance-input">
 		<span id="https-label">https://</span>
@@ -38,12 +38,19 @@ try {
 </label>
 
 <style lang="scss">
+	:global(.previously-used) {
+		color: var(--s2f-accent-color-contrast);
+		cursor: pointer;
+		text-decoration: 1px solid underline currentColor;
+	}
+
 	.instance-input {
 		position: relative;
 		display: flex;
 		flex-wrap: wrap;
 		align-items: stretch;
 		width: 100%;
+		margin-bottom: 1rem;
 
 		span {
 			display: flex;
@@ -61,10 +68,13 @@ try {
 </style>
 
 <script>
-	import { extractHost } from "../util";
+	import { extractHost, normalizeURL } from "../util";
 
 	const LOCAL_STORAGE_KEY = "recentInstances";
+	const RECENT_INSTANCES_SIZE = 5;
 
+	const $form = document.querySelector("#js-s2f-form");
+	const $instanceContainer = document.querySelector("#s2f-instanceContainer");
 	const $instance: HTMLInputElement = document.querySelector("#instance");
 
 	const getSavedInstances = (): Array<string> => {
@@ -76,8 +86,51 @@ try {
 		return JSON.parse(storageValue);
 	};
 
-	const savedInstance = getSavedInstances()[0];
-	if (savedInstance) {
-		$instance.value = extractHost(savedInstance);
+	const savedInstances = getSavedInstances();
+
+	if (savedInstances.length > 0) {
+		$instanceContainer.append(
+			"Previously used: ",
+			...savedInstances
+				.flatMap((instance, index) => {
+					if (!instance) {
+						return [];
+					}
+
+					const host = extractHost(instance);
+					if (index == 0) {
+						$instance.value = host;
+					}
+					const element = document.createElement("span");
+					element.textContent = host;
+					element.classList.add("previously-used");
+					element.addEventListener("click", () => {
+						$instance.value = host;
+					});
+					return [element, ", "];
+				})
+				.slice(0, -1),
+		);
 	}
+
+	$form.addEventListener("submit", (event) => {
+		const formData = new FormData(event.target as HTMLFormElement);
+
+		if (formData.get("remember")) {
+			const instance = normalizeURL(formData.get("instance") as string);
+			const index = savedInstances.indexOf(instance);
+			if (index >= 0) {
+				savedInstances.splice(index, 1);
+			}
+			savedInstances.unshift(instance);
+			savedInstances.length = RECENT_INSTANCES_SIZE;
+
+			window.localStorage.setItem(
+				LOCAL_STORAGE_KEY,
+				JSON.stringify(savedInstances),
+			);
+		}
+
+		return true;
+	});
 </script>

src/util.ts

@@ -1,3 +1,19 @@
+/**
+ * Adds missing "https://" and ending slash to the URL
+ *
+ * @param url URL to normalize
+ * @return normalized URL
+ */
+export const normalizeURL = (url: string): string => {
+	if (!(url.startsWith("https://") || url.startsWith("http://"))) {
+		url = "https://" + url;
+	}
+	if (!url.endsWith("/")) {
+		url += "/";
+	}
+	return url;
+};
+
 export const extractHost = (url: string): string => {
 	if (!(url.startsWith("https://") || url.startsWith("http://"))) {
 		url = "https://" + url;