updated NavComponent.vue to use new <script setup lang="ts"> syntax

src/components/NavComponent.vue

@@ -65,120 +65,90 @@
   </nav>
 </template>
 
-<script>
+<script setup lang="ts">
 import { reactive } from "vue";
-import { useStore } from "vuex";
-import { closeNav, GetUser, GoToPlayer } from "/src/utils";
+import { closeNav, closeNavEventListener, GetUser, GoToPlayer } from "@/utils";
+import {
+  CUSTOM_URL_PATTERN,
+  ID64_PATTERN,
+  PROFILE_URL_PATTERN,
+  VANITY_PATTERN,
+} from "@/constants";
 import { StatusCodes as STATUS } from "http-status-codes";
+import { useSearchParamsStore } from "@/stores/searchParams";
+import type { infoState } from "@/stores/infoState";
+import { useInfoStateStore } from "@/stores/infoState";
+import { usePlayerDetailsStore } from "@/stores/playerDetails";
 
-export default {
-  name: "NavComponent",
-  setup() {
-    const store = useStore();
-    const data = reactive({
+const searchParamsStore = useSearchParamsStore();
+const infoStateStore = useInfoStateStore();
+const playerDetailsStore = usePlayerDetailsStore();
+
+const data = reactive({
   searchInput: "",
-    });
+});
 
-    const parseSearch = async () => {
+const parseSearch = async () => {
   const input = data.searchInput;
-      const customUrlPattern = "https://steamcommunity.com/id/";
-      const profileUrlPattern = "https://steamcommunity.com/profiles/";
-      const id64Pattern = /^\d{17}$/;
-      const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/;
 
-      store.commit({
-        type: "changeVanityUrl",
-        id: "",
-      });
-      store.commit({
-        type: "changeId64",
-        id: "",
-      });
+  searchParamsStore.vanity_url = "";
+  searchParamsStore.id64 = "";
 
   if (data.searchInput !== "") {
-        if (id64Pattern.test(input)) {
-          store.commit({
-            type: "changeId64",
-            id: input,
-          });
-        } else if (input.match(customUrlPattern)) {
-          store.commit({
-            type: "changeVanityUrl",
-            id: input.split("/")[4].split("?")[0],
-          });
-        } else if (input.match(profileUrlPattern)) {
+    if (ID64_PATTERN.test(input)) {
+      searchParamsStore.id64 = input;
+    } else if (input.match(CUSTOM_URL_PATTERN)) {
+      searchParamsStore.vanity_url = input.split("/")[4].split("?")[0];
+    } else if (input.match(PROFILE_URL_PATTERN)) {
       const tmp = input.split("/")[4].split("?")[0];
-          if (id64Pattern.test(tmp)) {
-            store.commit({
-              type: "changeId64",
-              id: tmp,
-            });
+      if (ID64_PATTERN.test(tmp)) {
+        searchParamsStore.id64 = tmp;
       }
     } else {
-          store.commit({
-            type: "changeVanityUrl",
-            id: input,
-          });
+      searchParamsStore.vanity_url = input;
     }
 
     if (
-          store.state.vanityUrl &&
-          !vanityPattern.test(store.state.vanityUrl)
+      searchParamsStore.vanity_url !== "" &&
+      !VANITY_PATTERN.test(searchParamsStore.vanity_url)
     ) {
-          store.commit({
-            type: "changeInfoState",
-            data: {
+      const info: infoState = {
         statuscode: STATUS.NOT_ACCEPTABLE,
         message:
           'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
         type: "warning",
-            },
-          });
-          store.commit({
-            type: "changeVanityUrl",
-            id: "",
-          });
+      };
+      infoStateStore.addInfo(info);
+      searchParamsStore.vanity_url = "";
       data.searchInput = "";
     }
 
-        if (store.state.id64 !== "" || store.state.vanityUrl !== "") {
+    if (searchParamsStore.id64 !== "" || searchParamsStore.vanity_url !== "") {
       const resData = await GetUser(
-            store,
-            store.state.vanityUrl || store.state.id64
+        playerDetailsStore,
+        searchParamsStore.vanity_url || searchParamsStore.id64
       );
 
       if (resData !== null) {
         data.searchInput = "";
-            document.activeElement.blur();
+        const activeElem = document.activeElement as HTMLInputElement;
+        activeElem.blur();
 
-            store.commit({
-              type: "changePlayerDetails",
-              data: resData,
-            });
+        playerDetailsStore.playerDetails = resData;
 
-            if (store.state.vanityUrl) {
+        if (searchParamsStore.vanity_url) {
           closeNav("mainNav");
-              GoToPlayer(store.state.vanityUrl);
-            } else if (store.state.id64) {
+          GoToPlayer(searchParamsStore.vanity_url);
+        } else if (searchParamsStore.id64) {
           closeNav("mainNav");
-              GoToPlayer(store.state.id64);
+          GoToPlayer(searchParamsStore.id64);
         }
       }
     }
   }
-    };
-
-    document.addEventListener("click", (e) => {
-      if (!e.target.attributes.id) closeNav("mainNav");
-    });
-
-    return {
-      data,
-      parseSearch,
-      closeNav,
-    };
-  },
 };
+
+closeNavEventListener("mainNav");
 </script>
 
 <style lang="scss" scoped>