feat(stores): modify stores structures

BREAKING CHANGE: change getters and global variables name
is_cloud_running -> cloud_store.is_running

Author: JulienChampagnol

components/Launcher.vue

@@ -8,7 +8,7 @@
         <vue-recaptcha ref="recaptcha" :sitekey="site_key" :loadRecaptchaScript="true"
           @expired="is_captcha_validated = false" @verify="submit_recaptcha" align-self="center" />
       </v-col>
-      <v-col v-if="!is_cloud_running && is_connexion_launched">
+      <v-col v-if="!cloud_store.is_running">
         <Loading />
       </v-col>
     </v-row>
@@ -20,7 +20,7 @@ import { VueRecaptcha } from "vue-recaptcha"
 
 const websocket_store = use_websocket_store()
 const cloud_store = use_cloud_store()
-const { is_cloud_running, is_captcha_validated, is_connexion_launched } = storeToRefs(cloud_store)
+const { is_captcha_validated } = storeToRefs(cloud_store)
 
 const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 

components/PackagesVersions.vue

@@ -22,7 +22,6 @@ const props = defineProps({
 const { route_prefix } = props
 
 const cloud_store = use_cloud_store()
-const { is_cloud_running } = storeToRefs(cloud_store)
 
 const packages_versions = ref([])
 
@@ -34,20 +33,20 @@ async function get_packages_versions () {
   })
 }
 
-watch(is_cloud_running, (value) => {
+watch(cloud_store.is_running, (value) => {
   if (value === true) {
     get_packages_versions()
   }
 })
 
 onMounted(() => {
-  if (is_cloud_running.value === true) {
+  if (cloud_store.is_running === true) {
     get_packages_versions()
   }
 })
 
 onActivated(() => {
-  if (is_cloud_running.value === true) {
+  if (cloud_store.is_running === true) {
     get_packages_versions()
   }
 })

components/RemoteRenderingView.client.vue

@@ -14,7 +14,7 @@ import { useElementSize } from '@vueuse/core'
 const viewer_store = use_viewer_store()
 const { picking_mode } = storeToRefs(viewer_store)
 const websocket_store = use_websocket_store()
-const { client, is_client_created } = storeToRefs(websocket_store)
+const { client } = storeToRefs(websocket_store)
 
 function get_x_y (event) {
   if (picking_mode.value === true) {
@@ -77,7 +77,7 @@ onMounted(async () => {
 })
 
 function connect () {
-  if (!is_client_created.value) { return }
+  if (!websocket_store.is_running) { return }
   console.log('connecting', client.value)
   const session = client.value.getConnection().getSession()
   view.setSession(session)

components/Wrapper.vue

@@ -4,13 +4,13 @@
       <v-col>
         <Header :tool_name="tool_name" :cards_list="cards_list" />
       </v-col>
-      <v-col v-if="!is_cloud_running">
+      <v-col v-if="!cloud_store.is_running">
         <Launcher />
       </v-col>
-      <v-col v-if="is_cloud_running">
+      <v-col v-if="cloud_store.is_running">
         <Stepper />
       </v-col>
-      <v-col v-if="is_cloud_running">
+      <v-col v-if="cloud_store.is_running">
         <PackagesVersions :route_prefix="route_prefix" />
       </v-col>
     </v-row>
@@ -19,7 +19,6 @@
 
 <script setup>
 const cloud_store = use_cloud_store()
-const { is_cloud_running } = storeToRefs(cloud_store)
 
 const props = defineProps({
   cards_list: { type: Array, required: true },

composables/api_fetch.js

@@ -1,12 +1,11 @@
 export function api_fetch (request_url, request_options, { request_error_function, response_function, response_error_function } = {}) {
   const errors_store = use_errors_store()
-  const cloud_store = use_cloud_store()
   const geode_store = use_geode_store()
 
   geode_store.start_request()
   return useFetch(request_url,
     {
-      baseURL: cloud_store.geode_url,
+      baseURL: geode_store.base_url,
       ...request_options,
       onRequestError ({ error }) {
         geode_store.stop_request()

stores/cloud.js

@@ -7,31 +7,11 @@ export const use_cloud_store = defineStore('cloud', {
     is_connexion_launched: false,
   }),
   getters: {
-    geode_url: (state) => {
-      const public_runtime_config = useRuntimeConfig().public
-      var geode_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
-      if (process.env.NODE_ENV == 'production') {
-        geode_url = geode_url + `/${state.ID}/geode`
-      }
-      return geode_url
-    },
-    viewer_url: (state) => {
-      const public_runtime_config = useRuntimeConfig().public
-      var viewer_url = `${public_runtime_config.VIEWER_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.VIEWER_PORT}`
-      if (process.env.NODE_ENV == 'production') {
-        viewer_url = viewer_url + `/${state.ID}/viewer`
-      }
-      viewer_url = viewer_url + '/ws'
-      return viewer_url
-    },
-    is_cloud_running: () => {
-      return use_geode_store().is_client_created && use_websocket_store().is_client_created
+    is_running: () => {
+      return use_geode_store().is_running && use_websocket_store().is_running
     },
-    cloud_busy: () => {
-      const api_busy = use_geode_store().api_busy
-      const websocket_busy = use_geode_store().websocket_busy
-      const cloud_busy = api_busy || websocket_busy
-      return cloud_busy
+    is_busy: () => {
+      return use_geode_store().is_busy || use_websocket_store().is_busy
     }
 
   },
@@ -46,8 +26,8 @@ export const use_cloud_store = defineStore('cloud', {
         const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
         console.log("error", error)
         if (data.value !== null) {
-          geode_store.is_client_created = true
-          return this.ping_task()
+          geode_store.is_running = true
+          return geode_store.ping_task()
         } else {
           return this.create_backend()
         }
@@ -62,27 +42,12 @@ export const use_cloud_store = defineStore('cloud', {
       if (data.value !== null) {
         this.ID = data.value.ID
         localStorage.setItem('ID', data.value.ID)
-        geode_store.is_client_created = true
-        return this.ping_task()
+        geode_store.is_running = true
+        return geode_store.ping_task()
       } else {
         console.log("error : ", error)
         errors_store.server_error = true
       }
     },
-
-    ping_task () {
-      setInterval(() => this.do_ping(), 10 * 1000)
-    },
-    async do_ping () {
-      const geode_store = use_geode_store()
-      const errors_store = use_errors_store()
-      const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
-      if (data.value !== null) {
-        geode_store.is_client_created = true
-      } else {
-        errors_store.server_error = true
-        console.log("error : ", error)
-      }
-    }
   }
 })

stores/geode.js

@@ -1,14 +1,36 @@
 export const use_geode_store = defineStore('geode', {
   state: () => ({
     request_counter: 0,
-    is_client_created: false
+    is_running: false
   }),
   getters: {
-    api_busy: (state) => {
+    base_url: () => {
+      const cloud_store = use_cloud_store()
+      const public_runtime_config = useRuntimeConfig().public
+      var geode_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
+      if (process.env.NODE_ENV == 'production') {
+        geode_url = geode_url + `/${cloud_store.ID}/geode`
+      }
+      return geode_url
+    },
+    is_busy: (state) => {
       return state.request_counter > 0
     }
   },
   actions: {
+    ping_task () {
+      setInterval(() => this.do_ping(), 10 * 1000)
+    },
+    async do_ping () {
+      const errors_store = use_errors_store()
+      const { data, error } = await useFetch(`${this.base_url}/ping`, { method: 'POST' })
+      if (data.value !== null) {
+        this.is_running = true
+      } else {
+        errors_store.server_error = true
+        console.log("error : ", error)
+      }
+    },
     start_request () {
       this.request_counter++
     },

stores/websocket.js

@@ -16,23 +16,32 @@ export const use_websocket_store = defineStore('websocket', {
     client: {},
     config: null,
     request_counter: 0,
-    is_client_created: false
+    is_running: false
   }),
   getters: {
-    websocket_busy: (state) => {
+    base_url: () => {
+      const cloud_store = use_cloud_store()
+      const public_runtime_config = useRuntimeConfig().public
+      var viewer_url = `${public_runtime_config.VIEWER_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.VIEWER_PORT}`
+      if (process.env.NODE_ENV == 'production') {
+        viewer_url = viewer_url + `/${cloud_store.ID}/viewer`
+      }
+      viewer_url = viewer_url + '/ws'
+      return viewer_url
+    },
+    is_busy: (state) => {
       return state.request_counter > 0
     }
   },
   actions: {
     ws_connect () {
       const config = { application: 'cone' };
-      const cloud_store = use_cloud_store()
-      config.sessionURL = cloud_store.viewer_url
+      config.sessionURL = this.base_url
 
       const { client } = this
-      if (this.is_client_created && client.isConnected()) {
+      if (this.is_running && client.isConnected()) {
         client.disconnect(-1);
-        this.is_client_created = false;
+        this.is_running = false;
       }
       let clientToConnect = client;
       if (_.isEmpty(clientToConnect)) {
@@ -74,7 +83,7 @@ export const use_websocket_store = defineStore('websocket', {
           // Now that the client is ready let's setup the server for us
           this.ws_initialize_server()
           this.client.getRemote().vtk.reset().catch(console.error);
-          this.is_client_created = true;
+          this.is_running = true;
         })
         .catch((error) => {
           console.error(error);
@@ -94,11 +103,11 @@ export const use_websocket_store = defineStore('websocket', {
         this.client.getRemote().vtk.reset_camera().catch(console.error);
       }
     },
-  },
-  start_request () {
-    this.request_counter++
-  },
-  stop_request () {
-    this.request_counter--
+    start_request () {
+      this.request_counter++
+    },
+    stop_request () {
+      this.request_counter--
+    }
   }
 })