use real statuses

routes/_components/Status.html

@@ -46,13 +46,13 @@
       </svg>
     </button>
   </div>
-  <div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
+  <!--<div class="status-media" style="grid-template-columns: repeat(auto-fit, minmax({{minMediaWidth}}px, 1fr));">
     {{#each originalMedia as media}}
       <div class="status-media-container">
         <img src="{{media.preview_url}}" alt="{{media.description || ''}}"/>
       </div>
     {{/each}}
-  </div>
+  </div>-->
 </article>
 
 <style>

routes/_components/Timeline.html

@@ -1,6 +1,6 @@
 <div class="timeline">
   <VirtualList component="{{StatusListItem}}"
-               items="{{statuses}}"
+               items="{{keyedStatuses}}"
                on:scrollToBottom="onScrollToBottom()" />
 </div>
 <style>
@@ -11,25 +11,33 @@
 <script>
   import { store } from '../_utils/store'
   import { getHomeTimeline } from '../_utils/mastodon/oauth'
-  import fixture from '../_utils/fixture.json'
   import StatusListItem from './StatusListItem.html'
   import VirtualList from './VirtualList.html'
   import { splice, push } from 'svelte-extras'
   import { mark, stop } from '../_utils/marks'
 
-  let i = -1
-
-  const createData = () => fixture.slice(0, 20).map(_ => ({
-    key: `${++i}`,
-    props: _
-  }))
-
   export default {
+    async oncreate() {
+      let instanceName = this.store.get('currentInstance')
+      let instanceData = this.store.get('currentInstanceData')
+      let statuses = await getHomeTimeline(instanceName, instanceData.access_token, null, 10)
+      this.set({
+        statuses: statuses,
+      })
+    },
     data: () => ({
       target: 'home',
-      statuses: createData(),
-      StatusListItem: StatusListItem
+      StatusListItem: StatusListItem,
+      statuses: [],
+      runningUpdate: false
     }),
+    computed: {
+      keyedStatuses: (statuses) => statuses.map(status => ({
+        props: status,
+        key: status.id
+      })),
+      lastStatusId: (statuses) => statuses.length && statuses[statuses.length - 1].id
+    },
     store: () => store,
     components: {
       VirtualList
@@ -37,13 +45,21 @@
     methods: {
       splice: splice,
       push: push,
-      onScrollToBottom() {
+      async onScrollToBottom() {
         mark('onScrollToBottom')
+        if (this.get('runningUpdate')) {
+          return
+        }
+        this.set({ runningUpdate: true })
+        let lastStatusId = this.get('lastStatusId')
+        let instanceName = this.store.get('currentInstance')
+        let instanceData = this.store.get('currentInstanceData')
+        let newStatuses = await getHomeTimeline(instanceName, instanceData.access_token, lastStatusId, 10)
         let statuses = this.get('statuses')
         if (statuses) {
-          let itemsToAdd = createData()
-          this.addItems(itemsToAdd)
+          this.addItems(newStatuses)
         }
+        this.set({ runningUpdate: false })
         stop('onScrollToBottom')
       },
       addItems(items) {

routes/_components/VirtualListItem.html

@@ -36,10 +36,14 @@
   export default {
     oncreate() {
       let key = this.get('key')
+      // TODO: implement AsyncLayout
+      // TODO: implement batchUpdate
+      // TODO: fix resize on media
       onIntersectionCallbacks[key] = entry => {
+        console.log('onIntersection', key, entry.boundingClientRect.height)
         let rect = entry.boundingClientRect
         updateItemHeights[key] = rect.height
-        promise.then(() => {
+        promise = promise.then(() => {
           // update all item heights in one microtask batch for better perf
           let updatedKeys = Object.keys(updateItemHeights)
           if (!updatedKeys.length) {
@@ -57,12 +61,22 @@
           updateItemHeights = {}
           stop('batch update VirtualListItem')
         })
+        this.set({ unobserved: true })
+        intersectionObserver.unobserve(this.refs.node)
       }
       intersectionObserver.observe(this.refs.node)
     },
     ondestroy() {
-      intersectionObserver.unobserve(this.refs.node)
+      let key = this.get('key')
+      if (!this.get('unobserved')) {
+        intersectionObserver.unobserve(this.refs.node)
+      }
+      delete onIntersectionCallbacks[key]
+      delete updateItemHeights[key]
     },
+    data: () => ({
+      unobserved: false
+    }),
     store: () => virtualListStore,
     computed: {
       'shown': ($itemHeights, key) => $itemHeights[key] > 0

routes/_utils/mastodon/oauth.js

@@ -34,8 +34,20 @@ export function getAccessTokenFromAuthCode(instanceName, clientId, clientSecret,
   })
 }
 
-export function getHomeTimeline(instanceName, accessToken) {
+export function getHomeTimeline(instanceName, accessToken, since, limit) {
   let url = `https://${instanceName}/api/v1/timelines/home`
+
+  let params = {}
+  if (since) {
+    params[since] = since
+  }
+
+  if (limit) {
+    params[limit] = limit
+  }
+
+  url += '?' + paramsString(params)
+
   return get(url, {
     'Authorization': `Bearer ${accessToken}`
   })