implement follow page, fix bugs

src/application/controller/common/module/feed.php

@@ -1,3 +1,14 @@
 <?php
 
+$userName = false;
+
+if (isset($_GET['_route_'])) {
+
+  $route = explode('/', $_GET['_route_']);
+
+  if (isset($route[1])) {
+    $userName = filter::userName($route[1]);
+  }
+}
+
 require(PROJECT_DIR . '/application/view/common/module/feed.phtml');

src/application/controller/common/module/following.php

@@ -1,3 +1,14 @@
 <?php
 
+$userName = false;
+
+if (isset($_GET['_route_'])) {
+
+  $route = explode('/', $_GET['_route_']);
+
+  if (isset($route[1])) {
+    $userName = filter::userName($route[1]);
+  }
+}
+
 require(PROJECT_DIR . '/application/view/common/module/following.phtml');

src/application/controller/follow.php

@@ -23,4 +23,14 @@ $metaScripts = [
   'js/follow.js',
 ];
 
+// Auto-following
+if (isset($_GET['_route_'])) {
+
+  $route = explode('/', $_GET['_route_']);
+
+  if (isset($route[1])) {
+    $_twister->follow($_SESSION['userName'], [filter::userName($route[1])]);
+  }
+}
+
 require(PROJECT_DIR . '/application/view/follow.phtml');

src/application/view/common/module/feed.phtml

@@ -1 +1 @@
-<div class="moduleFeed" id="moduleFeed"></div>
+<div class="moduleFeed" id="moduleFeed" data-username="<?php echo $userName ?>"></div>

src/application/view/common/module/following.phtml

@@ -1,3 +1 @@
-<div class="moduleFollowing" id="moduleFollowing">
-
-</div>
+<div class="moduleFollowing" id="moduleFollowing" data-username="<?php echo $userName ?>"></div>

src/bootstrap.php

@@ -51,7 +51,9 @@ if (!session_id()) {
 // Route
 if (isset($_GET['_route_'])) {
 
-    switch ($_GET['_route_']) {
+  switch ($_GET['_route_']) {
+
+      // Pages
       case '':
         require(PROJECT_DIR . '/application/controller/home.php');
       break;
@@ -61,12 +63,16 @@ if (isset($_GET['_route_'])) {
       case 'logout':
         require(PROJECT_DIR . '/application/controller/logout.php');
       break;
+      /*
       case 'follow':
         require(PROJECT_DIR . '/application/controller/follow.php');
       break;
+      */
       case 'register':
         require(PROJECT_DIR . '/application/controller/register.php');
       break;
+
+      // API calls
       case 'api/image':
         require(PROJECT_DIR . '/application/controller/api/image.php');
       break;
@@ -88,8 +94,21 @@ if (isset($_GET['_route_'])) {
       case 'api/follow/delete':
         require(PROJECT_DIR . '/application/controller/api/follow/delete.php');
       break;
+
+      // Multi-attribute pages
       default:
-        require(PROJECT_DIR . '/application/controller/error/404.php');
+
+        switch (true) {
+
+          // Pages
+          case preg_match('|^follow[/\w_]?|i', $_GET['_route_']):
+            require(PROJECT_DIR . '/application/controller/follow.php');
+          break;
+
+          // 404
+          default:
+          require(PROJECT_DIR . '/application/controller/error/404.php');
+        }
     }
 
 } else {

src/public/css/template/default/app.css

@@ -23,6 +23,7 @@ a:active {
 .container > .left {
   position: fixed;
   z-index: 99;
+  width: 360px
 }
 
 .container > .right {

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

@@ -4,43 +4,56 @@
   color: #1c1d1e;
   background: rgba(238, 238, 238, 0.08);
   border-radius: 3px;
-  min-height: 84px;
 }
+
+.moduleFollowing .item.active {
+  color: #1c1d1e;
+  background: rgb(238, 238, 238);
+}
+
+.moduleFollowing .item.active a,
+.moduleFollowing .item.active a:visited,
+.moduleFollowing .item.active a:active {
+  color: #1c1d1e;
+}
+
 .moduleFollowing .item:hover .action i {
   opacity: 1
 }
 
 .moduleFollowing .item .avatar {
   position: absolute;
-  top: 19px;
-  left: 19px;
+  top: 16px;
+  left: 16px;
 }
 
 .moduleFollowing .item .avatar img {
   border-radius: 50%;
   border: 2px #fff solid;
+  width: 16px;
+  height: 16px;
 }
 
 .moduleFollowing .item .action {
   position: absolute;
-  top: 19px;
-  right: 19px;
+  top: 16px;
+  right: 16px;
 }
 
 .moduleFollowing .item .action i {
   color: #96a0b4;
   cursor: pointer;
   margin-bottom: 8px;
-  display: block;
+  display: inline-block;
   opacity: 0
 }
 
 .moduleFollowing .item .action i:hover {
-  color: #fff;
+  color: #cc8989;
 }
 
 .moduleFollowing .item .info {
-  padding-left: 73px;
+  padding-left: 40px;
   padding-right: 32px;
   letter-spacing: 0.2px;
   font-size: 13px;

src/public/js/follow.js

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

src/public/js/module/feed.js

@@ -14,7 +14,7 @@ var ModuleFeed = {
                   'class': 'info'
                 }).append(
                   $('<a/>', {
-                    'href': 'follow/' + userName
+                    'href': 'follow/' + reTwist.userName
                   }).append(reTwist.userName)
                 ).append(
                   $('<span/>', {
@@ -74,7 +74,9 @@ var ModuleFeed = {
     $.ajax({
       url: 'api/post/get',
       type: 'POST',
-      data: {},
+      data: {
+        userName: $(feed).data('username')
+      },
       success: function (response) {
         if (response.success) {
 
@@ -88,7 +90,7 @@ var ModuleFeed = {
 
         } else {
 
-          alert(response.message);
+          console.log(response.message);
 
         }
       },

src/public/js/module/following.js

@@ -5,7 +5,7 @@ var ModuleFollowing = {
         append: function(list, userName) {
           $(list).append(
             $('<div/>', {
-              'class': 'item'
+              'class': 'item' + (userName == $(list).data('username') ? ' active' : '')
             }).append(
               $('<div/>', {
                 'class': 'avatar'
@@ -31,16 +31,10 @@ var ModuleFollowing = {
               $('<div/>', {
                 'class': 'action'
               }).append(
-                $('<i/>', {
-                  'class': 'bi bi-envelope',
-                  'title': 'Direct Message',
-                  'onclick': '',
-                })
-              ).append(
                 $('<i/>', {
                   'class': 'bi bi-x-circle',
                   'title': 'Unfollow',
-                  'onclick': 'ModuleFollowing.unFollow(\'' + list + '\', \'' + userName + '\', true)',
+                  'onclick': 'ModuleFollowing.unFollow(\'' + list + '\', \'' + userName + '\', false)',
                 })
               )
             )