New, working, TimelineSinglePost view

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

src/router.js

@@ -26,6 +26,7 @@ import Router from 'vue-router'
 
 // Dynamic loading
 const Timeline = () => import('./views/Timeline')
+const TimelineSinglePost = () => import('./views/TimelineSinglePost')
 const Profile = () => import(/* webpackChunkName: "profile" */'./views/Profile')
 const ProfileTimeline = () => import(/* webpackChunkName: "profile" */'./views/ProfileTimeline')
 const ProfileFollowers = () => import(/* webpackChunkName: "profile" */'./views/ProfileFollowers')
@@ -60,7 +61,7 @@ export default new Router({
 		{
 			path: '/:index(index.php/)?apps/social/post?id=:id',
 			components: {
-				default: Timeline
+				default: TimelineSinglePost
 			},
 			props: true,
 			name: 'single-post'

src/store/timeline.js

@@ -21,6 +21,7 @@
  *
  */
 
+import Logger from '../logger'
 import axios from 'nextcloud-axios'
 import Vue from 'vue'
 
@@ -92,6 +93,15 @@ const getters = {
 		return Object.values(state.timeline).sort(function(a, b) {
 			return b.publishedTime - a.publishedTime
 		})
+	},
+	getPostFromTimeline(state) {
+		return (postId) => {
+			if (typeof state.timeline[postId] !== 'undefined') {
+				return state.timeline[postId]
+			} else {
+				Logger.warn('Could not find post in timeline', { postId: postId })
+			}
+		}
 	}
 }
 const actions = {
@@ -187,18 +197,18 @@ const actions = {
 		}
 
 		// Compute URl to get the data
-		let url
+		let url = ''
 		if (state.type === 'account') {
 			url = OC.generateUrl(`apps/social/api/v1/account/${state.account}/stream?limit=25&since=` + sinceTimestamp)
 		} else if (state.type === 'tags') {
 			url = OC.generateUrl(`apps/social/api/v1/stream/tag/${state.params.tag}?limit=25&since=` + sinceTimestamp)
 		} else if (state.type === 'single-post') {
-			url = OC.generateUrl(`apps/social/local/v1/post?id=${state.params.id}`)
+			url = OC.generateUrl(`apps/social/local/v1/post/replies?id=${state.params.id}&limit=5&since=` + sinceTimestamp)
 		} else {
 			url = OC.generateUrl(`apps/social/api/v1/stream/${state.type}?limit=25&since=` + sinceTimestamp)
 		}
 
-		// Get the data
+		// Get the data and add them to the timeline
 		return axios.get(url).then((response) => {
 
 			if (response.status === -1) {

src/views/TimelineSinglePost.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="social__wrapper">
+		<timeline-entry :item="mainPost" />
+		<timeline-list :type="$route.params.type" />
+	</div>
+</template>
+
+<style scoped>
+
+	.social__timeline {
+		max-width: 600px;
+		margin: 15px auto;
+	}
+
+	#app-content {
+		position: relative;
+	}
+
+</style>
+
+<script>
+import TimelineEntry from './../components/TimelineEntry.vue'
+import TimelineList from './../components/TimelineList.vue'
+
+export default {
+	name: 'TimelineSinglePost',
+	components: {
+		TimelineEntry,
+		TimelineList
+	},
+	mixins: [
+	],
+	data() {
+		return {
+			mainPost: {}
+		}
+	},
+	computed: {
+	},
+	beforeMount: function() {
+
+		// Get data of post clicked on
+		this.mainPost = this.$store.getters.getPostFromTimeline(this.$route.params.id)
+
+		// Prepare to display main post's replies in TimelineList component
+		this.$store.dispatch('changeTimelineType', {
+			type: this.$route.params.type,
+			params: this.$route.params
+		})
+	},
+	methods: {
+	}
+}
+</script>