Added AJAX support.

app/core/views.py

@@ -1,3 +1,4 @@
+from flask import json, Response
 from datetime import datetime
 from flask import render_template, flash, redirect, \
     url_for, request, current_app
@@ -87,26 +88,70 @@ def edit_profile():
 def follow(username):
     user = User.query.filter_by(username=username).first()
     if not user:
-        flash("User not found")
-        return redirect(url_for("core.index"))
+        response = Response(
+            response=json.dumps({
+                'error': 'User not found'
+            }),
+            status=502,
+            mimetype='application/json'
+        )
+        return response
+
     if user == current_user:
-        flash("You can't follow yourself")
-        return redirect(url_for('core.user', username=username))
+        response = Response(
+            response=json.dumps({
+                'error': "You can't follow yourself"
+            }),
+            status=502,
+            mimetype='application/json'
+        )
+        return response
+
     current_user.follow(user)
     db.session.commit()
-    flash(f"You are following {username}!")
-    return redirect(url_for("core.user", username=username))
+
+    response = Response(
+        response=json.dumps({
+            'error': ""
+        }),
+        status=200,
+        mimetype='application/json'
+    )
+
+    return response
 
 @bp.route('/unfollow/<username>')
 def unfollow(username):
     user = User.query.filter_by(username=username).first()
     if not user:
-        flash("User not found")
-        return redirect(url_for("core.index"))
+        response = Response(
+            response=json.dumps({
+                'error': 'User not found'
+            }),
+            status=502,
+            mimetype='application/json'
+        )
+        return response
+
     if user == current_user:
-        flash("You can unfollow yourself")
-        return redirect(url_for("core.user", username=username))
+        response = Response(
+            response=json.dumps({
+                'error': "You can't unfollow yourself"
+            }),
+            status=502,
+            mimetype='application/json'
+        )
+        return response
+
     current_user.unfollow(user)
     db.session.commit()
-    flash(f"You unfollowed {username}")
-    return redirect(url_for('core.user', username=username))
+
+    response = Response(
+        response=json.dumps({
+            'error': ""
+        }),
+        status=200,
+        mimetype='application/json'
+    )
+
+    return response

app/templates/base.html

@@ -54,6 +54,8 @@
 
 {{ moment.include_moment() }}
 <script>
+
+
     $(function () {
         var timer = null;
         var xhr = null;
@@ -94,7 +96,7 @@
                 }
             }
         )
-    })
+    });
 </script>
 
 </html>

app/templates/user.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <table>
+    <table xmlns="http://www.w3.org/1999/html">
         <tr valign="top">
             <td><img src="{{ user.avatar(128) }}"></td>
             <td>
@@ -12,9 +12,9 @@ <h1>User: {{ user.username }}</h1>
                 {% if user == current_user %}
                 <p><a href="{{ url_for('core.edit_profile')}}">Edit Profile</a></p>
                 {% elif current_user.is_following(user) %}
-                <p><a href="{{ url_for('core.unfollow', username=user.username)}}">Unfollow</a></p>
+                <p id="btn-holder"><button type="button" id="unfollow" class="btn btn-info" onclick="stopFollowing()">Unfollow</button></p>
                 {% else %}
-                <p><a href="{{ url_for('core.follow', username=user.username)}}">Follow</a></p>
+                <p id="btn-holder"><button type="button" id="follow" class="btn btn-info" onclick="startFollowing()">Follow</button></p>
                 {% endif %}
             </td>
         </tr>
@@ -29,4 +29,44 @@ <h1>User: {{ user.username }}</h1>
     {% if next_url %}
     <a href="{{ next_url}}">Older Posts</a>
     {% endif %}
+
+    <script>
+    function startFollowing() {
+        $.ajax({
+            url: '{{ url_for('core.follow', username=user.username)}}',
+            statusCode: {
+                200: function(data) {
+                    let btn = document.getElementById('follow');
+                    btn.onclick = stopFollowing;
+                    btn.id = 'unfollow';
+                    btn.innerText = 'Unfollow';
+                    console.log('gotem');
+                },
+                502: function (data) {
+                    let btnHolder = document.getElementById('btn-holder');
+                    btnHolder.appendChild(document.createTextNode(data['error']));
+                }
+            }
+        })
+    }
+
+    function stopFollowing() {
+        $.ajax({
+            url: '{{ url_for('core.unfollow', username=user.username)}}',
+            statusCode: {
+                200: function(data) {
+                    let btn = document.getElementById('unfollow');
+                    btn.onclick = startFollowing;
+                    btn.id = 'follow';
+                    btn.innerText = 'Follow';
+                    console.log('gotem');
+                },
+                502: function (data) {
+                    let btnHolder = document.getElementById('btn-holder');
+                    btnHolder.appendChild(document.createTextNode(data['error']));
+                }
+            }
+        })
+    }
+    </script>
 {% endblock %}