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"
@@ -11,25 +11,31 @@
         <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
         <Recaptcha :site_key="site_key" />
       </v-col>
-      <v-col v-else-if="!is_running && is_connexion_launched">
+      <v-col v-else-if="infra_store.status == Status.CREATING">
         <Loading />
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script setup>
-  const viewer_store = use_viewer_store()
-  const infra_store = use_infra_store()
-  const { is_captcha_validated, is_connexion_launched, is_running } =
-    storeToRefs(infra_store)
+  import Status from "@/utils/status.js"
 
+  const infra_store = use_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_connexion()
-      await viewer_store.ws_connect()
+  watch(
+    () => infra_store.is_captcha_validated,
+    async (value, oldValue) => {
+      if (value && !oldValue && process.client) {
+        await infra_store.create_backend()
+      }
+    },
+  )
+
+  onMounted(async () => {
+    if (infra_store.is_captcha_validated) {
+      await infra_store.create_backend()
     }
   })
 </script>

components/PackagesVersions.vue

@@ -19,9 +19,6 @@
 </template>
 
 <script setup>
-  const infra_store = use_infra_store()
-  const { is_running } = storeToRefs(infra_store)
-
   const props = defineProps({
     schema: { type: Object, required: true },
   })
@@ -53,9 +50,12 @@
     await Promise.all(array_promise)
   }
 
-  watch(is_running, () => {
-    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>
@@ -25,10 +25,12 @@
   import { useElementSize, useWindowSize } from "@vueuse/core"
   import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
 
-  const viewer_store = use_viewer_store()
-  const { client, is_running, picking_mode } = storeToRefs(viewer_store)
+  const props = defineProps({
+    viewId: { type: String, default: "-1" },
+  })
 
-  const viewer = ref(null)
+  const viewer_store = use_viewer_store()
+  const viewer = useTemplateRef("viewer")
   const { width, height } = useElementSize(viewer)
 
   const { width: windowWidth, height: windowHeight } = useWindowSize()
@@ -44,13 +46,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",
   })
@@ -70,33 +66,42 @@
     resize()
   })
 
-  watch(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(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 (!is_running.value) {
       return
     }
     const session = client.value.getConnection().getSession()
     view.setSession(session)
-    view.setViewId(viewId.value)
+    view.setViewId(props.viewId)
     connected.value = true
     view.render()
   }

stores/infra.js

@@ -4,8 +4,9 @@ import isElectron from "is-electron"
 export const use_infra_store = defineStore("infra", {
   state: () => ({
     ID: useStorage("ID", ""),
-    is_captcha_validated: false,
-    is_connexion_launched: false,
+    is_captcha_validated:
+      is_cloud() || process.env.NODE_ENV === "development" ? true : false,
+    status: Status.NOT_CREATED,
   }),
   getters: {
     is_cloud() {