Merge branch 'follow-ajax' into 'master'

Make Follow button ajax

See merge request TeamSPD/Chirp!106

apps/feed/templates/feed/home.html

@@ -363,7 +363,7 @@ <h5 class="media-heading date_created_value" value="__prefix_post_created_on__">
                                                             </div>
 
                                                             <div class="col-md-2 follow">
-                                                                <a href="{% url 'user_profile:follow_user' username=follow_user.username %}"><i class="fa fa-user-plus"></i></a>
+                                                                <a href="{% url 'user_profile:follow_user' username=follow_user.username %}" class="follow-friends-btn"><i class="fa fa-user-plus"></i></a>
                                                             </div>
                                                         </div>
                                                     </li>
@@ -496,7 +496,23 @@ <h5 class="media-heading date_created_value" value="__prefix_post_created_on__">
             .__hidden__{
                 display: none;
             }
-
         </style>
+        <script>
+            $('.follow-friends-btn').click(function(event){
+                var clicked = $(this);
+                event.preventDefault();
+                $.ajax({
+                    url: $(this).attr('href'),
+                    success: function(response){
+                        if(response.following == true){
+                            $(clicked).html('<i class="fa fa-user-times"></i>');
+                        }
+                        else if(response.following == false){
+                            $(clicked).html('<i class="fa fa-user-plus"></i>');
+                        }
+                    }
+                })
+            });
+        </script>
 {% endblock post_add_js %}
 

apps/search/templates/search/partial_users_results.html

@@ -1,4 +1,5 @@
 {%load static%}
+{% load check_followed_filter %}
 <!-- <p class="font-italic">You searched for user "<strong>{{querystring}}</strong>" </p> -->
 {% if results %}
   <ul class="users-results">
@@ -11,11 +12,16 @@
       </a>
       <div class="media-body">
         <strong><a href="{%url 'user_profile:user_profile' user_result.username%}">{{user_result.first_name}} {{user_result.last_name}}</a></strong></br>
-        <h5 class="media-heading"><small><a href="{%url 'user_profile:user_profile' user_result.username%}">@{{user_result.username}}</a> &middot; 1h</small></h5>
+        <h5 class="media-heading"><small><a href="{%url 'user_profile:user_profile' user_result.username%}">@{{user_result.username}}</a></small></h5>
         </div>
+        {% if user|check_followed_user_already:user_result %}
+        <a href="{% url 'user_profile:follow_user' username=user_result.username %}"><btn class="btn btn-sm btn-info btn-round" rel="tooltip" title="Follow"><i class="fa fa-user-times"></i>Unfollow</btn></a>
+        {% else %}
+        <a href="{% url 'user_profile:follow_user' username=user_result.username %}"><btn class="btn btn-sm btn-info btn-round" rel="tooltip" title="Follow"><i class="fa fa-user-plus"></i>Follow</btn></a>
+        {% endif %}
 </div> <!-- end media -->
     {% endfor %}
   </ul>
 {% else %}
-  <h4 class="no-result">NOO!!!<br>Does that name even exists 😃😄😅</h4>
-{% endif %}
+  <h4 class="no-result">NOO!!!<br> Does that name even exists 😃😄😅</h4>
+{% endif %}

apps/search/templates/search/results.html

@@ -74,6 +74,23 @@ <h5 class="card-title">Trends &middot; <!--<small><a href="javascript: void(0);"
         color: black;
     }
 </style>
+<script>
+    $('[title=Follow]').click(function(event){
+        var clicked = $(this);
+        event.preventDefault();
+        $.ajax({
+            url: $(this).parent().attr('href'),
+            success: function(response){
+                if(response.following == true){
+                    $(clicked).html('<i class="fa fa-user-times"></i>Unfollow');
+                }
+                else if(response.following == false){
+                    $(clicked).html('<i class="fa fa-user-plus"></i>Follow');
+                }
+            }
+        })
+    });
+</script>
 {% endblock post_add_js %}
 
 

apps/user_profile/models.py

@@ -27,7 +27,7 @@ def all(self):
         return qs
 
     def toggle_follow(self, user, to_toggle_user):
-        user_profile, created = User_details.objects.get_or_create(user=user)
+        user_profile = User_details.objects.get(user=user)
         if to_toggle_user in user_profile.follows.all():
             user_profile.follows.remove(to_toggle_user)
             added = False

apps/user_profile/templates/user_profile.html

@@ -186,7 +186,7 @@ <h6>{{user_follows.user.first_name }} {{user_follows.user.last_name }}<br /><sma
                                                             <div class="unfollow" rel="tooltip" title="Unfollow">
                                                                 <div class="following">
                                                                     {% if user|check_followed_user_already:user_follows.user %}
-                                                                    <a href="{% url 'user_profile:follow_user' username=user_follows.user.username %}"><btn class="btn btn-sm btn-info btn-round" rel="tooltip" title="Follow"></i>Unfollow</btn></a>
+                                                                    <a href="{% url 'user_profile:follow_user' username=user_follows.user.username %}"><btn class="btn btn-sm btn-info btn-round" rel="tooltip" title="Follow"><i class="fa fa-user-times"></i>Unfollow</btn></a>
                                                                     {% else %}
                                                                     <a href="{% url 'user_profile:follow_user' username=user_follows.user.username %}"><btn class="btn btn-sm btn-info btn-round" rel="tooltip" title="Follow"><i class="fa fa-user-plus"></i>Follow</btn></a>
                                                                     {% endif %}
@@ -227,4 +227,22 @@ <h3 class="text-muted">Not following anyone yet :(</h3>
                 color: black;
             }
         </style>
+
+    <script>
+        $('[title=Follow]').click(function(event){
+            var clicked = $(this);
+            event.preventDefault();
+            $.ajax({
+                url: $(this).parent().attr('href'),
+                success: function(response){
+                    if(response.following == true){
+                        $(clicked).html('<i class="fa fa-user-times"></i>Unfollow');
+                    }
+                    else if(response.following == false){
+                        $(clicked).html('<i class="fa fa-user-plus"></i>Follow');
+                    }
+                }
+            })
+        });
+    </script>
 {% endblock post_add_js %}

apps/user_profile/views.py

@@ -1,6 +1,7 @@
 from django.contrib.auth import get_user_model
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
+from django.http import JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 
 from posts.forms import PostForm, PostMediaFormSet
@@ -30,11 +31,12 @@ def user_profile(request, username=None):
 
 @login_required
 def follow_user(request, username=None):
-    toggle_user = get_object_or_404(User_model, username__iexact=username)
+    is_following = False
+    toggle_user = get_object_or_404(User_model, username=username)
     if request.user != toggle_user:
         is_following = User_details.objects.toggle_follow(
             request.user, toggle_user.user_details)
-    return redirect('user_profile:user_profile', username=username)
+    return JsonResponse({'following': is_following})
 
 
 @login_required

chirp/templates/profile_details.html

@@ -56,7 +56,7 @@ <h5>{{profile_user.first_name}} {{profile_user.last_name}} <br />
                     <div class="following">
                         {% if user|check_followed_user_already:profile_user %}
                             <a href="{% url 'user_profile:follow_user' username=profile_user.username %}">
-                                <btn class="btn btn-info btn-round" rel="tooltip" title="Follow">Unfollow</btn>
+                                <btn class="btn btn-info btn-round" rel="tooltip" title="Follow"><i class="fa fa-user-times"></i>Unfollow</btn>
                             </a>
                         {% else %}
                             <a href="{% url 'user_profile:follow_user' username=profile_user.username %}">