refactored code

src/components/Nav.vue

@@ -33,6 +33,9 @@
           >
             Search!
           </button>
+          <div v-if="data.error" class="alert alert-warning" role="alert">
+            {{ data.error }}
+          </div>
         </form>
       </div>
 
@@ -44,18 +47,18 @@
 import {reactive} from "vue";
 import {useStore} from 'vuex'
 import {sanitize} from 'string-sanitizer'
-import router from "../router";
-import {GoToLink} from '../utils'
+import {GetUser, GoToLink, GoToPlayer} from '../utils'
 
 export default {
   name: 'Nav',
   setup() {
     const store = useStore()
     const data = reactive({
-      searchInput: ''
+      searchInput: '',
+      error: ''
     })
 
-    const parseSearch = () => {
+    const parseSearch = async () => {
       const input = data.searchInput
       const customUrlPattern = 'https://steamcommunity.com/id/'
       const profileUrlPattern = 'https://steamcommunity.com/profiles/'
@@ -64,30 +67,42 @@ export default {
       store.state.id64 = ''
       store.state.vanityUrl = ''
 
-      if (id64Pattern.test(input)) {
-        store.state.id64 = input
-      } else if (input.match(customUrlPattern)) {
-        store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
-      } else if (input.match(profileUrlPattern)) {
-        const tmp = input.split('/')[4].split('?')[0]
-        if (id64Pattern.test(tmp)) {
-          store.state.id64 = tmp
+      if (data.searchInput !== '') {
+        if (id64Pattern.test(input)) {
+          store.state.id64 = input
+        } else if (input.match(customUrlPattern)) {
+          store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
+        } else if (input.match(profileUrlPattern)) {
+          const tmp = input.split('/')[4].split('?')[0]
+          if (id64Pattern.test(tmp)) {
+            store.state.id64 = tmp
+          }
+        } else {
+          store.state.vanityUrl = sanitize(input)
         }
-      } else {
-        store.state.vanityUrl = sanitize(input)
-      }
 
-      if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
-        data.searchInput = ''
+        if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
+          const [res, resData] = await GetUser(store.state.vanityUrl || store.state.id64)
 
-        if (store.state.id64) {
-          router.push(`/player/${store.state.id64}`)
-        } else if (store.state.vanityUrl) {
-          router.push(`/player/${store.state.vanityUrl}`)
+          if (res === 200) {
+            data.searchInput = ''
+            document.activeElement.blur()
+
+            if (resData.vanity_url) {
+              GoToPlayer(resData.vanity_url)
+            } else if (resData.steamid64) {
+              GoToPlayer(resData.steamid64)
+            }
+          } else if (res === 404) {
+            data.searchInput = ''
+            data.error = `${resData} - Try again`
+
+            setTimeout(() => {
+              data.error = ''
+            }, 5000)
+          }
         }
       }
-
-      document.activeElement.blur()
     }
 
     return {
@@ -111,10 +126,15 @@ nav {
     li {
       font-size: 1.5rem;
       font-weight: lighter;
-      margin: 22px 10px 0 10px;
+      margin: 22px 0 0 10px;
       cursor: pointer;
       transition: 100ms ease-in-out;
 
+      .text-up {
+        font-size: 40%;
+        vertical-align: top;
+      }
+
       &:first-child {
         font-size: 2rem;
         font-weight: bold;
@@ -122,41 +142,46 @@ nav {
         margin-left: 0;
       }
 
-      &:hover {
+      &:hover router-link {
         color: var(--bs-info);
         transition: 100ms ease-in-out;
       }
     }
   }
 
-  .text-up {
-    font-size: 40%;
-    vertical-align: top;
-  }
+  form {
+    position: relative;
 
-  svg {
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
-  }
-
-  label {
-    padding-top: 6px;
-    font-size: 1.4rem;
-  }
-
-  input[type="search"] {
-    min-width: 300px;
-    max-width: 300px;
-
-    &:focus {
-      box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
-      transition: .2s ease-in-out;
-      transform: scale(.975);
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: currentColor;
     }
 
-    &::placeholder {
-      color: #aaa;
+    label {
+      padding-top: 6px;
+      font-size: 1.4rem;
+    }
+
+    input[type="search"] {
+      min-width: 300px;
+      max-width: 300px;
+
+      &:focus {
+        box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
+        transition: .2s ease-in-out;
+        transform: scale(.975);
+      }
+
+      &::placeholder {
+        color: #aaa;
+      }
+    }
+
+    .alert {
+      position: absolute;
+      right: 0;
+      top: 55px;
     }
   }
 }
@@ -179,7 +204,6 @@ nav {
     }
 
     #mainNav {
-
       ul {
         display: flex;
         flex-direction: column;
@@ -225,4 +249,4 @@ nav {
     }
   }
 }
-</style>
+</style>