From d0d17ccd3d20a061edd68cf13edb81e3f1952d6b Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Tue, 22 Mar 2022 10:11:27 +0100
Subject: [PATCH] updated NavComponent.vue to use new <script setup lang="ts">
 syntax

---
 src/components/NavComponent.vue | 170 +++++++++++++-------------------
 1 file changed, 70 insertions(+), 100 deletions(-)

diff --git a/src/components/NavComponent.vue b/src/components/NavComponent.vue
index d8ea380..e984745 100644
--- a/src/components/NavComponent.vue
+++ b/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({
-      searchInput: "",
-    });
+const searchParamsStore = useSearchParamsStore();
+const infoStateStore = useInfoStateStore();
+const playerDetailsStore = usePlayerDetailsStore();
 
-    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}$/;
+const data = reactive({
+  searchInput: "",
+});
 
-      store.commit({
-        type: "changeVanityUrl",
-        id: "",
-      });
-      store.commit({
-        type: "changeId64",
-        id: "",
-      });
+const parseSearch = async () => {
+  const input = data.searchInput;
 
-      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)) {
-          const tmp = input.split("/")[4].split("?")[0];
-          if (id64Pattern.test(tmp)) {
-            store.commit({
-              type: "changeId64",
-              id: tmp,
-            });
-          }
-        } else {
-          store.commit({
-            type: "changeVanityUrl",
-            id: input,
-          });
-        }
+  searchParamsStore.vanity_url = "";
+  searchParamsStore.id64 = "";
 
-        if (
-          store.state.vanityUrl &&
-          !vanityPattern.test(store.state.vanityUrl)
-        ) {
-          store.commit({
-            type: "changeInfoState",
-            data: {
-              statuscode: STATUS.NOT_ACCEPTABLE,
-              message:
-                'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
-              type: "warning",
-            },
-          });
-          store.commit({
-            type: "changeVanityUrl",
-            id: "",
-          });
-          data.searchInput = "";
-        }
+  if (data.searchInput !== "") {
+    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 (ID64_PATTERN.test(tmp)) {
+        searchParamsStore.id64 = tmp;
+      }
+    } else {
+      searchParamsStore.vanity_url = input;
+    }
 
-        if (store.state.id64 !== "" || store.state.vanityUrl !== "") {
-          const resData = await GetUser(
-            store,
-            store.state.vanityUrl || store.state.id64
-          );
+    if (
+      searchParamsStore.vanity_url !== "" &&
+      !VANITY_PATTERN.test(searchParamsStore.vanity_url)
+    ) {
+      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) {
-            data.searchInput = "";
-            document.activeElement.blur();
+    if (searchParamsStore.id64 !== "" || searchParamsStore.vanity_url !== "") {
+      const resData = await GetUser(
+        playerDetailsStore,
+        searchParamsStore.vanity_url || searchParamsStore.id64
+      );
 
-            store.commit({
-              type: "changePlayerDetails",
-              data: resData,
-            });
+      if (resData !== null) {
+        data.searchInput = "";
+        const activeElem = document.activeElement as HTMLInputElement;
+        activeElem.blur();
 
-            if (store.state.vanityUrl) {
-              closeNav("mainNav");
-              GoToPlayer(store.state.vanityUrl);
-            } else if (store.state.id64) {
-              closeNav("mainNav");
-              GoToPlayer(store.state.id64);
-            }
-          }
+        playerDetailsStore.playerDetails = resData;
+
+        if (searchParamsStore.vanity_url) {
+          closeNav("mainNav");
+          GoToPlayer(searchParamsStore.vanity_url);
+        } 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>