profile.php

<?php
include("includes/header.php");
$message_object = new Message($connection, $userLoggedIn);

if (isset($_GET['profile_username'])) {
  $username = $_GET['profile_username'];
  $user_details_query = mysqli_query($connection, "SELECT * FROM users
    WHERE username='$username'");
  $user_array = mysqli_fetch_array($user_details_query);

  $number_of_friends = (substr_count($user_array['friend_array'], ",")) -1;

  if (isset($_POST['remove_friend'])) {
    $user = new User($connection, $userLoggedIn);
    $user->removeFriend($username);
  }
  if (isset($_POST['add_friend'])) {
    $user = new User($connection, $userLoggedIn);
    $user->sendRequest($username);
  }
  if (isset($_POST['respond_request'])) {
    header("Location: requests.php");
  }

}

if (isset($_POST['post_message'])) {
  if (isset($_POST['message_body'])) {
    $body = mysqli_real_escape_string($connection, $_POST['message_body']);
    $date = date("Y-m-d H:i:s");
    $message_object->sendMessage($username, $body, $date);
  }
  $link = '#profileTabs a[href="#messages_div"]';
  echo "<script>
          $(function(){
            $('" . $link ."').tab('show');
          });
        </script>";
}
 ?>

    <style media="screen">
      .wrapper {
        margin-left: 0px;
        padding-left: 0px;
      }
    </style>

    <div class="profile_left">
      <img src="<?php echo $user_array['profile_pic']; ?>"
      alt="profile picture">

      <div class="profile_info">
        <p><?php echo "Posts: " . $user_array['num_posts']; ?></p>
        <p><?php echo "Likes: " . $user_array['num_likes']; ?></p>
        <p><?php echo "Friends: " . $number_of_friends; ?></p>

      </div>
      <form class="" action="<?php echo $username; ?>" method="post">
        <?php
        $profile_user_object = new User($connection, $username);
        if ($profile_user_object->isClosed()) {
          header("Location: user_closed.php");
        }

        $logged_in_user_object = new User($connection, $userLoggedIn);

        if ($userLoggedIn != $username) {

          if ($logged_in_user_object->isFriend($username)) {
            echo '<input type="submit" name="remove_friend" class="danger"
            value="Remove Friend"><br>';
          }
          else if ($logged_in_user_object->didReceiveRequest($username)) {
            echo '<input type="submit" name="respond_request" class="warning"
            value="Respond to Request"><br>';
          }
          else if ($logged_in_user_object->didSendRequest($username)) {
            echo '<input type="submit" name="" class="default" value="Request Sent"><br>';
          }
          else {
            echo '<input type="submit" name="add_friend" class="success"
            value="Add Friend"><br>';
          }
        }

        ?>
      </form>

      <input type="submit" class="deep_blue" data-toggle="modal"
      data-target="#post_form" value="Post Something">

      <?php

      if ($userLoggedIn != $username) {
        echo '<div class="profile_info_button"> ';
          echo $logged_in_user_object->getMutualFriends($username) . " Mutual
          friends";
        echo '</div>';
      }

       ?>

    </div>

    <div class="profile_main_column column">

      <ul class="nav nav-tabs" role="tablist" id="profileTabs">
        <li class="nav-item">
          <a class="nav-link active" href="#newsfeed_div"
          aria-controls="newsfeed_div" role="tab" data-toggle="tab">Newsfeed</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"href="#about_div" aria-controls="about_div"
          role="tab" data-toggle="tab">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#messages_div" aria-controls="messages_div"
          role="tab" data-toggle="tab">Messages</a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in show active"
        id="newsfeed_div">
          <div class="posts_area"></div>
          <img id="loading" src="assets/images/icons/loading.gif"
          alt="loading logo">
        </div>

        <div role="tabpanel" class="tab-pane fade" id="about_div">

        </div>

        <div role="tabpanel" class="tab-pane fade" id="messages_div">
          <?php

            echo "<h4>You and <a href='". $username ."'>"
            . $profile_user_object->getFirstAndLastName() . "</a></h4><hr><br>";
            echo "<div class='loaded_messages' id='scroll_messages'>";
               echo $message_object->getMessages($username);
            echo "</div>";

           ?>

           <div class="message_post">
             <form action="" method="post">
                 <textarea name='message_body' id='message_textarea'
                 placeholder='Write your message ...'></textarea>
                 <input type='submit' name='post_message' class='info'
                 id='post_message' value='Send'>
             </form>

           </div>
           <script>
           $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
               var div = document.getElementById("scroll_messages");
               div.scrollTop = div.scrollHeight;
           });
           </script>
        </div>

      </div>

    </div>



<!-- Modal -->
<div class="modal fade" id="post_form" tabindex="-1" role="dialog"
aria-labelledby="postModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
        aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Post Something!</h4>
      </div>
      <div class="modal-body">
        <p>This will appear on the users profile page and also their
          newsfeed for your friends to see!</p>
        <form class="profile_post" action="" method="post">
          <div class="form_group">
            <textarea class="form_control"name="post_body" ></textarea>
            <input type="hidden" name="user_from" value="<?php
            echo $userLoggedIn; ?>">
            <input type="hidden" name="user_to" value="<?php
            echo $username; ?>">
          </div>
        </form>
      </div>


      <div class="modal-footer">
        <button type="button" class="btn btn-default"
        data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" name="post_button"
        id="submit_profile_post">Post</button>
      </div>
    </div>
  </div>
</div>

<script>
// Code block that enables infinite scrolling
var userLoggedIn = '<?php echo $userLoggedIn; ?>';
var profileUsername = '<?php echo $username; ?>';

$(document).ready(function(){

  $('#loading').show();

  // Original ajax request for loading first posts
  $.ajax({
    url: "includes/handlers/ajax_load_profile_posts.php",
    type: "POST",
    data: "page=1&userLoggedIn=" + userLoggedIn + "&profileUsername=" +
            profileUsername,
    cache:false,

    success: function(data) {
      $('#loading').hide();
      $('.posts_area').html(data);
    }

  });

  $(window).scroll(function(){
    var height = $('.posts_area').height(); // Div containing posts
    var scroll_top = $(this).scrollTop();
    var page = $('.posts_area').find('.nextPage').val();
    var noMorePosts = $('.posts_area').find('.noMorePosts').val();

    if((document.body.scrollHeight == document.body.scroll_top +
      window.innerHeight) && noMorePosts == 'false') {
         $('#loading').show();


         var ajaxReq = $.ajax({
           url: "includes/handlers/ajax_load_profile_posts.php",
           type: "POST",
           data: "page=" + page + "&userLoggedIn=" + userLoggedIn +
                "&profileUsername=" + profileUsername,
           cache:false,

           success: function(response) {
             $('.posts_area').find('.nextPage').remove(); // Removes current .nextPage
             $('.posts_area').find('.noMorePosts').remove(); // Removes current .nextPage


             $('#loading').hide();
             $('.posts_area').append(response);
           }
         });

       } // End if

       return false;
  }); // End $(window).scroll(function()

});
</script>

  </div>
  </body>
</html>