Add list timeline rendering functionality

the list name is missing; this is because the API request to get it is different
to the API request for receiving the list timeline, and is not yet implemented.

src/boot/routes.js

@@ -20,6 +20,7 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import ListTimeline from 'components/list_timeline/list_timeline.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -69,7 +70,8 @@ export default (store) => {
     { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
+    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
+    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/list_timeline/list_timeline.js

@@ -0,0 +1,23 @@
+import Timeline from '../timeline/timeline.vue'
+const ListTimeline = {
+  data () {
+    return {
+      listId: null
+    }
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.list }
+  },
+  created () {
+    this.listId = this.$route.params.id
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'list')
+  }
+}
+
+export default ListTimeline

src/components/list_timeline/list_timeline.vue

@@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    title="list.name"
+    :timeline="timeline"
+    :list-id="listId"
+    timeline-name="list"
+  />
+</template>
+
+<script src="./list_timeline.js"></script>

src/components/timeline/timeline.js

@@ -18,6 +18,7 @@ const Timeline = {
     'timelineName',
     'title',
     'userId',
+    'listId',
     'tag',
     'embedded',
     'count',
@@ -101,6 +102,7 @@ const Timeline = {
       timeline: this.timelineName,
       showImmediately,
       userId: this.userId,
+      listId: this.listId,
       tag: this.tag
     })
   },
@@ -156,6 +158,7 @@ const Timeline = {
         older: true,
         showImmediately: true,
         userId: this.userId,
+        listId: this.listId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {

src/modules/api.js

@@ -191,12 +191,13 @@ const api = {
     startFetchingTimeline (store, {
       timeline = 'friends',
       tag = false,
-      userId = false
+      userId = false,
+      listId = false
     }) {
       if (store.state.fetchers[timeline]) return
 
       const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, tag
+        timeline, store, userId, listId, tag
       })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },

src/modules/statuses.js

@@ -62,7 +62,8 @@ export const defaultState = () => ({
     friends: emptyTl(),
     tag: emptyTl(),
     dms: emptyTl(),
-    bookmarks: emptyTl()
+    bookmarks: emptyTl(),
+    list: emptyTl()
   }
 })
 

src/services/api/api.service.js

@@ -50,6 +50,7 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
+const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
 const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
 const MASTODON_BOOKMARK_TIMELINE_URL = '/api/v1/bookmarks'
 const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
@@ -503,6 +504,7 @@ const fetchTimeline = ({
   since = false,
   until = false,
   userId = false,
+  listId = false,
   tag = false,
   withMuted = false,
   replyVisibility = 'all'
@@ -515,6 +517,7 @@ const fetchTimeline = ({
     'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
     user: MASTODON_USER_TIMELINE_URL,
     media: MASTODON_USER_TIMELINE_URL,
+    list: MASTODON_LIST_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL,
     bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
@@ -528,6 +531,10 @@ const fetchTimeline = ({
     url = url(userId)
   }
 
+  if (timeline === 'list') {
+    url = url(listId)
+  }
+
   if (since) {
     params.push(['since_id', since])
   }

src/services/backend_interactor_service/backend_interactor_service.js

@@ -4,8 +4,8 @@ import notificationsFetcher from '../notifications_fetcher/notifications_fetcher
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 
 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, tag })
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
   },
 
   fetchTimeline (args) {

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -3,12 +3,13 @@ import { camelCase } from 'lodash'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
-const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => {
+const update = ({ store, statuses, timeline, showImmediately, userId, listId, pagination }) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('addNewStatuses', {
     timeline: ccTimeline,
     userId,
+    listId,
     statuses,
     showImmediately,
     pagination
@@ -22,6 +23,7 @@ const fetchAndUpdate = ({
   older = false,
   showImmediately = false,
   userId = false,
+  listId = false,
   tag = false,
   until,
   since
@@ -44,6 +46,7 @@ const fetchAndUpdate = ({
   }
 
   args['userId'] = userId
+  args['listId'] = listId
   args['tag'] = tag
   args['withMuted'] = !hideMutedPosts
   if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
@@ -62,7 +65,7 @@ const fetchAndUpdate = ({
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
-      update({ store, statuses, timeline, showImmediately, userId, pagination })
+      update({ store, statuses, timeline, showImmediately, userId, listId, pagination })
       return { statuses, pagination }
     })
     .catch((error) => {
@@ -75,14 +78,15 @@ const fetchAndUpdate = ({
     })
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
+  timelineData.listId = listId
+  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
   const boundFetchAndUpdate = () =>
-    fetchAndUpdate({ timeline, credentials, store, userId, tag })
+    fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
   return promiseInterval(boundFetchAndUpdate, 20000)
 }
 const timelineFetcher = {