feat: introduce vueuse composition utilities

packages/hoppscotch-app/components/app/Header.vue

@@ -75,7 +75,9 @@
                   :alt="currentUser.displayName"
                   :title="currentUser.displayName"
                   indicator
-                  :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+                  :indicator-styles="
+                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                  "
                 />
                 <ButtonSecondary
                   v-else
@@ -130,7 +132,7 @@
         </div>
       </div>
     </header>
-    <AppAnnouncement v-if="!isOnLine" />
+    <AppAnnouncement v-if="!network.isOnline" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
@@ -138,7 +140,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "@nuxtjs/composition-api"
+import { onMounted, reactive, ref } from "@nuxtjs/composition-api"
+import { useNetwork } from "@vueuse/core"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
@@ -164,7 +167,7 @@ const showSupport = ref(false)
 const showLogin = ref(false)
 const showTeamsModal = ref(false)
 
-const isOnLine = ref(navigator.onLine)
+const network = reactive(useNetwork())
 
 const currentUser = useReadonlyStream(probableUser$, null)
 
@@ -173,13 +176,6 @@ defineActionHandler("modals.support.toggle", () => {
 })
 
 onMounted(() => {
-  window.addEventListener("online", () => {
-    isOnLine.value = true
-  })
-  window.addEventListener("offline", () => {
-    isOnLine.value = false
-  })
-
   // Initializes the PWA code - checks if the app is installed,
   // etc.
   showInstallPrompt.value = intializePwa()

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -55,7 +55,6 @@ defineProps<{
     @apply bg-transparent;
     @apply z-2;
     @apply w-0.5;
-    @apply transition;
 
     content: "";
   }

packages/hoppscotch-app/components/history/index.vue

@@ -102,7 +102,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "@nuxtjs/composition-api"
-import * as timeago from "timeago.js"
+import { useTimeAgo } from "@vueuse/core"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import {
   useI18n,
@@ -135,7 +135,7 @@ const t = useI18n()
 
 const groupByDate = (array: any[], key: string) => {
   return array.reduce((rv: any, x: any) => {
-    ;(rv[timeago.format(x[key])] = rv[timeago.format(x[key])] || []).push(x)
+    ;(rv[useTimeAgo(x[key]).value] = rv[useTimeAgo(x[key]).value] || []).push(x)
     return rv
   }, {})
 }

packages/hoppscotch-app/package.json

@@ -103,7 +103,6 @@
     "splitpanes": "^2.3.8",
     "subscriptions-transport-ws": "^0.11.0",
     "tern": "^0.24.3",
-    "timeago.js": "^4.0.2",
     "uuid": "8.3.2",
     "vue-apollo": "^3.1.0",
     "vue-functional-data-merge": "^3.1.0",
@@ -152,6 +151,7 @@
     "@vue/composition-api": "^1.4.5",
     "@vue/runtime-dom": "^3.2.29",
     "@vue/test-utils": "^1.3.0",
+    "@vueuse/core": "^7.5.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.2.3",