refactor(tools): input template

2 files changed, 77 insertions, 50 deletions

diff --git a/src/lib/Tools/InputTemplate.svelte b/src/lib/Tools/InputTemplate.svelte
new file mode 100644
index 00000000..16b4ec8f
--- /dev/null
+++ b/src/lib/Tools/InputTemplate.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { clearAllParameters } from '$lib/Utility/parameters';
+	import { onMount } from 'svelte';
+
+	export let field: string;
+	export let submission: string;
+	export let event: string;
+	export let submitText: string;
+	export let saveParameters: string[] = [];
+	export let onSubmit = () => {
+		return;
+	};
+	export let prompt = `Enter a ${field.toLowerCase()} to search for to continue.`;
+
+	let input = '';
+
+	onMount(() => clearAllParameters(saveParameters));
+</script>
+
+<div class="card">
+	<p>
+		<input
+			type="text"
+			placeholder={field}
+			bind:value={input}
+			on:keypress={(e) => {
+				if (e.key === 'Enter') {
+					submission = input;
+
+					onSubmit();
+				}
+			}}
+		/>
+		<button
+			class="button-lined"
+			on:click={() => (submission = input)}
+			title="Or click your Enter key"
+			data-umami-event={event}
+		>
+			{submitText}
+		</button>
+	</p>
+
+	{#if submission !== ''}
+		<slot />
+	{:else}
+		<p />
+
+		{prompt}
+	{/if}
+</div>
diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index 7824a424..f47a4441 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -1,60 +1,36 @@
 <script lang="ts">
 	import { followers } from '$lib/AniList/following';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
-	import { clearAllParameters } from '$lib/Utility/parameters';
-	import { onMount } from 'svelte';
+	import InputTemplate from './InputTemplate.svelte';
 
-	let input = '';
-	let submit = '';
+	let submission = '';
 	let randomSeed = 0;
-
-	onMount(clearAllParameters);
 </script>
 
-<div class="card">
-	<p>
-		<!-- svelte-ignore missing-declaration -->
-		<input
-			type="text"
-			placeholder="Username"
-			bind:value={input}
-			on:keypress={(e) => {
-				if (e.key === 'Enter') {
-					submit = input;
-					randomSeed = Math.random();
-
-					// eslint-disable-next-line no-undef
-					umami.track('Random Follower');
-				}
-			}}
-		/>
-		<button
-			class="button-lined"
-			on:click={() => (submit = input) && (randomSeed = Math.random())}
-			title="Or click your Enter key"
-			data-umami-event="Random Follower"
-		>
-			Generate
-		</button>
-	</p>
-
-	{#if submit !== ''}
-		{#await followers(submit)}
-			Loading followers ... 50%
-		{:then users}
-			{@const user = users[Math.floor(randomSeed * users.length)]}
-
-			<p />
+<!-- svelte-ignore missing-declaration -->
+<InputTemplate
+	field="Username"
+	bind:submission
+	event="Random Follower"
+	submitText="Generate"
+	onSubmit={() => {
+		randomSeed = Math.random();
+
+		// eslint-disable-next-line no-undef
+		umami.track('Random Follower');
+	}}
+>
+	{#await followers(submission)}
+		Loading followers ... 50%
+	{:then users}
+		{@const user = users[Math.floor(randomSeed * users.length)]}
 
-			<a href={`https://anilist.co/user/${user.id}`} target="_blank">
-				{user.name}
-			</a>
-		{:catch}
-			<RateLimited type="Followers" list={false} />
-		{/await}
-	{:else}
 		<p />
 
-		Enter a username to search for to continue.
-	{/if}
-</div>
+		<a href={`https://anilist.co/user/${user.id}`} target="_blank">
+			{user.name}
+		</a>
+	{:catch}
+		<RateLimited type="Followers" list={false} />
+	{/await}
+</InputTemplate>