Merge pull request #181 from dskvr/hotfix/single-relays

Single relays load fast

src/components/relays/nav/RelaysNav.vue

@@ -27,10 +27,11 @@
 
 <script>
 import { defineComponent, defineAsyncComponent, toRefs } from 'vue'
-import {useRoute} from 'vue-router'
 import { setupStore } from '@/store'
 
 import RelaysLib from '@/shared/relays-lib.js'
+import SharedComputed from '@/shared/computed.js'
+
 import { setupNavData, mountNav, setActiveContent, loadNavContent, routeValid, parseHash, contentIsActive } from '@/shared/hash-router.js'
 // import RefreshTask from '@/components/relays/tasks/RefreshTask.vue'
 
@@ -76,12 +77,6 @@ export default defineComponent({
     //console.log('mounted in relays find nav')
   },
   methods: Object.assign(RelaysLib, setupNavData, mountNav, setActiveContent, loadNavContent, routeValid, parseHash, contentIsActive),
-  computed: {
-    path: function() { return useRoute().path },
-
-    // isActive(){
-    //     return (item) => item.slug==this.navActiveContent
-    // }
-  },
+  computed: SharedComputed,
 });
 </script>

src/components/relays/pages/RelaysFind.vue

@@ -54,11 +54,11 @@
 <script>
 //vue
 import { defineComponent, defineAsyncComponent } from 'vue'
-import {useRoute} from 'vue-router'
 //pinia
 import { setupStore } from '@/store'
 //shared methods
 import RelaysLib from '@/shared/relays-lib.js'
+import SharedComputed from '@/shared/computed.js'
 import { parseHash } from '@/shared/hash-router.js'
 //components
 // import RelaysNav from '@/components/relays/nav/RelaysNav.vue'
@@ -155,8 +155,7 @@ export default defineComponent({
     // this.relaysMountNav()
   },
 
-  computed: {
-    path: function() { return useRoute().path },
+  computed: Object.assign(SharedComputed, {
     activeSection: function(){ return this.store.layout.getActiveItem('relays')?.slug },
     activeSubsection: function(){ return this.store.layout.getActiveItem(`relays/find`)?.slug },
     navSubsection: function() { return this.store.layout.getNavGroup(`relays/find`) || [] },
@@ -170,7 +169,7 @@ export default defineComponent({
       }
     },
     parseHash
-  },
+  }),
 
   methods: Object.assign(RelaysLib, localMethods), 
 

src/components/relays/pages/RelaysHome.vue

@@ -24,7 +24,6 @@
 //vue
 
 import { defineComponent } from 'vue'
-import {useRoute} from 'vue-router'
 import { useHead } from '@vueuse/head'
 import { setupStore } from '@/store'
 //shared methods
@@ -111,7 +110,6 @@ export default defineComponent({
 
   computed: {
     // activeSection: function(){ return this.store.layout.getActiveItem('relays')?.slug },
-    path: function() { return useRoute().path },
     activeSubsection: function(){ return this.navSubsection?.slug },
     navSubsection: function() { return this.store.layout.getNavGroup(`relays/${this.activeSection}`) || [] },
     parseHash

src/components/relays/pages/RelaysSingle.vue

@@ -12,7 +12,7 @@
   <div id="wrapper" class="mt-8 mx-auto max-w-7xl">
     
 
-      <div v-if="store.tasks.isProcessing('relays') && !result" class="flex bg-slate-100 mt-12 shadow">
+      <div v-if="store.tasks.isProcessing('relays/check') && !result" class="flex bg-slate-100 mt-12 shadow">
         <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
           <span class="block lg:text-lg"><strong>Data has not yet populated and is currently being processed.</strong> Depending on the availability of of the <strong>{{ relay  }}</strong>, this may or may not be populated shortly.</span>
         </div>
@@ -617,10 +617,6 @@ export default defineComponent({
     cleanUrl: function(){
       return (relay) => relay.replace('wss://', '')
     },
-    relayFromUrl() {
-      // We will see what `params` is shortly
-      return `wss://${this.$route.params.relayUrl}`
-    },
 
     badgeLink(){
       return (nip) => `https://img.shields.io/static/v1?style=for-the-badge&label=NIP&message=${this.nipSignature(nip)}&color=black`

src/components/relays/tasks/RefreshTask.vue

@@ -1,29 +1,36 @@
 <template>
-  
-  <span 
-    v-if="!store.tasks.isActive || store.tasks.getActiveSlug === this.taskSlug"
-    class="text-white lg:text-sm mr-2 ml-2 mt-1.5 text-xs">
-
-    <span v-if="!store.tasks.isProcessing(this.taskSlug)">Checked {{ sinceLast }} ago</span>
-    <span v-if="store.tasks.isProcessing(this.taskSlug)" class="italic lg:pr-9">
-      <svg class="animate-spin mr-1 -mt-0.5 h-4 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-      </svg>
-      {{ this.store.tasks.getProcessed(this.taskSlug).length }}/{{ this.relays.length }} Relays Checked
+  <span
+      v-if="(!store.tasks.isActive || store.tasks.getActiveSlug === this.taskSlug) && !this.isSingle"
+      class="mt-0.5 inline">
+    <span class="text-white lg:text-sm mr-2 ml-2 mt-1 text-xs">
+      <span v-if="!store.tasks.isProcessing(this.taskSlug)">Checked {{ sinceLast }} ago</span>
+      <span v-if="store.tasks.isProcessing(this.taskSlug)" class="italic lg:pr-9">
+        <svg class="animate-spin mr-1 -mt-0.5 h-4 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        {{ this.store.tasks.getProcessed(this.taskSlug).length }}/{{ this.relays.length }} Relays Checked
+      </span>
+    </span>
+    <span class="text-white lg:text-sm mr-2 ml-2 text-xs" v-if="!store.tasks.isProcessing(this.taskSlug)">-</span>
+    <span class="text-white lg:text-sm mr-2 ml-2 text-xs" v-if="store.prefs.refresh && !store.tasks.isProcessing(this.taskSlug)"> 
+      Next check in: {{ untilNext  }}
     </span>
+    <button 
+      v-if="!store.tasks.isProcessing(this.taskSlug)"
+      class="mr-8 my-1 py-0 px-3 text-xs rounded border-b-3 border-slate-700 bg-slate-500  font-bold text-white hover:border-slate-500 hover:bg-slate-400" 
+      :disabled='store.tasks.isProcessing(this.taskSlug)' 
+      @click="refreshNow()">
+        Check{{ relay ? ` ${relay}` : "" }} Now
+    </button>
   </span>
-  <span class="text-white text-sm mr-2 mt-1.5" v-if="!store.tasks.isProcessing(this.taskSlug)">-</span>
-  <span class="text-white text-sm mr-2 mt-1.5" v-if="store.prefs.refresh && !store.tasks.isProcessing(this.taskSlug)"> 
-    Next check in: {{ untilNext  }}
+
+  <span
+    v-if="(store.tasks.getActiveSlug === this.taskSlug) && this.isSingle"
+      class="text-white lg:text-sm mr-2 ml-2 mt-1.5 text-xs">
+      Loading {{ relayFromUrl }}
   </span>
-  <button 
-    v-if="!store.tasks.isProcessing(this.taskSlug)"
-    class="mr-8 my-1 py-0 px-3 text-xs rounded border-b-3 border-slate-700 bg-slate-500  font-bold text-white hover:border-slate-500 hover:bg-slate-400" 
-    :disabled='store.tasks.isProcessing(this.taskSlug)' 
-    @click="refreshNow()">
-      Check{{ relay ? ` ${relay}` : "" }} Now
-  </button>
+  
 </template>
 
 <style scoped>
@@ -35,11 +42,9 @@ import { defineComponent, toRefs } from 'vue'
 
 import { setupStore } from '@/store'
 import RelaysLib from '@/shared/relays-lib.js'
-// import History from '@/shared/history.js'
 import SharedComputed from '@/shared/computed.js'
 
 import { Inspector } from 'nostr-relay-inspector'
-// import sizeof from 'object-sizeof'
 
 import { relays } from '../../../../relays.yaml'
 import { geo } from '../../../../cache/geo.yaml'
@@ -107,11 +112,9 @@ const localMethods = {
   },
 
   invalidate: async function(force, single){
-    // console.log('expired', !this.store.tasks.getLastUpdate(this.taskSlug), Date.now() - this.store.tasks.getLastUpdate(this.taskSlug) > this.store.prefs.expireAfter)
     if( (!this.isExpired(this.taskSlug) && !force) ) 
       return
 
-    // console.log('windowActive', this.windowActive)
     if(!this.windowActive)
       return
 
@@ -123,6 +126,8 @@ const localMethods = {
 
       if(single) {
         await this.check(single)
+          .then((result) => this.completeRelay(single, result) )
+          .catch( () => this.completeRelay(single) )
       } 
       else {
         for(let index = 0; index < relays.length; index++) {
@@ -130,15 +135,10 @@ const localMethods = {
           const relay = relays[index]
           this.check(relay)
             .then((result) => this.completeRelay(relay, result) )
-            // .then( async () => {
-            //   // this.history = await History()
-            // })
-            .catch( () => this.completeRelay(relay) )
+            .catch( () => this.completeRelay(relay) ) //wait, what? TODO: fix
         }
       } 
     }, true)
-
-    // console.log('queue', this.store.tasks.getActive)
     
   },
 
@@ -152,20 +152,18 @@ const localMethods = {
       this.results[relay] = result
       this.setCache(result)
     }
-      
-    if(this.store.tasks.getProcessed(this.taskSlug).length >= this.relays.length)
+    if(this.isSingle)
+      this.completeAll()
+    else if(this.store.tasks.getProcessed(this.taskSlug).length >= this.relays.length)
       this.completeAll()
   },
 
   completeAll: function(){
-    //console.log('completed')
     this.store.tasks.completeJob()
-    // this.store.tasks.finishProcessing(this.taskSlug)
     this.store.tasks.updateNow(this.taskSlug)
     this.store.relays.setAggregateCache('public', Object.keys(this.results).filter( result => this.results[result].aggregate === 'public' ))
     this.store.relays.setAggregateCache('restricted', Object.keys(this.results).filter( result => this.results[result].aggregate === 'restricted' ))
     this.store.relays.setAggregateCache('offline', Object.keys(this.results).filter( result => this.results[result].aggregate === 'offline' ))
-    //console.log('all are complete?', !this.store.tasks.isProcessing)
     this.setAverageLatency()
   },
 
@@ -195,15 +193,6 @@ const localMethods = {
           resolve(instance.result)
         })
         .run()
-        // .on('close', () => {
-        //   //console.log(`${relay.url} has closed`)
-        //   // reject()
-        // })
-        // .on('error', () => {
-        //   // console.log(result)
-        //   // reject()
-        // })
-        
     })
   },
   
@@ -231,8 +220,11 @@ const localMethods = {
 }
 
 export default defineComponent({
+
   name: 'RefreshComponent',
+
   components: {},
+
   setup(props){
     const {resultsProp: results} = toRefs(props)
     return { 
@@ -240,6 +232,7 @@ export default defineComponent({
       results: results
     }
   },
+
   data() {
     return {
       relay: "",
@@ -256,26 +249,16 @@ export default defineComponent({
       // history: null
     }
   },
+
   created(){
     clearInterval(this.interval)
-    // document.addEventListener("visibilitychange", () => {
-    //   if(document.visibilityState == 'visible')
-    //     this.store.layout.setActiveTab(this.$tabid)
-    //   // if 
-      
-    //   //   document.title = document.hidden ? "I'm away" : "I'm here";
-    // });
-    document.body.onfocus = () => {
-      // alert('tab focused')
-      //console.log(`tab #${this.$tabId} is active`)
-      
-    }
     document.addEventListener('visibilitychange', this.handleVisibility, false)
   },
+
   unmounted(){
     clearInterval(this.interval)
-    // document.removeEventListener("visibilitychange", this.handleVisibility, false);
   },
+
   beforeMount(){
     this.lastUpdate = this.store.tasks.getLastUpdate(this.taskSlug)
     this.untilNext = this.timeUntilRefresh()
@@ -284,36 +267,40 @@ export default defineComponent({
     this.relays = Array.from(new Set(relays))
     this.store.relays.setRelays(relays)
     this.store.relays.setGeo(geo)
-    
-    //console.log('total relays', this.relays, this.relays.length)
 
     for(let ri=0;ri-this.relays.length;ri++){
       const relay = this.relays[ri],
             cache = this.getCache(relay)
       this.results[relay] = cache
-      // //console.log('result', 'from result', this.results[relay], 'from cache', cache) 
     }
   },
+
   mounted(){
     this.migrateLegacy()
 
-    // console.log('is processing', this.store.tasks.isProcessing(this.taskSlug))
-
-    if(this.store.tasks.isProcessing(this.taskSlug))
-      this.invalidate(true)
-    else
-      this.invalidate()
-
+    if( this.isSingle ){
+      this.taskSlug = 'relays/single'
+      this.invalidate(true, this.relayFromUrl)
+    } else {
+      if(this.store.tasks.isProcessing(this.taskSlug))
+        this.invalidate(true)
+      else
+        this.invalidate()
+    }
     this.setRefreshInterval()
   },
+
   updated(){},
+
   computed: Object.assign(SharedComputed, {
     getDynamicTimeout: function(){
       const calculated = this.averageLatency*this.relays.length
       return calculated > 10000 ? calculated : 10000
     },
   }),
+
   methods: Object.assign(localMethods, RelaysLib),
+
   props: {
     resultsProp: {
       type: Object,
@@ -322,6 +309,7 @@ export default defineComponent({
       }
     },
   },
+
 })
 </script>
 

src/components/relays/tasks/TasksManager.vue

@@ -9,13 +9,14 @@
 
 <script>
 import { defineComponent, toRefs } from 'vue'
-import { useRoute } from 'vue-router'
 
 import { setupStore } from '@/store'
 
 import SharedComputed from '@/shared/computed.js'
 
 import RefreshTask from './RefreshTask.vue'
+
+
 // import RelayCanonicalsTask from './RelayCanonicalsTask.vue'
 // import RelayOperatorTask from './RelayOperatorTask.vue'
 
@@ -74,8 +75,6 @@ export default defineComponent({
       this.store.tasks.active.handler()
     }
   },
-  computed: Object.assign(SharedComputed, {
-    path: function() { return useRoute().path },
-  })
+  computed: Object.assign(SharedComputed, {})
 });
 </script>

src/shared/computed.js

@@ -1,5 +1,14 @@
+import {useRoute} from 'vue-router'
+
 export default {
     isExpired: function(){
         return (slug) => !this.store.tasks.getLastUpdate(slug) || Date.now() - this.store.tasks.getLastUpdate(slug) > this.store.prefs.expireAfter
     },
+    path: function() { return useRoute().path },
+    relayFromUrl() {
+        return `wss://${this.$route.params.relayUrl}`
+    },
+    isSingle(){
+        return typeof this.$route.params.relayUrl !== 'undefined'
+    }
 }