fix: refresh content on reconnect

Akryum · Akryum · commit 52442fe6d750 · 2024-05-31T14:33:28.000+02:00
diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
@@ -37,7 +37,7 @@ export default defineComponent({
   },
 
   setup() {
-    const { isConnected, isInitializing, showDisplayDisconnected } = useAppConnection()
+    const { isConnected, isInitializing, showDisplayDisconnected, connectedTimes } = useAppConnection()
 
     function updateTheme(theme: string) {
       if (theme === 'dark' || theme === 'high-contrast' || (theme === 'auto' && chromeTheme === 'dark')) {
@@ -81,6 +81,7 @@ export default defineComponent({
       isConnected,
       isInitializing,
       showDisplayDisconnected,
+      connectedTimes,
       showAppsSelector,
       orientation,
       isChrome,
@@ -91,10 +92,9 @@ export default defineComponent({
 
 <template>
   <div
-    class="app w-full h-full flex relative outline-none"
+    class="app w-full h-full relative outline-none"
     :class="{
       'disconnected pointer-events-none': !isInitializing && !isConnected,
-      'flex-col': orientation === 'portrait',
     }"
     tabindex="0"
   >
@@ -108,7 +108,14 @@ export default defineComponent({
       class="absolute inset-0"
     />
 
-    <template v-else>
+    <div
+      v-else
+      :key="connectedTimes"
+      class="w-full h-full flex"
+      :class="{
+        'flex-col': orientation === 'portrait',
+      }"
+    >
       <AppHeader class="flex-none relative z-10 border-b border-gray-200 dark:border-gray-700" />
 
       <SplitPane
@@ -129,7 +136,7 @@ export default defineComponent({
           <router-view class="h-full overflow-auto" />
         </template>
       </SplitPane>
-    </template>
+    </div>
 
     <TeleportTarget id="root" />
 
diff --git a/packages/app-frontend/src/features/connection/index.ts b/packages/app-frontend/src/features/connection/index.ts
@@ -4,6 +4,7 @@ import { useNow } from '@vueuse/core'
 const isConnected = ref(false)
 const isInitializing = ref(true)
 const lastDisconnect = ref(0)
+const connectedTimes = ref(0)
 
 export function useAppConnection() {
   const now = useNow({
@@ -25,6 +26,7 @@ export function useAppConnection() {
     isInitializing,
     lastDisconnect,
     showDisplayDisconnected,
+    connectedTimes,
   }
 }
 
@@ -36,6 +38,9 @@ export function setAppConnected(value: boolean, force = false) {
     lastDisconnect.value = Date.now()
   }
   isConnected.value = value
+  if (value) {
+    connectedTimes.value++
+  }
 }
 
 export function setAppInitializing(value: boolean) {

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ import { useNow } from '@vueuse/core'`
`4`	`4`	`const isConnected = ref(false)`
`5`	`5`	`const isInitializing = ref(true)`
`6`	`6`	`const lastDisconnect = ref(0)`
	`7`	`+const connectedTimes = ref(0)`
`7`	`8`
`8`	`9`	`export function useAppConnection() {`
`9`	`10`	`const now = useNow({`
`@@ -25,6 +26,7 @@ export function useAppConnection() {`
`25`	`26`	`isInitializing,`
`26`	`27`	`lastDisconnect,`
`27`	`28`	`showDisplayDisconnected,`
	`29`	`+ connectedTimes,`
`28`	`30`	`}`
`29`	`31`	`}`
`30`	`32`
`@@ -36,6 +38,9 @@ export function setAppConnected(value: boolean, force = false) {`
`36`	`38`	`lastDisconnect.value = Date.now()`
`37`	`39`	`}`
`38`	`40`	`isConnected.value = value`
	`41`	`+ if (value) {`
	`42`	`+ connectedTimes.value++`
	`43`	`+ }`
`39`	`44`	`}`
`40`	`45`
`41`	`46`	`export function setAppInitializing(value: boolean) {`