From 29d8422e94007b983297b558bfbba245aed51939 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 1 Jan 2022 13:43:24 +0100
Subject: [PATCH] fix(ready): remove class form fragment

---
 src/App.vue                     | 32 ++++++++++++--------------------
 src/components/misc/ready.vue   |  3 ++-
 src/composables/useBodyClass.ts | 16 ++++++++++++++++
 src/composables/useOnline.ts    | 14 ++++++++++++++
 src/store/index.js              |  9 +--------
 src/store/mutation-types.js     |  1 -
 6 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 src/composables/useBodyClass.ts
 create mode 100644 src/composables/useOnline.ts

diff --git a/src/App.vue b/src/App.vue
index 2d7fe65f40..06a8185068 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,27 @@
 <template>
 	<ready>
-		<div :class="{'is-touch': isTouch}">
-		<div :class="{'is-hidden': !online}">
-			<template v-if="authUser">
-				<top-navigation/>
-				<content-auth/>
-			</template>
-			<content-link-share v-else-if="authLinkShare"/>
-			<no-auth-wrapper v-else>
-				<router-view/>
-			</no-auth-wrapper>
-			<Notification/>
-		</div>
+		<template v-if="authUser">
+			<top-navigation/>
+			<content-auth/>
+		</template>
+		<content-link-share v-else-if="authLinkShare"/>
+		<no-auth-wrapper v-else>
+			<router-view/>
+		</no-auth-wrapper>
+		<Notification/>
 
 		<transition name="fade">
 			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		</transition>
-		</div>
 	</ready>
 </template>
 
 <script lang="ts" setup>
-import {computed, watch, watchEffect, Ref} from 'vue'
+import {computed, watch, Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
-import {useOnline} from '@vueuse/core'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'
 
@@ -40,17 +35,14 @@ import Ready from '@/components/misc/ready.vue'
 
 import {setLanguage} from './i18n'
 import AccountDeleteService from '@/services/accountDelete'
-import {ONLINE} from '@/store/mutation-types'
 
 import {useColorScheme} from '@/composables/useColorScheme'
+import {useBodyClass} from '@/composables/useBodyClass'
 
 const store = useStore()
-const online = useOnline()
-watchEffect(() => store.commit(ONLINE, online.value))
-
 const router = useRouter()
 
-const isTouch = computed(isTouchDevice)
+useBodyClass('is-touch', isTouchDevice)
 const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
 
 const authUser = computed(() => store.getters['auth/authUser'])
diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index f97da1dcdd..07ee0ffa4e 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -50,11 +50,12 @@ import Message from '@/components/misc/message.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
+import {useOnline} from '@/composables/useOnline'
 
 const store = useStore()
 
 const ready = computed(() => store.state.vikunjaReady)
-const online = computed(() => store.state.online)
+const online = useOnline()
 
 const error = ref('')
 const showLoading = computed(() => !ready.value && error.value === '')
diff --git a/src/composables/useBodyClass.ts b/src/composables/useBodyClass.ts
new file mode 100644
index 0000000000..b5bbf9ff1b
--- /dev/null
+++ b/src/composables/useBodyClass.ts
@@ -0,0 +1,16 @@
+import {ref, watchEffect} from 'vue'
+import {tryOnBeforeUnmount} from '@vueuse/core'
+
+export function useBodyClass(className: string, defaultValue = false) {
+	const isActive = ref(defaultValue)
+
+	watchEffect(() => {
+		isActive.value
+			? document.body.classList.add(className)
+			: document.body.classList.remove(className)
+	})
+
+	tryOnBeforeUnmount(() => isActive.value && document.body.classList.remove(className))
+
+	return isActive
+}
\ No newline at end of file
diff --git a/src/composables/useOnline.ts b/src/composables/useOnline.ts
new file mode 100644
index 0000000000..b92d8a6b16
--- /dev/null
+++ b/src/composables/useOnline.ts
@@ -0,0 +1,14 @@
+import {ref} from 'vue'
+import {useOnline as useNetworkOnline, ConfigurableWindow} from '@vueuse/core'
+
+
+export function useOnline(options?: ConfigurableWindow) {
+	const fakeOnlineState = !!import.meta.env.VITE_IS_ONLINE
+	if (fakeOnlineState) {
+		console.log('Setting fake online state', fakeOnlineState)
+	}
+
+	return fakeOnlineState
+		? ref(true)
+		: useNetworkOnline(options)
+}
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 250d9c60b1..37c74ae8e6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,7 +7,7 @@ import {
 	LOADING,
 	LOADING_MODULE,
 	MENU_ACTIVE,
-	ONLINE, QUICK_ACTIONS_ACTIVE,
+	QUICK_ACTIONS_ACTIVE,
 } from './mutation-types'
 import config from './modules/config'
 import auth from './modules/auth'
@@ -36,7 +36,6 @@ export const store = createStore({
 	state: {
 		loading: false,
 		loadingModule: null,
-		online: true,
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
 		background: '',
@@ -53,12 +52,6 @@ export const store = createStore({
 		[LOADING_MODULE](state, module) {
 			state.loadingModule = module
 		},
-		[ONLINE](state, online) {
-			if (import.meta.env.VITE_IS_ONLINE) {
-				console.log('Setting fake online state', import.meta.env.VITE_IS_ONLINE)
-			}
-			state.online = !!import.meta.env.VITE_IS_ONLINE || online
-		},
 		[CURRENT_LIST](state, currentList) {
 			// Server updates don't return the right. Therefore the right is reset after updating the list which is
 			// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 7c37ee6c5a..ee3a993fb9 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -1,6 +1,5 @@
 export const LOADING = 'loading'
 export const LOADING_MODULE = 'loadingModule'
-export const ONLINE = 'online'
 export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'