From 49b0f0a04a74039a1b82fbde731828e599123e93 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 9 Mar 2019 18:33:49 +0200 Subject: [PATCH 1/6] Fetching convos via MastoAPI. Had to change conversation component a bit for better support, since MastoAPI doesn't have coversation ids --- src/components/conversation/conversation.js | 23 +++++++------- src/services/api/api.service.js | 35 ++++++++++++++------- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 48b8aaaa..fd4303ca 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -25,7 +25,8 @@ const sortAndFilterConversation = (conversation) => { const conversation = { data () { return { - highlight: null + highlight: null, + relevantIds: [] } }, props: [ @@ -48,9 +49,11 @@ const conversation = { return [] } - const conversationId = this.status.statusnet_conversation_id - const statuses = this.$store.state.statuses.allStatuses - const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) + const statusesObject = this.$store.state.statuses.allStatusesObject + const conversation = this.relevantIds.reduce((acc, id) => { + acc.push(statusesObject[id]) + return acc + }, []) return sortAndFilterConversation(conversation) }, replies () { @@ -83,15 +86,13 @@ const conversation = { methods: { fetchConversation () { if (this.status) { - const conversationId = this.status.statusnet_conversation_id + const conversationId = this.status.id this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) - .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) + .then((statuses) => { + this.$store.dispatch('addNewStatuses', { statuses }) + statuses.forEach(status => this.relevantIds.push(status.id)) + }) .then(() => this.setHighlight(this.statusId)) - } else { - const id = this.$route.params.id - this.$store.state.api.backendInteractor.fetchStatus({id}) - .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) - .then(() => this.fetchConversation()) } }, getReplies (id) { diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 2de87026..a273f32e 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -11,9 +11,7 @@ const RETWEET_URL = '/api/statuses/retweet' const UNRETWEET_URL = '/api/statuses/unretweet' const STATUS_UPDATE_URL = '/api/statuses/update.json' const STATUS_DELETE_URL = '/api/statuses/destroy' -const STATUS_URL = '/api/statuses/show' const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload' -const CONVERSATION_URL = '/api/statusnet/conversation' const MENTIONS_URL = '/api/statuses/mentions.json' const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json' const FOLLOWERS_URL = '/api/statuses/followers.json' @@ -43,6 +41,8 @@ const DENY_USER_URL = '/api/pleroma/friendships/deny' const SUGGESTIONS_URL = '/api/v1/suggestions' const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites' +const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}` +const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context` import { each, map } from 'lodash' import { parseStatus, parseUser, parseNotification } from '../entity_normalizer/entity_normalizer.service.js' @@ -298,20 +298,31 @@ const fetchFollowRequests = ({credentials}) => { } const fetchConversation = ({id, credentials}) => { - let url = `${CONVERSATION_URL}/${id}.json?count=100` - return fetch(url, { headers: authHeaders(credentials) }) - .then((data) => { - if (data.ok) { - return data - } - throw new Error('Error fetching timeline', data) - }) - .then((data) => data.json()) + let url = MASTODON_STATUS_URL(id) + let urlContext = MASTODON_STATUS_CONTEXT_URL(id) + return Promise.all([ + fetch(url, { headers: authHeaders(credentials) }) + .then((data) => { + if (data.ok) { + return data + } + throw new Error('Error fetching timeline', data) + }) + .then((data) => data.json()), + fetch(urlContext, { headers: authHeaders(credentials) }) + .then((data) => { + if (data.ok) { + return data + } + throw new Error('Error fetching timeline', data) + }) + .then((data) => data.json())]) + .then(([status, context]) => [...context.ancestors, status, ...context.descendants]) .then((data) => data.map(parseStatus)) } const fetchStatus = ({id, credentials}) => { - let url = `${STATUS_URL}/${id}.json` + let url = MASTODON_STATUS_URL(id) return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { if (data.ok) { From ee94a6732aff8a4ab64ca885e07d53f58bfb4cb4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 21 Mar 2019 22:49:26 +0200 Subject: [PATCH 2/6] why did i do that --- src/components/conversation/conversation.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index fd4303ca..32bab144 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -93,6 +93,11 @@ const conversation = { statuses.forEach(status => this.relevantIds.push(status.id)) }) .then(() => this.setHighlight(this.statusId)) + } else { + const id = this.$route.params.id + this.$store.state.api.backendInteractor.fetchStatus({id}) + .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) + .then(() => this.fetchConversation()) } }, getReplies (id) { From d6c62fa50f1992c109c60d03aa44f5ed3ee94284 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 21 Mar 2019 23:27:14 +0200 Subject: [PATCH 3/6] minor UI improvements - keep current behavior of showing originating post initially --- src/components/conversation-page/conversation-page.js | 5 ++--- src/components/conversation/conversation.js | 11 ++++++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js index 8f1ac3d9..1da70ce9 100644 --- a/src/components/conversation-page/conversation-page.js +++ b/src/components/conversation-page/conversation-page.js @@ -1,5 +1,4 @@ import Conversation from '../conversation/conversation.vue' -import { find } from 'lodash' const conversationPage = { components: { @@ -8,8 +7,8 @@ const conversationPage = { computed: { statusoid () { const id = this.$route.params.id - const statuses = this.$store.state.statuses.allStatuses - const status = find(statuses, {id}) + const statuses = this.$store.state.statuses.allStatusesObject + const status = statuses[id] return status } diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 32bab144..e543102a 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -37,6 +37,15 @@ const conversation = { status () { return this.statusoid }, + idsToShow () { + if (this.relevantIds.length > 0) { + return this.relevantIds + } else if (this.statusId) { + return [this.statusId] + } else { + return [] + } + }, statusId () { if (this.statusoid.retweeted_status) { return this.statusoid.retweeted_status.id @@ -50,7 +59,7 @@ const conversation = { } const statusesObject = this.$store.state.statuses.allStatusesObject - const conversation = this.relevantIds.reduce((acc, id) => { + const conversation = this.idsToShow.reduce((acc, id) => { acc.push(statusesObject[id]) return acc }, []) From 67719e9a23da1420e8edbd41265cf6f46995b4b8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 21 Mar 2019 23:45:18 +0200 Subject: [PATCH 4/6] less hackery, more direct usage of mastoapi --- src/components/conversation/conversation.js | 11 +++++-- src/services/api/api.service.js | 32 ++++++++------------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index e543102a..ff18a9c8 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,5 @@ import { reduce, filter } from 'lodash' +import { set } from 'vue' import Status from '../status/status.vue' const sortById = (a, b) => { @@ -97,9 +98,13 @@ const conversation = { if (this.status) { const conversationId = this.status.id this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) - .then((statuses) => { - this.$store.dispatch('addNewStatuses', { statuses }) - statuses.forEach(status => this.relevantIds.push(status.id)) + .then(({ancestors, descendants}) => { + this.$store.dispatch('addNewStatuses', { statuses: ancestors }) + this.$store.dispatch('addNewStatuses', { statuses: descendants }) + set(this, 'relevantIds', [].concat( + ancestors.map(_ => _.id), + this.statusId, + descendants.map(_ => _.id))) }) .then(() => this.setHighlight(this.statusId)) } else { diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 1510d146..9f628b13 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -313,27 +313,19 @@ const fetchFollowRequests = ({credentials}) => { } const fetchConversation = ({id, credentials}) => { - let url = MASTODON_STATUS_URL(id) let urlContext = MASTODON_STATUS_CONTEXT_URL(id) - return Promise.all([ - fetch(url, { headers: authHeaders(credentials) }) - .then((data) => { - if (data.ok) { - return data - } - throw new Error('Error fetching timeline', data) - }) - .then((data) => data.json()), - fetch(urlContext, { headers: authHeaders(credentials) }) - .then((data) => { - if (data.ok) { - return data - } - throw new Error('Error fetching timeline', data) - }) - .then((data) => data.json())]) - .then(([status, context]) => [...context.ancestors, status, ...context.descendants]) - .then((data) => data.map(parseStatus)) + return fetch(urlContext, { headers: authHeaders(credentials) }) + .then((data) => { + if (data.ok) { + return data + } + throw new Error('Error fetching timeline', data) + }) + .then((data) => data.json()) + .then(({ancestors, descendants}) => ({ + ancestors: ancestors.map(parseStatus), + descendants: descendants.map(parseStatus) + })) } const fetchStatus = ({id, credentials}) => { From e617ed285e8ecb13829558197bdf04ffb9583ea9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 22 Mar 2019 00:05:20 +0200 Subject: [PATCH 5/6] reactivity fixes --- src/modules/statuses.js | 3 ++- src/modules/users.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/modules/statuses.js b/src/modules/statuses.js index f14b8703..a16342e0 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -1,4 +1,5 @@ import { remove, slice, each, find, maxBy, minBy, merge, first, last, isArray, omitBy } from 'lodash' +import { set } from 'vue' import apiService from '../services/api/api.service.js' // import parse from '../services/status_parser/status_parser.js' @@ -82,7 +83,7 @@ const mergeOrAdd = (arr, obj, item) => { // This is a new item, prepare it prepareStatus(item) arr.push(item) - obj[item.id] = item + set(obj, item.id, item) return {item, new: true} } } diff --git a/src/modules/users.js b/src/modules/users.js index 1fe12fc8..2950971f 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -16,9 +16,9 @@ export const mergeOrAdd = (arr, obj, item) => { } else { // This is a new item, prepare it arr.push(item) - obj[item.id] = item + set(obj, item.id, item) if (item.screen_name && !item.screen_name.includes('@')) { - obj[item.screen_name.toLowerCase()] = item + set(obj, item.screen_name.toLowerCase(), item) } return { item, new: true } } From cb122e3a99cbb5c3b76b9c5b15a9dd69ef3ed323 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 25 Mar 2019 20:11:06 +0200 Subject: [PATCH 6/6] review --- src/components/conversation/conversation.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index ff18a9c8..e806be8e 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -27,7 +27,7 @@ const conversation = { data () { return { highlight: null, - relevantIds: [] + converationStatusIds: [] } }, props: [ @@ -39,8 +39,8 @@ const conversation = { return this.statusoid }, idsToShow () { - if (this.relevantIds.length > 0) { - return this.relevantIds + if (this.converationStatusIds.length > 0) { + return this.converationStatusIds } else if (this.statusId) { return [this.statusId] } else { @@ -96,12 +96,11 @@ const conversation = { methods: { fetchConversation () { if (this.status) { - const conversationId = this.status.id - this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) + this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id}) .then(({ancestors, descendants}) => { this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) - set(this, 'relevantIds', [].concat( + set(this, 'converationStatusIds', [].concat( ancestors.map(_ => _.id), this.statusId, descendants.map(_ => _.id)))