implement feed pagination

src/application/controller/api/post/get.php

@@ -4,10 +4,13 @@ $response = [
   'success' => false,
   'message' => _('Internal server error'),
   'posts'   => [],
+  'page'    => 0,
 ];
 
 if (isset($_SESSION['userName'])) {
 
+  $page = isset($_GET['page']) ? Filter::int($_GET['page']) : 1;
+
   $userNames = [];
 
   if (isset($_GET['userName']) && !empty($_GET['userName'])) {
@@ -22,11 +25,15 @@ if (isset($_SESSION['userName'])) {
     }
   }
 
-  if ($result = $_twister->getPosts($userNames, APPLICATION_MAX_POST_FEED)) {
+  if ($result = $_twister->getPosts($userNames, APPLICATION_MAX_POST_FEED * $page)) {
 
+    $postsTotal = 0;
     $posts = [];
     foreach ($result as $post) {
 
+      // Count posts
+      $postsTotal++;
+
       // Process reTwists
       $reTwist = [];
       if ($post['reTwist']) {
@@ -50,7 +57,8 @@ if (isset($_SESSION['userName'])) {
     $response = [
       'success' => true,
       'message' => _('Posts successfully loaded'),
-      'posts'   => $posts
+      'posts'   => $posts,
+      'page'    => $postsTotal == $page * APPLICATION_MAX_POST_FEED ? $page + 1 : 0
     ];
 
   } else {
@@ -59,6 +67,7 @@ if (isset($_SESSION['userName'])) {
       'success' => false,
       'message' => _('Could not receive post data'),
       'posts'   => [],
+      'page'    => 0
     ];
   }
 
@@ -67,6 +76,7 @@ if (isset($_SESSION['userName'])) {
     'success' => false,
     'message' => _('Session expired'),
     'posts'   => [],
+    'page'    => 0
   ];
 }
 

src/public/css/template/default/module/feed.css

@@ -1,3 +1,7 @@
+.moduleFeed {
+  margin-bottom: 36px;
+}
+
 .moduleFeed .item {
   padding: 16px;
   margin-bottom: 2px;
@@ -60,3 +64,21 @@
 .moduleFeed .item .message .info a:visited {
   color: #1c1d1e;
 }
+
+.moduleFeed .loadMore {
+  width: 100%;
+  margin: 8px 0;
+  padding: 0 16px;
+  background: rgba(39, 46, 57, 0.28);
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: center;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.moduleFeed .loadMore:hover {
+  background-color: #272E39
+}

src/public/js/home.js

@@ -2,12 +2,12 @@ $(document).ready(function() {
 
   // Init modules
   ModuleMenu.init('/');
-  ModuleFeed.load('#moduleFeed', true);
+  ModuleFeed.load('#moduleFeed', 1, true);
   //ModuleUsers.load('#moduleUsers', true);
 
   // Event listeners
   $(document).on('ModulePost.add:success', function(/*event, response*/) {
-    ModuleFeed.load('#moduleFeed', true);
+    ModuleFeed.load('#moduleFeed', 1, true);
   });
 
 });

src/public/js/module/feed.js

@@ -97,11 +97,12 @@ var ModuleFeed = {
       }
     });
   },
-  load: function(feed, reFresh) {
+  load: function(feed, page, reFresh) {
     $.ajax({
       url: 'api/post/get',
       type: 'GET',
       data: {
+        page: page,
         userName: $(feed).data('username')
       },
       success: function (response) {
@@ -116,6 +117,15 @@ var ModuleFeed = {
             ModuleFeed.loadAvatar(feed, this.userName);
           });
 
+          if (response.page > 0) {
+            $(feed).append(
+              $('<div/>', {
+                'class': 'loadMore',
+                'onclick': 'ModuleFeed.load(\'' + feed + '\', ' + response.page + ', true)'
+              }).text('More')
+            );
+          }
+
         } else {
 
           console.log(response.message);

src/public/js/people.js

@@ -3,12 +3,12 @@ $(document).ready(function() {
   // Init modules
   ModuleMenu.init('people');
   ModuleFollowing.load('#moduleFollowing', true);
-  ModuleFeed.load('#moduleFeed', true);
+  ModuleFeed.load('#moduleFeed', 1, true);
 
   // Event listeners
   $(document).on('ModuleFollowing.unFollow:success', function(/*event, response*/) {
     ModuleMenu.init('people');
     ModuleFollowing.load('#moduleFollowing', true);
-    ModuleFeed.load('#moduleFeed', true);
+    ModuleFeed.load('#moduleFeed', 1, true);
   });
 });