Merge pull request #34 from Freegle/remove-wait-for-ref

Remove wait for ref

components/DraggableMap.vue

@@ -138,7 +138,6 @@ export default {
     async ready() {
       const self = this
 
-      await this.waitForRef('map')
       if (process.client) {
         this.mapObject = this.$refs.map.leafletObject
 

components/ExternalDa.vue

@@ -24,9 +24,9 @@
   </div>
 </template>
 <script setup>
+import { nextTick } from 'vue'
 import { useMiscStore } from '../stores/misc'
 import { ref, computed, onBeforeUnmount } from '#imports'
-import { waitForRef } from '~/composables/useWaitForRef'
 
 const props = defineProps({
   adUnitPath: {
@@ -108,7 +108,7 @@ async function visibilityChanged(visible) {
       isVisible.value = visible
       shownFirst = true
 
-      await waitForRef(uniqueid)
+      await nextTick()
 
       window.googletag = window.googletag || { cmd: [] }
       window.googletag.cmd.push(function () {

components/LoginModal.vue

@@ -619,7 +619,7 @@ export default {
       this.forceLogin = false
       this.$router.push('/forgot')
     },
-    async installGoogleSDK() {
+    installGoogleSDK() {
       if (
         window &&
         window.google &&
@@ -637,7 +637,6 @@ export default {
           document.getElementById('googleLoginButton')
         )
 
-        await this.waitForRef('googleLoginButton')
         console.log('Found google button ref')
         window.google.accounts.id.renderButton(
           document.getElementById('googleLoginButton'),

components/MessageReplySection.vue

@@ -100,6 +100,7 @@
 </template>
 <script>
 import { mapWritableState } from 'pinia'
+import { nextTick } from 'vue'
 import { useMessageStore } from '../stores/message'
 import { useAuthStore } from '../stores/auth'
 import { useReplyStore } from '../stores/reply'
@@ -220,7 +221,9 @@ export default {
           // Show the new user modal.
           this.newUserPassword = ret.password
           this.showNewUser = true
-          await this.waitForRef('newUserModal')
+
+          await nextTick()
+
           // Now that we are logged in, we can reply.
           this.$refs.newUserModal?.show()
 

components/NewsReply.vue

@@ -453,11 +453,10 @@ export default {
       this.showProfileModal = true
     },
     async replyReply() {
-      console.log('Replying to', this.replyid, this.reply)
       this.replyingTo = this.replyid
       this.showReplyBox = true
 
-      await this.waitForRef('replybox')
+      await this.$nextTick()
       this.$refs.replybox.$el.focus()
 
       // Reply with tag.

components/NewsThread.vue

@@ -422,8 +422,7 @@ export default {
         this.scrollDownTo = this.scrollTo
       }
     },
-    async focusComment() {
-      await this.waitForRef('threadcomment')
+    focusComment() {
       this.$refs.threadcomment.$el.focus()
     },
     focusedComment() {
@@ -472,7 +471,7 @@ export default {
         this.threadcomment += '\n'
       }
     },
-    async show() {
+    show() {
       this.showEditModal = true
     },
     async save() {

components/OurMessage.vue

@@ -247,7 +247,7 @@ export default {
     }
 
     if (this.scrollIntoView) {
-      await this.waitForRef('msg')
+      await this.$nextTick()
       this.$refs.msg.scrollIntoView()
     }
   },

components/PostCode.vue

@@ -165,9 +165,7 @@ export default {
       return runtimeConfig.public.APIv1 + '/locations'
     },
   },
-  async mounted() {
-    await this.waitForRef('autocomplete')
-
+  mounted() {
     if (this.$refs.autocomplete) {
       if (this.focus) {
         // Focus on postcode to grab their attention.

components/PostMap.vue

@@ -474,7 +474,6 @@ export default {
     async ready() {
       const self = this
 
-      this.waitForRef('map')
       this.$emit('update:ready', true)
       this.mapObject = this.$refs.map.leafletObject
       this.$refs.map.leafletObject.fitBounds(this.initialBounds)

components/PostMessage.vue

@@ -182,7 +182,7 @@ export default {
         photoid: id,
       })
     },
-    drop(e) {
+    async drop(e) {
       // Although it's probably not widely used (I didn't know it even worked) in the old code you could drag and drog
       // a file onto the Add photos button.  So we should handle that too here.
       const droppedFiles = e.dataTransfer.files
@@ -195,10 +195,9 @@ export default {
       this.pondBrowse = false
 
       // Give pond time to render.
-      this.waitForRef('filepond').then(() => {
-        ;[...droppedFiles].forEach((f) => {
-          this.$refs.filepond.addFile(f)
-        })
+      await this.$nextTick()
+      ;[...droppedFiles].forEach((f) => {
+        this.$refs.filepond.addFile(f)
       })
     },
     hidePhotoButton() {

components/SpinButton.vue

@@ -34,7 +34,6 @@
 </template>
 <script setup>
 import { ref, defineAsyncComponent } from '#imports'
-import { waitForRef } from '~/composables/useWaitForRef'
 
 const ConfirmModal = defineAsyncComponent(() => import('./ConfirmModal'))
 

components/VisualiseMap.vue

@@ -180,22 +180,20 @@ export default {
               setTimeout(() => {
                 // Show the reply text.
                 this.showReplies = true
-                setTimeout(async () => {
+                setTimeout(() => {
                   // Collect - move the touser to the fromuser's location, stop showing the other replies.
                   this.showOthers = false
                   this.showReplies = false
-                  await this.waitForRef('touser')
                   this.$refs.touser.setLatLng(
                     this.item.fromlat,
                     this.item.fromlng
                   )
-                  setTimeout(async () => {
+                  setTimeout(() => {
                     if (this.$refs.touser && this.item) {
                       this.$refs.touser.setLatLng(
                         this.item.tolat,
                         this.item.tolng
                       )
-                      await this.waitForRef('message')
                       this.$refs.message.setLatLng(
                         this.item.tolat,
                         this.item.tolng

mixins/replyToPost.js

@@ -61,7 +61,6 @@ export default {
           )
 
           // Open the chat, which will send the message and go to the chat.  The chat will clear the store.
-          await this.waitForRef('replyToPostChatButton')
           await this.$refs.replyToPostChatButton.openChat(
             null,
             this.replyToSend.replyMessage,

pages/help.vue

@@ -396,9 +396,8 @@ export default {
       return date.format('Do MMMM, YYYY') + ' at ' + date.format('HH:mm')
     },
   },
-  async mounted() {
+  mounted() {
     // Scan the FAQs above and extract the plain text for each one, and then construct a search index.
-    await this.waitForRef('faq')
     const faqs = this.$refs.faq.children
 
     this.forIndex = []
@@ -424,7 +423,7 @@ export default {
     })
   },
   methods: {
-    async supporterInfo() {
+    supporterInfo() {
       this.showInfoModal = true
     },
   },

pages/index.vue

@@ -252,7 +252,6 @@ export default {
     },
     async play() {
       if (process.client) {
-        await this.waitForRef('video')
         try {
           const videoEl = document.querySelector('video')
           videoEl.muted = true