Don't hard reload when clicking "My IP Address"

TwistTheNeil · Feb 20, 2024 · c6d1195 · c6d1195
1 parent b44b16a
commit c6d1195
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
@@ -2,8 +2,7 @@
 <nav class="navbar navbar-light bg-light mb-5">
   <div class="container">
     <a class="navbar-brand" href="https://github.com/TwistTheNeil/rest-geoip">About</a>
-    <!-- replace href to something vue router capable -->
-    <a class="nav-link" aria-current="page" href="/">My IP Address</a>
+    <button type="button" class="btn btn-outline-primary btn-sm" @click="$emit('queryReset')">My IP Address</button>
   </div>
 </nav>
 </template>
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang='ts'>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import type { Ref } from 'vue';
 
   import SearchIcon from '@/components/icons/SearchIcon.vue';
@@ -28,8 +28,12 @@
   ]);
 
   const maxmindStore = useMaxmindDataStore();
-
   const { data } = storeToRefs(maxmindStore);
 
-  const queryString: Ref<string | null> = ref(data?.value?.IP || '');
+  const queryString: Ref<string> = ref('');
+  watch(data, () => {
+    if (queryString.value !== data.value.IP) {
+      queryString.value = '';
+    }
+  });
 </script>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <OverviewProgressbar />
-    <NavBar />
+    <NavBar @query-reset="resetIPAddressDetails" />
 
     <div class="container justify-content-center align-items-center">
       <SearchBar @query-request="fetchIPAddressDetails" />
@@ -23,6 +23,12 @@
   const overviewProgressbarStore = useOverviewProgressbarStore();
   const maxmindDataStore = useMaxmindDataStore();
 
+  const resetIPAddressDetails = async () => {
+    overviewProgressbarStore.update(30);
+    await maxmindDataStore.$reset();
+    overviewProgressbarStore.update(100);
+  };
+
   const fetchIPAddressDetails = async (ipAddress: string) => {
     if (!isIP(ipAddress)) {
       return;