Add server and mini-program pagination for shared lists

weapp/pages/diary/diary.js

@@ -1,10 +1,11 @@
+const { itemsOf, startList, applyList, failList, finishList, withListPagination } = require('../../utils/list-pagination');
 const { withDataCache } = require('../../utils/page-cache');
 const { getLayout } = require('../../utils/layout');
 // Diary journal with server pagination.
 const { api, getImageUrl } = require('../../utils/request');
 const { diaryEntry } = require('../../utils/journal');
 const { saveScrollPosition, getScrollPosition } = require('../../utils/scroll-pos');
-Page(withDataCache({
+Page(withDataCache(withListPagination({
   onResize: function() { this.setData(getLayout()); },
   data: {
     loading: true, loadError: false,
@@ -51,45 +52,14 @@ Page(withDataCache({
     return { title: '让所有的爱有迹可循', imageUrl: '/images/share.png' };
   },
 
-  loadData: async function() {
-    if (this._loading) return;
-    this._loading = true;
-    this.setData({ loading: !this._hasCachedData, loadError: false });
+  loadData: async function(page) {
+    const ticket=startList(this,page);if(!ticket)return;
     try {
-      var data = await api.diaryList({ page: 1, page_size: this.data.pageSize });
-      var items = this._formatItems(data.items || []);
-      this.setData({
-        page: 1,
-        list: items,
-        total: data.total || 0,
-        hasMore: (data.total || 0) > this.data.pageSize
-      });
+      const data=await api.diaryList({page:ticket.page,page_size:20});
+      applyList(this,ticket,data,this._formatItems(itemsOf(data)),'list');
       this._loadPartnerInfo();
-    } catch (e) {
-      this.setData({ loadError: true });
-      console.error(e);
-      wx.showToast({ title: (e && (e.error || e.errMsg || e.message)) || '加载失败', icon: 'none' });
-    } finally { this._loading = false; this.setData({ loading: false }); }
-  },
-
-  loadMore: async function() {
-    if (this.data.loadingMore || !this.data.hasMore) return;
-    this.setData({ loadingMore: true });
-    try {
-      var nextPage = this.data.page + 1;
-      var data = await api.diaryList({ page: nextPage, page_size: this.data.pageSize });
-      var newItems = this._formatItems(data.items || []);
-      var merged = this.data.list.concat(newItems);
-      this.setData({
-        list: merged,
-        page: nextPage,
-        hasMore: merged.length < (data.total || 0),
-        loadingMore: false
-      });
-      this._loadPartnerInfo();
-    } catch (e) {
-      this.setData({ loadingMore: false });
-    }
+    } catch(e) { failList(this,ticket); }
+    finally { finishList(this,ticket); }
   },
 
   _formatItems: function(items) {
@@ -194,4 +164,4 @@ Page(withDataCache({
   goHome: function() { this._savePosBeforeLeave(); wx.switchTab({ url: '/pages/index/index' }); },
   goBack: function() { wx.navigateBack(); },
   goProfile: function() { this._savePosBeforeLeave(); wx.switchTab({ url: '/pages/profile/profile' }); }
-}, {"loadData": ["diaryList", "coupleInfo"]}));
+}, 'loadData'), {"loadData": ["diaryList", "coupleInfo"]}));

weapp/pages/diary/diary.wxml

@@ -5,4 +5,5 @@
 <view class="j-body"><view class="j-row"><view><text class="j-eyebrow">LIFE IN WORDS</text><text class="j-page-title">生活里的每一页</text></view><button class="j-button j-button-small" bindtap="goToPublish">＋ 写日记</button></view>
 <page-state wx:if="{{loading}}" kind="loading" title="正在翻开日记" /><page-state wx:elif="{{loadError}}" kind="error" title="加载失败" action="重试" bind:action="loadData" />
 <block wx:else><block wx:for="{{list}}" wx:key="id"><template is="journal-entry" data="{{entry:item}}" /></block><page-state wx:if="{{!list.length}}" title="故事，从今天开始" description="写下第一篇，记录一个平常又特别的瞬间" action="写日记" bind:action="goToPublish" /></block>
-<view class="j-caption j-center" wx:if="{{loadingMore}}">正在加载更多…</view></view></scroll-view></view>
+<view class="j-caption j-center" wx:if="{{loadingMore}}">正在加载更多…</view></view><view class="j-pagination" wx:if="{{!loading && !loadError && total > 0}}"><text wx:if="{{loadingMore}}">正在加载…</text><text wx:elif="{{moreError}}" bindtap="loadMore">加载失败，点击重试</text><text wx:elif="{{hasMore}}" bindtap="loadMore">加载更多</text><text wx:else>已加载全部日记</text></view>
+</scroll-view></view>