👌 IMPROVE: use vue Content components and transmit serverData over initialState

- use vue components `Content` and `AppContent` with it's respective styling
  to be independent from server styling
- use OCP\IInitialStateService and @nextcloud/initial-state to transmit the serverData
  instead of using a hidden span element and jsonEncode/Decode
  this is needed to use the `Content` component, so the vue instance can be mounted to
  #content directly (otherwise server styling for #content interfers with the vue styling)
- also improves some general styling (mostly widths and margins/paddings)

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>

5 files changed, 34 insertions, 38 deletions

diff --git a/src/App.vue b/src/App.vue
index cd2f589f..689d9209 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <template>
-	<div v-if="!serverData.setup" id="app-social" :class="{public: serverData.public}">
-		<AppNavigation v-if="!serverData.public" id="app-navigation">
+	<Content v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}">
+		<AppNavigation v-if="!serverData.public">
 			<AppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to"
 				:title="item.title" :icon="item.icon" :exact="true" />
 		</AppNavigation>
-		<div id="app-content">
+		<AppContent>
 			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
 				<h3 v-if="!serverData.checks.checks.wellknown">
 					{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}
@@ -20,10 +20,10 @@
 			</div>
 			<Search v-if="searchTerm !== ''" :term="searchTerm" />
 			<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
-		</div>
-	</div>
-	<div v-else class="setup">
-		<template v-if="serverData.isAdmin">
+		</AppContent>
+	</Content>
+	<Content v-else app-name="social">
+		<AppContent v-if="serverData.isAdmin" class="setup">
 			<h2>{{ t('social', 'Social app setup') }}</h2>
 			<p>{{ t('social', 'ActivityPub requires a fixed URL to make entries unique. Note that this can not be changed later without resetting the Social app.') }}</p>
 			<form @submit.prevent="setCloudAddress">
@@ -51,38 +51,29 @@
 					</p>
 				</template>
 			</form>
-		</template>
-		<template v-else>
+		</AppContent>
+		<AppContent v-else class="setup">
 			<p>{{ t('social', 'The Social app needs to be set up by the server administrator.') }}</p>
-		</template>
-	</div>
+		</AppContent>
+	</Content>
 </template>
 
 <style scoped>
-	#app-social {
-		width: 100%;
-	}
-
-	#app-content .social__wrapper {
+	#app-content-vue .social__wrapper {
 		padding: 15px;
-		max-width: 600px;
+		max-width: 630px;
 		margin: auto;
 	}
 
-	@media (min-width: 1200px) {
-		#app-social:not(.public) #app-content .social__wrapper {
-			margin: 15px calc(50% - 350px - 75px);
-			max-width: 600px;
-		}
-	}
-
 	.setup {
-		margin: auto;
-		width: 700px;
+		margin: 0 auto !important;
+		padding: 15px;
+		max-width: 630px;
 	}
 
 	.setup input[type=url] {
 		width: 300px;
+		max-width: 100%;
 	}
 
 	#social-spacer a:hover,
@@ -97,15 +88,21 @@
 </style>
 
 <script>
-import { AppNavigation, AppNavigationItem } from '@nextcloud/vue'
+import Content from '@nextcloud/vue/dist/Components/Content'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 
 import axios from '@nextcloud/axios'
 import Search from './components/Search.vue'
 import currentuserMixin from './mixins/currentUserMixin'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'App',
 	components: {
+		Content,
+		AppContent,
 		AppNavigation,
 		AppNavigationItem,
 		Search
@@ -201,10 +198,7 @@ export default {
 	},
 	beforeMount: function() {
 		// importing server data into the store
-		const serverDataElmt = document.getElementById('serverData')
-		if (serverDataElmt !== null) {
-			this.$store.commit('setServerData', JSON.parse(serverDataElmt.dataset.server))
-		}
+		this.$store.commit('setServerData', loadState('social', 'serverData'))
 
 		if (!this.serverData.public) {
 			this.search = new OCA.Search(this.search, this.resetSearch)
diff --git a/src/main.js b/src/main.js
index 273e84cd..da4d28d5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,4 +64,4 @@ new Vue({
 	router: router,
 	render: h => h(App),
 	store: store
-}).$mount('#vue-content')
+}).$mount('#content')
diff --git a/src/ostatus.js b/src/ostatus.js
index e367b41c..8ac3ba6d 100644
--- a/src/ostatus.js
+++ b/src/ostatus.js
@@ -38,4 +38,4 @@ Vue.prototype.OCA = OCA
 new Vue({
 	render: h => h(OStatus),
 	store: store
-}).$mount('#vue-content')
+}).$mount('#content')
diff --git a/src/views/OStatus.vue b/src/views/OStatus.vue
index d7724b2b..978749c3 100644
--- a/src/views/OStatus.vue
+++ b/src/views/OStatus.vue
@@ -63,6 +63,7 @@
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import axios from '@nextcloud/axios'
 import currentuserMixin from './../mixins/currentUserMixin'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'App',
@@ -100,9 +101,8 @@ export default {
 	},
 	beforeMount: function() {
 		// importing server data into the store
-		const serverDataElmt = document.getElementById('serverData')
-		if (serverDataElmt !== null) {
-			const serverData = JSON.parse(document.getElementById('serverData').dataset.server)
+		try {
+			const serverData = loadState('social', 'serverData')
 			if (serverData.currentUser) {
 				window.oc_current_user = JSON.parse(JSON.stringify(serverData.currentUser))
 			}
@@ -113,7 +113,8 @@ export default {
 			if (this.serverData.local) {
 				this.$store.dispatch('fetchPublicAccountInfo', this.serverData.local)
 			}
-
+		} catch {
+			/* empty */
 		}
 	},
 	methods: {
diff --git a/src/views/TimelineSinglePost.vue b/src/views/TimelineSinglePost.vue
index b5ac5c0d..61824c74 100644
--- a/src/views/TimelineSinglePost.vue
+++ b/src/views/TimelineSinglePost.vue
@@ -22,6 +22,7 @@
 import Logger from '../logger'
 import TimelineEntry from './../components/TimelineEntry.vue'
 import TimelineList from './../components/TimelineList.vue'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'TimelineSinglePost',
@@ -43,7 +44,7 @@ export default {
 		// Get data of post clicked on
 		if (typeof this.$route.params.id === 'undefined') {
 			Logger.debug('displaying the single post timeline for a non logged-in user')
-			this.mainPost = JSON.parse(document.getElementById('postData').dataset.server)
+			this.mainPost = loadState('social', 'item')
 		} else {
 			this.mainPost = this.$store.getters.getPostFromTimeline(this.$route.params.id)
 		}