Simplifies google event logic

src/components/SearchInput.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { event as gEvent } from "vue-gtag";
 import SearchIcon from "@assets/search-icon.svg";
 
@@ -14,54 +13,17 @@ const handleSearch = (event: Event): void => {
 	const inputValue = (event.target as HTMLInputElement).value.trim();
 	emit("update:query", inputValue);
 
+	sendGoogleEvent(inputValue);
 	updateUrlOnSearch(inputValue);
 };
 
 const handleClearSearch = (): void => {
 	emit("clear:query");
 
 	updateUrlOnSearch("");
-	setSearchPrevKeyUpTime(null);
 };
 
-const searchPrevKeyUpTime = ref<number | null>(null);
-const searchTimeoutId = ref<undefined | ReturnType<typeof setTimeout>>(undefined);
-
-const handleKeyUp = (event: KeyboardEvent) => {
-	const maxTimeoutTime = 5000;
-	const inputValue = (event.target as HTMLInputElement).value.trim();
-	const currentTime = event.timeStamp;
-
-	clearTimeout(searchTimeoutId.value);
-
-	if (!inputValue) {
-		setSearchPrevKeyUpTime(null);
-		return;
-	}
-
-	if (searchPrevKeyUpTime.value) {
-		const timeElapsed = currentTime - searchPrevKeyUpTime.value;
-
-		gEvent("search", {
-			event_category: "verbs-search",
-			search_term: inputValue,
-			search_time: timeElapsed.toFixed(),
-		});
-	}
-
-	setSearchPrevKeyUpTime(event.timeStamp);
-
-	// Wait 5 second and reset timer (if user doesn't type again)
-	searchTimeoutId.value = setTimeout(() => {
-		setSearchPrevKeyUpTime(null);
-	}, maxTimeoutTime);
-};
-
-const setSearchPrevKeyUpTime = (value: number | null) => {
-	searchPrevKeyUpTime.value = value;
-};
-
-const updateUrlOnSearch = (query: string) => {
+const updateUrlOnSearch = (query: string): void => {
 	const params: URLSearchParams = new URLSearchParams(window.location.search);
 
 	query ? params.set("search", query) : params.delete("search");
@@ -71,6 +33,17 @@ const updateUrlOnSearch = (query: string) => {
 
 	window.history.replaceState({}, "", newUrl);
 };
+
+const sendGoogleEvent = (searchValue: string): void => {
+	const currentDate = new Date().toLocaleDateString("uk-UA");
+	const currentTime = new Date().toLocaleTimeString("uk-UA");
+
+	gEvent("search", {
+		event_category: "verbs-search",
+		search_term: searchValue,
+		search_time: `${currentDate}, ${currentTime}`,
+	});
+};
 </script>
 
 <template>
@@ -84,24 +57,23 @@ const updateUrlOnSearch = (query: string) => {
 
 				<!-- Search input -->
 				<input
+					class="w-50 block rounded-lg border border-gray-300 bg-gray-50 p-2 pl-10 text-base text-gray-900 placeholder-gray-400 placeholder-opacity-75 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:placeholder-opacity-50 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+					id="search-input"
 					type="search"
 					placeholder="Search for verbs"
 					role="searchbox"
-					id="search-input"
-					class="w-50 block rounded-lg border border-gray-300 bg-gray-50 p-2 pl-10 text-base text-gray-900 placeholder-gray-400 placeholder-opacity-75 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:placeholder-opacity-50 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 					aria-description="Search results"
 					:value="query"
 					@input="handleSearch"
-					@keyup="handleKeyUp"
 				/>
 			</div>
 		</div>
 
 		<!-- Clears search button -->
 		<button
+			class="ml-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 			v-show="query"
 			type="button"
-			class="ml-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 			@click="handleClearSearch"
 		>
 			x