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, closeNavEventListener, GetUser, GoToPlayer } from "@/utils";
-import { closeNav, GetUser, GoToPlayer } from "/src/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 {
+const searchParamsStore = useSearchParamsStore();
-  name: "NavComponent",
+const infoStateStore = useInfoStateStore();
-  setup() {
+const playerDetailsStore = usePlayerDetailsStore();
-    const store = useStore();
-    const data = reactive({
-      searchInput: "",
-    });
 
-    const parseSearch = async () => {
+const data = reactive({
-      const input = data.searchInput;
+  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({
+const parseSearch = async () => {
-        type: "changeVanityUrl",
+  const input = data.searchInput;
-        id: "",
-      });
-      store.commit({
-        type: "changeId64",
-        id: "",
-      });
 
-      if (data.searchInput !== "") {
+  searchParamsStore.vanity_url = "";
-        if (id64Pattern.test(input)) {
+  searchParamsStore.id64 = "";
-          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)) {
-          const tmp = input.split("/")[4].split("?")[0];
-          if (id64Pattern.test(tmp)) {
-            store.commit({
-              type: "changeId64",
-              id: tmp,
-            });
-          }
-        } else {
-          store.commit({
-            type: "changeVanityUrl",
-            id: input,
-          });
-        }
 
-        if (
+  if (data.searchInput !== "") {
-          store.state.vanityUrl &&
+    if (ID64_PATTERN.test(input)) {
-          !vanityPattern.test(store.state.vanityUrl)
+      searchParamsStore.id64 = input;
-        ) {
+    } else if (input.match(CUSTOM_URL_PATTERN)) {
-          store.commit({
+      searchParamsStore.vanity_url = input.split("/")[4].split("?")[0];
-            type: "changeInfoState",
+    } else if (input.match(PROFILE_URL_PATTERN)) {
-            data: {
+      const tmp = input.split("/")[4].split("?")[0];
-              statuscode: STATUS.NOT_ACCEPTABLE,
+      if (ID64_PATTERN.test(tmp)) {
-              message:
+        searchParamsStore.id64 = tmp;
-                'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
+      }
-              type: "warning",
+    } else {
-            },
+      searchParamsStore.vanity_url = input;
-          });
+    }
-          store.commit({
-            type: "changeVanityUrl",
-            id: "",
-          });
-          data.searchInput = "";
-        }
 
-        if (store.state.id64 !== "" || store.state.vanityUrl !== "") {
+    if (
-          const resData = await GetUser(
+      searchParamsStore.vanity_url !== "" &&
-            store,
+      !VANITY_PATTERN.test(searchParamsStore.vanity_url)
-            store.state.vanityUrl || store.state.id64
+    ) {
-          );
+      const info: infoState = {
+        statuscode: STATUS.NOT_ACCEPTABLE,
+        message:
+          'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
+        type: "warning",
+      };
+      infoStateStore.addInfo(info);
+      searchParamsStore.vanity_url = "";
+      data.searchInput = "";
+    }
 
-          if (resData !== null) {
+    if (searchParamsStore.id64 !== "" || searchParamsStore.vanity_url !== "") {
-            data.searchInput = "";
+      const resData = await GetUser(
-            document.activeElement.blur();
+        playerDetailsStore,
+        searchParamsStore.vanity_url || searchParamsStore.id64
+      );
 
-            store.commit({
+      if (resData !== null) {
-              type: "changePlayerDetails",
+        data.searchInput = "";
-              data: resData,
+        const activeElem = document.activeElement as HTMLInputElement;
-            });
+        activeElem.blur();
 
-            if (store.state.vanityUrl) {
+        playerDetailsStore.playerDetails = resData;
-              closeNav("mainNav");
+
-              GoToPlayer(store.state.vanityUrl);
+        if (searchParamsStore.vanity_url) {
-            } else if (store.state.id64) {
+          closeNav("mainNav");
-              closeNav("mainNav");
+          GoToPlayer(searchParamsStore.vanity_url);
-              GoToPlayer(store.state.id64);
+        } else if (searchParamsStore.id64) {
-            }
+          closeNav("mainNav");
-          }
+          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>