Merge pull request #179 from Geode-solutions/fix/refactor_watches

fix(watches): stores props

Author: JulienChampagnol

components/Launcher.vue

@@ -2,7 +2,7 @@
   <v-container class="justify">
     <v-row align-content="center" align="center">
       <v-col
-        v-if="!is_captcha_validated"
+        v-if="!infra_store.is_captcha_validated"
         class="align"
         cols="12"
         align-self="center"
@@ -21,16 +21,21 @@
 <script setup>
   import Status from "@/utils/status.js"
 
-  const viewer_store = use_viewer_store()
   const infra_store = use_infra_store()
-  const { is_captcha_validated } = storeToRefs(infra_store)
-
   const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 
-  watch(is_captcha_validated, async (value) => {
-    if (value === true && process.client) {
-      await infra_store.create_backend()
-      await viewer_store.ws_connect()
+  watch(
+    () => infra_store.is_captcha_validated,
+    (value, oldValue) => {
+      if (value && !oldValue && process.client) {
+        infra_store.create_backend()
+      }
+    },
+  )
+
+  onMounted(() => {
+    if (infra_store.is_captcha_validated) {
+      infra_store.create_backend()
     }
   })
 </script>

components/Loading.vue

@@ -3,14 +3,14 @@
     <v-col cols="12" class="ma-3">
       <v-card loading>
         <v-card-title class="text-center">
-          Cloud instance is starting...
+          Microservices are starting...
         </v-card-title>
         <v-card-subtitle class="text-center">
           Why do you have to wait?
         </v-card-subtitle>
         <v-card-text class="text-center">
-          We start our server only on demand... and this takes a few minutes
-          before you can use our free app.
+          We start our microservices only on demand... and this takes a few
+          minutes before you can use our free app.
           <br />
           This is aligned with our energy sobriety policy. So be patient
           <v-icon color="primary" size="20">

components/PackagesVersions.vue

@@ -52,9 +52,12 @@
     await Promise.all(array_promise)
   }
 
-  watch(geode_store.status, (value) => {
-    if (value == Status.CONNECTED) get_packages_versions()
-  })
+  watch(
+    () => geode_store.status,
+    (value) => {
+      if (value == Status.CONNECTED) get_packages_versions()
+    },
+  )
 
   await get_packages_versions()
 </script>

components/Recaptcha.vue

@@ -2,10 +2,10 @@
   <ClientOnly>
     <vue-recaptcha
       ref="recaptcha"
-      :sitekey="site_key"
+      :sitekey="props.site_key"
       :load-recaptcha-script="true"
       align-self="center"
-      @expired="is_captcha_validated = false"
+      @expired="infra_store.is_captcha_validated = false"
       @verify="submit_recaptcha"
     />
   </ClientOnly>
@@ -14,12 +14,10 @@
 <script setup>
   import { VueRecaptcha } from "vue-recaptcha"
   const infra_store = use_infra_store()
-  const { is_captcha_validated } = storeToRefs(infra_store)
 
   const props = defineProps({
     site_key: { type: String, required: true },
   })
-  const { site_key } = props
 
   onMounted(() => {
     if (process.client) {

components/RemoteRenderingView.vue

@@ -14,7 +14,7 @@
         "
         class="pa-0"
         @click="get_x_y"
-        @keydown.esc="app_store.toggle_picking_mode(false)"
+        @keydown.esc="viewer_store.toggle_picking_mode(false)"
       />
     </div>
   </ClientOnly>
@@ -26,8 +26,12 @@
   import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
   import Status from "@/utils/status.js"
 
+  const props = defineProps({
+    viewId: { type: String, default: "-1" },
+  })
+
   const viewer_store = use_viewer_store()
-  const viewer = ref(null)
+  const viewer = useTemplateRef("viewer")
   const { width, height } = useElementSize(viewer)
 
   const { width: windowWidth, height: windowHeight } = useWindowSize()
@@ -43,13 +47,7 @@
     }
   }
 
-  const props = defineProps({
-    viewId: { type: String, default: "-1" },
-  })
-
-  const { viewId } = toRefs(props)
   const connected = ref(false)
-
   const view = vtkRemoteView.newInstance({
     rpcWheelEvent: "viewport.mouse.zoom.wheel",
   })
@@ -69,33 +67,42 @@
     resize()
   })
 
-  watch(viewer_store.picking_mode, (value) => {
-    const cursor = value ? "crosshair" : "pointer"
-    view.getCanvasView().setCursor(cursor)
-  })
+  watch(
+    () => viewer_store.picking_mode,
+    (value) => {
+      const cursor = value ? "crosshair" : "pointer"
+      view.getCanvasView().setCursor(cursor)
+    },
+  )
 
   watch([width, height], () => {
     resize()
   })
 
-  watch(viewer_store.client, () => {
-    connect()
-  })
-
-  watch(viewId, (id) => {
-    if (connected.value) {
-      view.setViewId(id)
-      view.render()
-    }
-  })
+  watch(
+    () => viewer_store.client,
+    () => {
+      connect()
+    },
+  )
+
+  watch(
+    () => props.viewId,
+    (id) => {
+      if (connected.value) {
+        view.setViewId(id)
+        view.render()
+      }
+    },
+  )
 
   function connect() {
-    if (!viewer_store.status !== Status.CONNECTED) {
+    if (viewer_store.status !== Status.CONNECTED) {
       return
     }
     const session = viewer_store.client.value.getConnection().getSession()
     view.setSession(session)
-    view.setViewId(viewId.value)
+    view.setViewId(props.viewId)
     connected.value = true
     view.render()
   }