refactor(tools): input template

1 files changed, 26 insertions, 50 deletions

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>