Implemented Pagination

awwest · May 20, 2014 · 0577c2b · 0577c2b
1 parent 3f9fa67
commit 0577c2b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 27 deletions.
diff --git a/client/main/main.js b/client/main/main.js
@@ -15,8 +15,12 @@
   })
   .controller('MainController', function ($scope, $http, $sce) {
     $scope.things = [];
+    $scope.showNext = false;
+    $scope.postNum = 0;
     $scope.contentType = '/';
     $scope.targetBlog = 'newyorker.tumblr.com';
+    $scope.page = 1;
+
     $scope.postPhoto = function(post){
       var photos = [];
       for(var y = 0; y < post.photos.length; y++){
@@ -46,6 +50,8 @@
     $scope.postAnswer = function(post){
       $scope.things.push({html: $sce.trustAsHtml('<div>' + post.question + '</div><a href=' + post.asking_url + '>' + post.asking_name + '</a><div>' + post.answer + '</div>')});
     };
+
+
     $scope.parsePost = function(post){
       if(post.type === 'photo'){
         $scope.postPhoto(post);
@@ -64,32 +70,49 @@
       }else if(post.type === 'answer'){
         $scope.postAnswer(post);
       }
+      $scope.showNext = true;
     };
-    $scope.searchFor = function(url, valid){
+
+    $scope.loadNext = function(postNum){
+      $scope.lastRequest.offset += postNum;
+      $scope.loadRequest();
+    };
+
+    $scope.searchFor = function(url){
       //console.log(valid);
-      $http({method: 'POST', url: '/load', data: {blog: url, contentType: $scope.contentType, source: $scope.contentSource}})
-      .success(function(data, status, headers, config) {
-        // $scope.things.push(data);
+      $scope.lastRequest = {
+          blog: url,
+          contentType: $scope.contentType,
+          source: $scope.contentSource,
+          self: $scope.original,
+          offset: 0
+        };
+      $scope.loadRequest();
+    };
 
-      //   console.log(data);
-        for(var i = 0; i < data.posts.length; i++){
-          var post = data.posts[i];
-          if($scope.contentSource){
-            console.log(post.source_url, post.source_title);
-            if(post.source_title === $scope.contentSource){
+    $scope.loadRequest = function(){
+      $http({method: 'POST', url: '/load',
+        data: $scope.lastRequest})
+      .success(function(data, status, headers, config) {
+          $scope.postNum += data.posts.length;
+          for(var i = 0; i < data.posts.length; i++){
+            var post = data.posts[i];
+            if($scope.contentSource){
+              console.log(post.source_url, post.source_title);
+              if(post.source_title === $scope.contentSource){
+                $scope.parsePost(post);
+              }
+            }else{
               $scope.parsePost(post);
             }
-          }else{
-            $scope.parsePost(post);
           }
-        }
-      })
-      .error(function(data, status, headers, config) {
-        console.log(data);
-        console.log(status);
-        console.log(headers);
-        console.log(config);
-      });
+        })
+        .error(function(data, status, headers, config) {
+          console.log(data);
+          console.log(status);
+          console.log(headers);
+          console.log(config);
+        });
     };
   });
 }(angular));
diff --git a/client/main/main.tpl.html b/client/main/main.tpl.html
@@ -15,13 +15,10 @@ <h1></h1>
     </select>
     <input ng-model='original' type='checkbox'> Return only original posts </input>
     <input ng-model='contentSource' placeholder='(Optional) Source'>
-    <button type='submit' ng-model='search' ng-click='searchFor(targetBlog, findForm.url.$valid)'>Find</button>
+    <button type='submit' ng-model='search' ng-click='searchFor(targetBlog)'>Find</button>
   </form>
   <div ng-repeat='thing in things'>
-    <div ng-bind-html='thing.html'>{{thing}}</div>
+    <div class='post' ng-bind-html='thing.html'>{{thing}}</div>
   </div>
-
-  <script type="text/ng-template" id="/text.html">
-    Working
-  </script>
+  <a ng-model='nextButton' ng-click='loadNext(postNum)' ng-show='showNext'>Next Page</a>
 </div>
diff --git a/server/main/middleware.js b/server/main/middleware.js
@@ -38,7 +38,7 @@ module.exports = exports = {
   },
   loadPosts: function (req, res, next){
     console.log(req.body);
-    client.posts(req.body.blog, {type: req.body.contentType, limit: 20}, function(err, data){
+    client.posts(req.body.blog, {type: req.body.contentType, limit: 20, offset: req.body.offset}, function(err, data){
       if(err){
         res.send(err, 404);
       }