完成 starts 页面的语言筛选和下拉加载更多功能，fix 跳转登录后没有数据问题

foreverzmy · Oct 3, 2016 · 4e798eb · 4e798eb
1 parent b9deb27
commit 4e798eb
Show file tree

Hide file tree

Showing 11 changed files with 290 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,4 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+.DS_Store
diff --git a/.gitingore b/.gitingore
diff --git a/app.json b/app.json
@@ -32,5 +32,6 @@
       "iconPath":"images/profile.png",
       "selectedIconPath":"images/profileHL.png"
     }]
-  }
+  },
+  "debug": true
 }
diff --git a/app.wxss b/app.wxss
@@ -8,3 +8,14 @@
   padding: 0rpx 5px;
   box-sizing: border-box;
 } 
+
+.weui-loading {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
+  animation: weuiLoading 1s steps(12, end) infinite;
+  background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
+  background-size: 100%;
+}
diff --git a/images/book_32px.png b/images/book_32px.png
diff --git a/pages/starts/starts.js b/pages/starts/starts.js
@@ -1,13 +1,23 @@
+var utils = require('../../utils/util.js');
+var parseLinkHeader = require('../../utils/parse-link-header.js');
 
 var GITHUB_ME_STARTS_URL = 'https://api.github.com/user/starred';
 
+// 这里的 WARP_SECOND 是解决 js 的 ts 为 13 位的问题
+// WARP_SECOND 的单位是 1 秒
+var WARP_SECOND = 1000 * 60
+var CACHED_TIME = WARP_SECOND * 2 // sec
+
 Page({
   data:{
     // text:"这是一个页面"
     loading: true,
+    hasMore: true,
+    turnToAuth: false,
     startedRepos: [],
     indexL: 0,
     arrayL: [
+      'All',
       'C',
       'C++',
       'Java',
@@ -22,32 +32,104 @@ Page({
   },
   onLoad:function(options){
     // 页面初始化 options为页面跳转所带来的参数
-    this.fetchStartedRepos()
+    this.initData();
   },
   onReady:function(){
     // 页面渲染完成
+    console.log('on ready');
   },
   onShow:function(){
     // 页面显示
+    console.log('on show');
+    var turnToAuth = this.data.turnToAuth;
+    if (turnToAuth){
+      this.initData();
+      this.setData({
+        turnToAuth: false
+      })
+    }
+
   },
   onHide:function(){
     // 页面隐藏
+    console.log('on hide');
   },
   onUnload:function(){
     // 页面关闭
+    console.log('on unload');
   },
-  bindPickerChange: function(e) {
-    console.log(e.detail.value);
+  scroll: function(e) {
+    //console.log(e)
+  },
+  initData: function(){
+    // 初始化 onload 时候需要的数据
+    var startedRepos = wx.getStorageSync('starts');
+
+    if (!startedRepos) {
+      this.fetchStartedRepos(GITHUB_ME_STARTS_URL);
+    } else {
+      var nowTs = Date.now();
+      var oldTs = parseInt(wx.getStorageSync('requestStartsTs') || 0);
+
+      if (nowTs - oldTs > CACHED_TIME || !oldTs) {
+        this.fetchStartedRepos(GITHUB_ME_STARTS_URL);
+      } else {
+        this.setData({
+          loading: false,
+          startedRepos: JSON.parse(startedRepos)
+        })
+      }
+    }
+  },
+  loadMore: function(e) {
+    link = utils.readDataFromStorage('link');
+    var hasMore = false;
+
+    if (link.next) {
+      this.fetchStartedRepos(link.next, true);
+      hasMore = true;
+    }
+
     this.setData({
-      indexL: e.detail.value
+      hasMore: hasMore
     })
   },
-  fetchStartedRepos: function() {
+  enablePullDownRefresh: function(e) {
+    console.log(e.dtail.value);
+  },
+  bindPickerChange: function(e) {
+    var index = e.detail.value;
+    var selected = this.data.arrayL[index];
+    var startedRepos = JSON.parse(wx.getStorageSync('starts'));
+
+    if (index != 0) {
+      var selectdArray = startedRepos.filter(item => {
+        language = item.language || '';
+        return language.toLowerCase() === selected.toLowerCase();
+      })
+
+      this.setData({
+        indexL: e.detail.value,
+        startedRepos: selectdArray
+      })
+    } else {
+      this.setData({
+        indexL: e.detail.value,
+        startedRepos: startedRepos
+      })
+    }
+
+  },
+  fetchStartedRepos: function(url, more) {
+    if (!more) {
+      more = false;
+    }
+
     return Promise.resolve('user').then(user => {
-      var userInfo = JSON.parse(wx.getStorageSync(user));
+      var userInfo = wx.getStorageSync(user);
 
       if (userInfo) {
-        return userInfo;
+        return JSON.parse(userInfo);
       } else {
         throw new Error('Unauthorized');
         //wx.redirectTo({url: '../profile/profile'})
@@ -56,7 +138,7 @@ Page({
     }).then(user => {
       var basic = user.basic_auth;
 
-      return fetch(GITHUB_ME_STARTS_URL, {
+      return fetch(url, {
         headers: {
           Authorization: 'Basic ' + basic
         }
@@ -70,10 +152,27 @@ Page({
           throw new Error('NetworkError');
         }
       }
+
+      // prase link in headers
+      prasedLink = parseLinkHeader(res.headers.get('Link'));
+
+      // 这里存到缓存中
+      // 因为在使用缓存数据时候 data 数据是空的
+      utils.saveDataToStorage('link', prasedLink)
+
       return res.json()
     }).then(json => {
+      var newData = json;
+      if (more) {
+          newData = this.data.startedRepos;
+          newData.push.apply(newData, json);
+      }
+
+      wx.setStorageSync('starts', JSON.stringify(newData));
+      wx.setStorageSync('requestStartsTs', Date.now());
+
       this.setData({
-        startedRepos: json,
+        startedRepos: newData,
         loading: false
       })
     }).catch(e => {
@@ -82,10 +181,13 @@ Page({
       })
       switch(e.message) {
         case 'Unauthorized':
-          wx.redirectTo({url: '../profile/profile'})
+          this.setData({
+            turnToAuth: true
+          })
+          wx.navigateTo({url: '../profile/profile'})
           break;
         default:
-          console.log(e.message);
+          throw e;
       }
     })
   }

diff --git a/pages/starts/starts.wxml b/pages/starts/starts.wxml
@@ -3,12 +3,46 @@
 </loading>
 
 <view class='container'>
-    <view class="section">
-        <view class="section__title">地区选择器</view>
+    <!--这里的 picker 好像有问题能，只能选择前面四个-->
+    <view class="section picker-section">
         <picker bindchange="bindPickerChange" value="{{indexL}}" range="{{arrayL}}">
-        <view class="picker">
-            当前选择：{{arrayL[indexL]}}
-        </view>
+        <text class="picker-show">
+            选择语言：{{arrayL[indexL]}}
+        </text>
         </picker>
     </view>
+
+    <!--start 的项目-->
+    <scroll-view class='section started-repos' style="height: 100%;" scroll-y="true" bindscroll="scroll" bindscrolltolower="loadMore">
+        <block wx:for="{{startedRepos}}">
+            <view class='repo-item flex'>
+                <view class='flex-warp-top flex-flex'>
+                    <image class='flex-warp-left repo-image icon-book' src='../../images/book_32px.png' mode='aspectFit' />
+                    <text class='flex-warp-right repo-name'>{{item.full_name}}</text>
+                </view>
+                <view class='flex-warp-mid'>
+                    {{item.description}}
+                </view>
+                <view class='flex-warp-bottom repo-starts-count flex-flex'>
+                    {{item.language}}
+                    <text class='point'>•</text>
+                    <image class='start-image icon-start flex-warp-left' src='../../images/startsHL.png' />
+                    <text class='flex-warp-right'>{{item.stargazers_count}}</text>
+                </view>
+            </view>
+        </block>
+        <view class="load-more-wrap">
+            <block wx:if="{{hasMore}}">
+            <view class="load-content">
+                <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
+            </view>
+            </block>
+
+            <block wx:else>
+            <view class="load-content">
+                <text>没有更多内容了</text>
+            </view>
+      </block>
+    </view>
+    </scroll-view>
 </view>
diff --git a/pages/starts/starts.wxss b/pages/starts/starts.wxss
@@ -0,0 +1,76 @@
+.picker-section {
+    border-bottom: 1px solid #c7c7c7;
+    padding: 0rpx 10rpx 10rpx 10rpx;
+}
+
+.flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.flex-flex {
+    display: flex;
+    align-items: center;
+}
+
+.flex-warp-top {
+    margin-bottom: 16rpx;
+    color: #4078C0;
+}
+
+.flex-warp-mid {
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 16rpx;
+}
+
+.flex-warp-bottom {
+    justify-content: flex-end;
+    font-size: 26rpx;
+    color: #888;
+}
+
+.flex-warp-right {
+    margin-left: 10rpx;
+}
+
+.point {
+    margin-left: 10rpx;
+    margin-right: 10rpx;
+}
+
+.starts-image {
+    margin-left: 10rpx;
+}
+
+.icon-book {
+    width: 24px;
+    height: 24px;
+}
+
+.icon-start {
+    width: 20px;
+    height: 20px;
+}
+
+.repo-item {
+    padding: 30rpx;
+    border-bottom: 1px solid #c7c7c7;
+}
+
+.load-more-wrap{
+  text-align: center;
+  padding: 10px 20px 20px 20px;
+}
+
+.load-content{
+  padding: 5px;
+  color: #666;
+}
+
+.loading-text{
+    font-size: 26rpx;
+    display: inline-block;
+    vertical-align: middle;
+}
diff --git a/pages/trending/trending.wxss b/pages/trending/trending.wxss
@@ -1,5 +1,5 @@
 .repo-item {
-    padding: 30rpx 30rpx 30rpx 30rpx;
+    padding: 30rpx;
     border-bottom: 1px solid #c7c7c7;
 }
 

diff --git a/utils/parse-link-header.js b/utils/parse-link-header.js
@@ -0,0 +1,29 @@
+
+
+
+module.exports = function(linkHeaders) {
+  links = linkHeaders.split(',');
+
+  var linkObjs = {}
+
+  links.forEach(item => {
+    var regKey = /rel="(.*?)"/;
+    var regValue = /\<(.*?)\>/;
+
+    var v = regValue.exec(item)
+    if (v) {
+      v = v[1];
+    } 
+
+    var k = regKey.exec(item)
+    if (k) {
+      k = k[1];
+    }
+
+    linkObjs[k] = v;
+  })
+
+  return linkObjs;
+
+}
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,3 +35,4 @@ jspm_packages

		# Optional REPL history
		.node_repl_history
		.DS_Store