Show ancestors on single post timeline

Signed-off-by: Louis Chemineau <louis@chmn.me>

src/components/TimelineList.vue

@@ -65,6 +65,10 @@ export default {
 			type: String,
 			default: () => 'home',
 		},
+		showParents: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -139,7 +143,11 @@ export default {
 		 * @return {import('../store/timeline.js').APObject[]}
 		 */
 		timeline() {
-			return this.$store.getters.getTimeline
+			if (this.showParents) {
+				return this.$store.getters.getParentsTimeline
+			} else {
+				return this.$store.getters.getTimeline
+			}
 		},
 	},
 	mounted() {

src/store/timeline.js

@@ -36,6 +36,10 @@ const state = {
 	 * @type {Object<string, import('../types/Mastodon.js').Status>} timeline - The posts' collection
 	 */
 	timeline: {},
+	/**
+	 * @type {Object<string, import('../types/Mastodon.js').Status>} timeline - The parents posts' collection
+	 */
+	parentsTimeline: {},
 	/**
 	 * @type {string} type - Timeline's type: 'home', 'single-post',...
 	 */
@@ -65,14 +69,16 @@ const state = {
 const mutations = {
 	/**
 	 * @param state
-	 * @param {import('../types/Mastodon.js').Status[]} data
+	 * @param {import ('../types/Mastodon.js').Status[]|import('../types/Mastodon.js').Context} data
 	 */
 	addToTimeline(state, data) {
-		// TODO: fix to handle ancestors
-		if (data.descendants) {
-			data = data.descendants
+		if (Array.isArray(data)) {
+			data.forEach((post) => Vue.set(state.timeline, post.id, post))
+			state.parentsTimeline = {}
+		} else {
+			data.descendants.forEach((post) => Vue.set(state.timeline, post.id, post))
+			data.ancestors.forEach((post) => Vue.set(state.parentsTimeline, post.id, post))
 		}
-		data.forEach((post) => Vue.set(state.timeline, post.id, post))
 	},
 	/**
 	 * @param state
@@ -172,6 +178,11 @@ const getters = {
 			return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
 		})
 	},
+	getParentsTimeline(state) {
+		return Object.values(state.parentsTimeline).sort(function(a, b) {
+			return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+		})
+	},
 	getPostFromTimeline(state) {
 		return (postId) => {
 			if (typeof state.timeline[postId] !== 'undefined') {

src/types/Mastodon.js

@@ -157,6 +157,12 @@
  * @property {Poll} [poll] - Ex: null
  */
 
+/**
+ * @typedef Context - https://docs.joinmastodon.org/entities/Context
+ * @property {Status[]} ancestors - Parents in the thread.
+ * @property {Status[]} descendants - Children in the thread.
+ */
+
 /**
  * @typedef Notification - https://docs.joinmastodon.org/entities/Notification
  * @property {string} id - Ex: "https://example.com/users/@tommy""

src/views/TimelineSinglePost.vue

@@ -2,6 +2,7 @@
 	<div class="social__wrapper">
 		<ProfileInfo v-if="accountLoaded && accountInfo" :uid="uid" />
 		<Composer v-show="composerDisplayStatus" />
+		<TimelineList v-if="timeline" :show-parents="true" :type="$route.params.type" />
 		<TimelineEntry class="main-post" :item="mainPost" type="single-post" />
 		<TimelineList v-if="timeline" :type="$route.params.type" />
 	</div>