implement following module

3 years ago · e788102b9a
11 changed files with 197 additions and 24 deletions
--- a/src/application/controller/api/follow/get.php
+++ b/src/application/controller/api/follow/get.php
@ -0,0 +1,45 @@
				@@ -0,0 +1,45 @@
+<?php
+
+$response = [
+  'success' => false,
+  'message' => _('Internal server error'),
+  'users'   => [],
+  'total'   => 0
+];
+
+if (isset($_SESSION['userName'])) {
+
+  $userName = isset($_POST['userName']) ? $_POST['userName'] : $_SESSION['userName'];
+
+  $followingUsersTotal = 0;
+  $followingUsers      = [];
+
+  foreach ((array) $_twister->getFollowing($_SESSION['userName']) as $followingUserName) {
+
+    $followingUsers[] = [
+      'userName' => $followingUserName
+    ];
+
+    $followingUsersTotal++;
+  }
+
+  $response = [
+    'success' => true,
+    'message' => _('Follow totals received'),
+    'users'   => $followingUsers,
+    'total'   => $followingUsersTotal
+  ];
+
+} else {
+
+  $response = [
+    'success' => false,
+    'message' => _('Session expired. Please, reload the page.'),
+    'users'   => [],
+    'total'   => 0
+  ];
+
+}
+
+header('Content-Type: application/json; charset=utf-8');
+echo json_encode($response);
--- a/src/application/controller/common/module/following.php
+++ b/src/application/controller/common/module/following.php
@ -0,0 +1,3 @@
				@@ -0,0 +1,3 @@
+<?php
+
+require(PROJECT_DIR . '/application/view/common/module/following.phtml');
--- a/src/application/controller/follow.php
+++ b/src/application/controller/follow.php
@ -12,24 +12,14 @@ $metaStyles = [
				@@ -12,24 +12,14 @@ $metaStyles = [
  'css/template/default/module/menu.css',
  'css/template/default/module/post.css',
  'css/template/default/module/feed.css',
+  'css/template/default/module/following.css',
 ];

 $metaScripts = [
  'js/module/menu.js',
  'js/module/post.js',
-  'js/module/feed.js',
+  'js/module/following.js',
+  'js/follow.js',
 ];

-$followingUsersTotal = 0;
-$followingUsers      = [];
-
-foreach ((array) $_twister->getFollowing($_SESSION['userName']) as $followingUserName) {
-
-  $followingUsers[] = [
-    'name' => $followingUserName
-  ];
-
-  $followingUsersTotal++;
-}
-
 require(PROJECT_DIR . '/application/view/follow.phtml');
--- a/src/application/controller/home.php
+++ b/src/application/controller/home.php
@ -18,6 +18,7 @@ $metaScripts = [
				@@ -18,6 +18,7 @@ $metaScripts = [
  'js/module/menu.js',
  'js/module/post.js',
  'js/module/feed.js',
+  'js/home.js',
 ];

 require(PROJECT_DIR . '/application/view/home.phtml');
--- a/src/application/view/common/header/user.phtml
+++ b/src/application/view/common/header/user.phtml
@ -17,7 +17,6 @@
				@@ -17,7 +17,6 @@
  <?php foreach ($metaScripts as $metaScript) { ?>
  <script src="<?php echo $metaScript ?>"></script>
  <?php } ?>
-  <script src="js/home.js"></script>
 </head>
 <body class="bg-c-1 bg-img-1 c-0">
  <div class="bg-c-2 bg-img-2 c-1 of-hidden">
--- a/src/application/view/common/module/following.phtml
+++ b/src/application/view/common/module/following.phtml
@ -0,0 +1,3 @@
				@@ -0,0 +1,3 @@
+<div class="moduleFollowing" id="moduleFollowing">
+
+</div>
--- a/src/application/view/follow.phtml
+++ b/src/application/view/follow.phtml
@ -1,14 +1,10 @@
				@@ -1,14 +1,10 @@
 <?php include(PROJECT_DIR . '/application/controller/common/header/user.php') ?>
 <div class="container">
-  <div class="main">
-    <div class="content">
-      <?php foreach ($followingUsers as $followingUser) { ?>
-        <div class="item">
-          @<?php echo $followingUser['name'] ?>
-        </div>
-      <?php } ?>
-      <h2><?php echo _('Following suggestions') ?></h2>
-    </div>
+  <div class="left">
+    <?php include(PROJECT_DIR . '/application/controller/common/module/menu.php') ?>
+    <?php include(PROJECT_DIR . '/application/controller/common/module/following.php') ?>
+  </div>
+  <div class="right">
+    <?php include(PROJECT_DIR . '/application/controller/common/module/feed.php') ?>
  </div>
-  <div class="side"></div>
 </div>
--- a/src/bootstrap.php
+++ b/src/bootstrap.php
@ -76,6 +76,9 @@ if (isset($_GET['_route_'])) {
				@@ -76,6 +76,9 @@ if (isset($_GET['_route_'])) {
      case 'api/post/get':
        require(PROJECT_DIR . '/application/controller/api/post/get.php');
      break;
+      case 'api/follow/get':
+        require(PROJECT_DIR . '/application/controller/api/follow/get.php');
+      break;
      default:
        require(PROJECT_DIR . '/application/controller/error/404.php');
    }
--- a/src/public/css/template/default/module/following.css
+++ b/src/public/css/template/default/module/following.css
@ -0,0 +1,47 @@
				@@ -0,0 +1,47 @@
+.moduleFollowing .item {
+  padding: 16px;
+  margin-bottom: 2px;
+  color: #1c1d1e;
+  background: rgba(238, 238, 238, 0.08);
+  border-radius: 3px;
+  min-height: 84px;
+}
+.moduleFollowing .item:hover .action i {
+  opacity: 1
+}
+
+.moduleFollowing .item .avatar {
+  position: absolute;
+  top: 19px;
+  left: 19px;
+}
+
+.moduleFollowing .item .avatar img {
+  border-radius: 50%;
+  border: 2px #fff solid;
+}
+
+.moduleFollowing .item .action {
+  position: absolute;
+  top: 19px;
+  right: 19px;
+}
+
+.moduleFollowing .item .action i {
+  color: #96a0b4;
+  cursor: pointer;
+  margin-bottom: 8px;
+  display: block;
+  opacity: 0
+}
+
+.moduleFollowing .item .action i:hover {
+  color: #fff;
+}
+
+.moduleFollowing .item .info {
+  padding-left: 73px;
+  padding-right: 32px;
+  letter-spacing: 0.2px;
+  font-size: 13px;
+}
--- a/src/public/js/follow.js
+++ b/src/public/js/follow.js
@ -0,0 +1,7 @@
				@@ -0,0 +1,7 @@
+$(document).ready(function() {
+
+  // Init modules
+  ModuleMenu.init('follow');
+  ModuleFollowing.load('#moduleFollowing', true);
+
+});
--- a/src/public/js/module/following.js
+++ b/src/public/js/module/following.js
@ -0,0 +1,79 @@
				@@ -0,0 +1,79 @@
+var ModuleFollowing = {
+  template: {
+    list: {
+      item: {
+        append: function(list, userName) {
+          $(list).append(
+            $('<div/>', {
+              'class': 'item'
+            }).append(
+              $('<div/>', {
+                'class': 'avatar'
+              }).append(
+                $('<a/>', {
+                  'href': 'follow/' + userName
+                }).append(
+                  $('<img/>', {
+                    'src': '/api/image?hash=' + userName,
+                    'alt': '',
+                  })
+                )
+              )
+            ).append(
+              $('<div/>', {
+                'class': 'info'
+              }).append(
+                $('<a/>', {
+                  'href': 'follow/' + userName
+                }).append(userName)
+              )
+            ).append(
+              $('<div/>', {
+                'class': 'action'
+              }).append(
+                $('<i/>', {
+                  'class': 'bi bi-envelope',
+                  'title': 'Direct Message',
+                  'onclick': '',
+                })
+              ).append(
+                $('<i/>', {
+                  'class': 'bi bi-x-circle',
+                  'title': 'Unfollow',
+                  'onclick': '',
+                })
+              )
+            )
+          );
+        }
+      }
+    }
+  },
+  load: function(list, reFresh) {
+    $.ajax({
+      url: 'api/follow/get',
+      type: 'POST',
+      data: {},
+      success: function (response) {
+        if (response.success) {
+
+          if (reFresh) {
+            $(list).html('');
+          }
+
+          $(response.users).each(function() {
+            ModuleFollowing.template.list.item.append(list, this.userName);
+          });
+
+        } else {
+
+          alert(response.message);
+
+        }
+      },
+      error: function(jqXHR, textStatus, errorThrown) {
+         console.log(textStatus, errorThrown);
+      }
+    });
+  },
+}