From 03e84f22746c4e997a44068b6008edd1e69542a7 Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Mon, 25 Sep 2023 18:37:05 +0400
Subject: [PATCH 1/9] Remove the waitForRef implementations

---
 components/ExternalDa.vue    |  5 +----
 components/SpinButton.vue    |  1 -
 composables/useWaitForRef.js | 19 -----------------
 plugins/waitForRef.js        | 41 ------------------------------------
 4 files changed, 1 insertion(+), 65 deletions(-)
 delete mode 100644 composables/useWaitForRef.js
 delete mode 100644 plugins/waitForRef.js

diff --git a/components/ExternalDa.vue b/components/ExternalDa.vue
index 9e835049..57cc99e6 100644
--- a/components/ExternalDa.vue
+++ b/components/ExternalDa.vue
@@ -26,7 +26,6 @@
 <script setup>
 import { useMiscStore } from '../stores/misc'
 import { ref, computed, onBeforeUnmount } from '#imports'
-import { waitForRef } from '~/composables/useWaitForRef'
 
 const props = defineProps({
   adUnitPath: {
@@ -102,14 +101,12 @@ let shownFirst = false
 
 const emit = defineEmits(['rendered'])
 
-async function visibilityChanged(visible) {
+function visibilityChanged(visible) {
   try {
     if (visible && !shownFirst) {
       isVisible.value = visible
       shownFirst = true
 
-      await waitForRef(uniqueid)
-
       window.googletag = window.googletag || { cmd: [] }
       window.googletag.cmd.push(function () {
         window.googletag.pubads().collapseEmptyDivs()
diff --git a/components/SpinButton.vue b/components/SpinButton.vue
index b06e68d2..982fe2e6 100644
--- a/components/SpinButton.vue
+++ b/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'))
 
diff --git a/composables/useWaitForRef.js b/composables/useWaitForRef.js
deleted file mode 100644
index 3805a9a0..00000000
--- a/composables/useWaitForRef.js
+++ /dev/null
@@ -1,19 +0,0 @@
-function waitForRefTimer(ref, prop, resolve) {
-  if (ref) {
-    if (ref.value && (!prop || ref.value[prop])) {
-      resolve(ref.value)
-    } else {
-      setTimeout(() => {
-        waitForRefTimer(ref, prop, resolve)
-      }, 100)
-    }
-  }
-}
-
-export function waitForRef(ref, prop) {
-  // When a component is conditional using a v-if, it sometimes takes more than one tick for it to appear.  So
-  // we have a bit of a timer.
-  return new Promise((resolve) => {
-    waitForRefTimer(ref, prop, resolve)
-  })
-}
diff --git a/plugins/waitForRef.js b/plugins/waitForRef.js
deleted file mode 100644
index 1dbb6d57..00000000
--- a/plugins/waitForRef.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// We have some cases where components only get rendered conditionally, e.g. v-if.  The conventional way to handle
-// this is to use $nextTick, but we've seen examples where it takes more than one tick to render.
-//
-// Another approach is to emit events when the component is ready.  But this potentially requires us to ripple the
-// event up a component tree, which is quite clunky.
-//
-// So we have a cheap and cheerful poll timer.
-
-import { useMiscStore } from '~/stores/misc'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.mixin({
-    methods: {
-      waitForRefTimer(name, resolve) {
-        // Wait for no API calls.  This helps with async setup of components.  We think that the ref can exist while
-        // the setup() method is still running (asynchronously) and therefore the ref is not really ready yet.
-        const api = useMiscStore().apiCount
-        if (this.$refs[name] && !api) {
-          this.$nextTick(() => {
-            resolve(this.$refs[name])
-          })
-        } else {
-          setTimeout(() => {
-            // Don't callback if the window is unloading - the ref may be removed under our feet which causes a
-            // Sentry error.
-            if (!useMiscStore()?.unloading) {
-              this.waitForRefTimer(name, resolve)
-            }
-          }, 100)
-        }
-      },
-      waitForRef(name) {
-        // When a component is conditional using a v-if, it sometimes takes more than one tick for it to appear.  So
-        // we have a bit of a timer.
-        return new Promise((resolve) => {
-          this.waitForRefTimer(name, resolve)
-        })
-      },
-    },
-  })
-})

From 9e2692bdf71be676d1624861de9c2fcbc87ccdd0 Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Tue, 3 Oct 2023 22:22:57 +0400
Subject: [PATCH 2/9] Remove a waitForRef usage

---
 components/OurMessage.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/OurMessage.vue b/components/OurMessage.vue
index 89a0c8d5..973bbeea 100644
--- a/components/OurMessage.vue
+++ b/components/OurMessage.vue
@@ -247,8 +247,9 @@ export default {
     }
 
     if (this.scrollIntoView) {
-      await this.waitForRef('msg')
-      this.$refs.msg.scrollIntoView()
+      this.$nextTick(() => {
+        this.$refs.msg.scrollIntoView()
+      })
     }
   },
   methods: {

From 0e5219e9f05ee3a878a902caf8decc1e3315955d Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Tue, 3 Oct 2023 22:25:03 +0400
Subject: [PATCH 3/9] Don't use waitForRef for waiting for a ref inside the
 mounted hook

---
 components/PostCode.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/PostCode.vue b/components/PostCode.vue
index 71816797..bc7f4b4f 100644
--- a/components/PostCode.vue
+++ b/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.

From 822f784877592bfdcbace917d170aa36f20f79e2 Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Tue, 3 Oct 2023 22:33:12 +0400
Subject: [PATCH 4/9] Remove other usages of waitForRef

---
 components/DraggableMap.vue        | 1 -
 components/LoginModal.vue          | 3 +--
 components/MessageReplySection.vue | 2 +-
 components/NewsReply.vue           | 3 +--
 components/NewsThread.vue          | 5 ++---
 components/PostMap.vue             | 1 -
 components/PostMessage.vue         | 2 +-
 components/VisualiseMap.vue        | 6 ++----
 mixins/replyToPost.js              | 1 -
 pages/help.vue                     | 5 ++---
 pages/index.vue                    | 1 -
 11 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/components/DraggableMap.vue b/components/DraggableMap.vue
index a3b58b6b..ce48821c 100644
--- a/components/DraggableMap.vue
+++ b/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
 
diff --git a/components/LoginModal.vue b/components/LoginModal.vue
index ce3ce9ac..a4928381 100644
--- a/components/LoginModal.vue
+++ b/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'),
diff --git a/components/MessageReplySection.vue b/components/MessageReplySection.vue
index aeda703c..adf2f42a 100644
--- a/components/MessageReplySection.vue
+++ b/components/MessageReplySection.vue
@@ -220,7 +220,7 @@ export default {
           // Show the new user modal.
           this.newUserPassword = ret.password
           this.showNewUser = true
-          await this.waitForRef('newUserModal')
+
           // Now that we are logged in, we can reply.
           this.$refs.newUserModal?.show()
 
diff --git a/components/NewsReply.vue b/components/NewsReply.vue
index a4ae03ac..79d1df30 100644
--- a/components/NewsReply.vue
+++ b/components/NewsReply.vue
@@ -452,12 +452,11 @@ export default {
     showInfo() {
       this.showProfileModal = true
     },
-    async replyReply() {
+    replyReply() {
       console.log('Replying to', this.replyid, this.reply)
       this.replyingTo = this.replyid
       this.showReplyBox = true
 
-      await this.waitForRef('replybox')
       this.$refs.replybox.$el.focus()
 
       // Reply with tag.
diff --git a/components/NewsThread.vue b/components/NewsThread.vue
index db8b3174..8289318b 100644
--- a/components/NewsThread.vue
+++ b/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() {
diff --git a/components/PostMap.vue b/components/PostMap.vue
index a293fd79..a66bd31b 100644
--- a/components/PostMap.vue
+++ b/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)
diff --git a/components/PostMessage.vue b/components/PostMessage.vue
index 5e7d769c..6cd2d6ef 100644
--- a/components/PostMessage.vue
+++ b/components/PostMessage.vue
@@ -195,7 +195,7 @@ export default {
       this.pondBrowse = false
 
       // Give pond time to render.
-      this.waitForRef('filepond').then(() => {
+      this.$nextTick().then(() => {
         ;[...droppedFiles].forEach((f) => {
           this.$refs.filepond.addFile(f)
         })
diff --git a/components/VisualiseMap.vue b/components/VisualiseMap.vue
index f998d5f6..5ce1f41f 100644
--- a/components/VisualiseMap.vue
+++ b/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
diff --git a/mixins/replyToPost.js b/mixins/replyToPost.js
index b56474d0..aa6a23c3 100644
--- a/mixins/replyToPost.js
+++ b/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,
diff --git a/pages/help.vue b/pages/help.vue
index 5bdaeaf4..779c71a4 100644
--- a/pages/help.vue
+++ b/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
     },
   },
diff --git a/pages/index.vue b/pages/index.vue
index 6f00e5a0..2388c9c3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -250,7 +250,6 @@ export default {
     },
     async play() {
       if (process.client) {
-        await this.waitForRef('video')
         try {
           const videoEl = document.querySelector('video')
           videoEl.muted = true

From f56f1ed2d6417967950e6bef9d6a03fbc07c4e8b Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Wed, 11 Oct 2023 11:03:42 +0400
Subject: [PATCH 5/9] Address feedback for the ExternalDa.vue

---
 components/ExternalDa.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/ExternalDa.vue b/components/ExternalDa.vue
index 57cc99e6..67381da2 100644
--- a/components/ExternalDa.vue
+++ b/components/ExternalDa.vue
@@ -24,6 +24,7 @@
   </div>
 </template>
 <script setup>
+import { nextTick } from 'vue'
 import { useMiscStore } from '../stores/misc'
 import { ref, computed, onBeforeUnmount } from '#imports'
 
@@ -101,12 +102,14 @@ let shownFirst = false
 
 const emit = defineEmits(['rendered'])
 
-function visibilityChanged(visible) {
+async function visibilityChanged(visible) {
   try {
     if (visible && !shownFirst) {
       isVisible.value = visible
       shownFirst = true
 
+      await nextTick()
+
       window.googletag = window.googletag || { cmd: [] }
       window.googletag.cmd.push(function () {
         window.googletag.pubads().collapseEmptyDivs()

From 673d5ca252cc51f1e3301026bfb57ff7374d48a6 Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Wed, 11 Oct 2023 11:07:21 +0400
Subject: [PATCH 6/9] Address feedback for the MessageReplySection.vue

---
 components/MessageReplySection.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/MessageReplySection.vue b/components/MessageReplySection.vue
index adf2f42a..c95c1118 100644
--- a/components/MessageReplySection.vue
+++ b/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'
@@ -221,6 +222,8 @@ export default {
           this.newUserPassword = ret.password
           this.showNewUser = true
 
+          await nextTick()
+
           // Now that we are logged in, we can reply.
           this.$refs.newUserModal?.show()
 

From 136da609904697a0dd9ae609d9486bd8d43a732a Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Wed, 11 Oct 2023 11:09:25 +0400
Subject: [PATCH 7/9] Async/await instead of callbacks

---
 components/OurMessage.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/OurMessage.vue b/components/OurMessage.vue
index 973bbeea..a234893f 100644
--- a/components/OurMessage.vue
+++ b/components/OurMessage.vue
@@ -247,9 +247,8 @@ export default {
     }
 
     if (this.scrollIntoView) {
-      this.$nextTick(() => {
-        this.$refs.msg.scrollIntoView()
-      })
+      await this.$nextTick()
+      this.$refs.msg.scrollIntoView()
     }
   },
   methods: {

From d562f03cfe7893225b01687c60e9bfa678589fd0 Mon Sep 17 00:00:00 2001
From: Matthew Mamonov <g.smellyshovel@gmail.com>
Date: Wed, 11 Oct 2023 11:10:33 +0400
Subject: [PATCH 8/9] Async/await instead of callbacks

---
 components/PostMessage.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/PostMessage.vue b/components/PostMessage.vue
index 6cd2d6ef..5683924a 100644
--- a/components/PostMessage.vue
+++ b/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.$nextTick().then(() => {
-        ;[...droppedFiles].forEach((f) => {
-          this.$refs.filepond.addFile(f)
-        })
+      await this.$nextTick()
+      ;[...droppedFiles].forEach((f) => {
+        this.$refs.filepond.addFile(f)
       })
     },
     hidePhotoButton() {

From c92067aa394542d505fe08b196be8dfeb1e6ddc1 Mon Sep 17 00:00:00 2001
From: Edward Hibbert <edward@ehibbert.org.uk>
Date: Thu, 12 Oct 2023 09:52:40 +0100
Subject: [PATCH 9/9] Add nextTick for reply to reply.

---
 components/NewsReply.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/NewsReply.vue b/components/NewsReply.vue
index 79d1df30..6f335668 100644
--- a/components/NewsReply.vue
+++ b/components/NewsReply.vue
@@ -452,11 +452,11 @@ export default {
     showInfo() {
       this.showProfileModal = true
     },
-    replyReply() {
-      console.log('Replying to', this.replyid, this.reply)
+    async replyReply() {
       this.replyingTo = this.replyid
       this.showReplyBox = true
 
+      await this.$nextTick()
       this.$refs.replybox.$el.focus()
 
       // Reply with tag.