ENHANCEMENT: Adds a composer to the single post timeline.

  This composer is hidden by default and will only show when
  some authenticated user clicks on the 'reply' icon of a post.

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>

3 files changed, 42 insertions, 1 deletions

diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue
index d3ff2318..69548669 100644
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@@ -144,6 +144,7 @@ export default {
 			return actorInfo.name !== '' ? actorInfo.name : actorInfo.preferredUsername
 		},
 		reply() {
+			this.$store.commit('setComposerDisplayStatus', true)
 			this.$root.$emit('composer-reply', this.item)
 		},
 		boost() {
diff --git a/src/store/timeline.js b/src/store/timeline.js
index 968e2e68..0bb4aa01 100644
--- a/src/store/timeline.js
+++ b/src/store/timeline.js
@@ -1,6 +1,8 @@
 /*
  * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
  *
+ * @file Timeline related store
+ *
  * @author Julius Härtl <jus@bitgrid.net>
  * @author Jonas Sulzer <jonas@violoncello.ch>
  *
@@ -26,12 +28,30 @@ import axios from '@nextcloud/axios'
 import Vue from 'vue'
 import { generateUrl } from '@nextcloud/router'
 
+/**
+ * @property {object}	timeline	- The posts' collection
+ * @property {int}	since 		- Time (EPOCH) of the most recent post
+ * @property {string}	type		- Timeline's type: 'home', 'single-post',...
+ * @property {object}	params		- Timeline's parameters
+ * @property {string}	account		-
+ */
 const state = {
 	timeline: {},
 	since: Math.floor(Date.now() / 1000) + 1,
 	type: 'home',
+	/**
+	 * @namespace params
+	 * @property {string}	account			???
+	 * @property {string}	id
+	 * @property {string}	localId
+	 * @property {string}	type 			???
+	 */
 	params: {},
-	account: ''
+	account: '',
+	/* Tells whether the composer should be displayed or not
+	 * @member {boolean}
+	 */
+	composerDisplayStatus: false
 }
 const mutations = {
 	addToTimeline(state, data) {
@@ -53,6 +73,9 @@ const mutations = {
 	setTimelineParams(state, params) {
 		state.params = params
 	},
+	setComposerDisplayStatus(state, status) {
+		state.composerDisplayStatus = status
+	},
 	setAccount(state, account) {
 		state.account = account
 	},
@@ -90,6 +113,9 @@ const mutations = {
 	}
 }
 const getters = {
+	getComposerDisplayStatus(state) {
+		return state.composerDisplayStatus
+	},
 	getTimeline(state) {
 		return Object.values(state.timeline).sort(function(a, b) {
 			return b.publishedTime - a.publishedTime
diff --git a/src/views/TimelineSinglePost.vue b/src/views/TimelineSinglePost.vue
index e14f77d5..bbb271a4 100644
--- a/src/views/TimelineSinglePost.vue
+++ b/src/views/TimelineSinglePost.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="social__wrapper">
 		<profile-info v-if="accountLoaded && accountInfo" :uid="uid" />
+		<composer v-show="composerDisplayStatus" />
 		<timeline-entry :item="mainPost" />
 		<timeline-list v-if="timeline" :type="$route.params.type" />
 	</div>
@@ -20,9 +21,11 @@
 </style>
 
 <script>
+import Composer from '../components/Composer.vue'
 import ProfileInfo from '../components/ProfileInfo.vue'
 import TimelineEntry from '../components/TimelineEntry.vue'
 import TimelineList from '../components/TimelineList.vue'
+import currentUserMixin from '../mixins/currentUserMixin'
 import accountMixins from '../mixins/accountMixins'
 import serverData from '../mixins/serverData'
 import { loadState } from '@nextcloud/initial-state'
@@ -30,12 +33,14 @@ import { loadState } from '@nextcloud/initial-state'
 export default {
 	name: 'TimelineSinglePost',
 	components: {
+		Composer,
 		ProfileInfo,
 		TimelineEntry,
 		TimelineList
 	},
 	mixins: [
 		accountMixins,
+		currentUserMixin,
 		serverData
 	],
 	data() {
@@ -46,6 +51,15 @@ export default {
 	},
 	computed: {
 		/**
+		 * @description Tells whether Composer shall be displayed or not
+		 *
+		 * @returns {boolean}
+		 *
+		 */
+		composerDisplayStatus() {
+			return this.$store.getters.getComposerDisplayStatus
+		},
+		/**
 		 * Extract the viewed account name from the URL
 		 *
 		 * @returns {String}