Add join/leave UI on community pages; #905

This uses a hard refresh of the page to update state. Maybe we'll have a
nice framework for doing that on-page some day (Angular? #833).

gittip/models/community.py

@@ -2,10 +2,18 @@
 from sqlalchemy.types import Text, BigInteger
 
 from gittip.orm import db
+from gittip import db as dear_god_why
 
 class Community(db.Model):
     __tablename__ = 'community_summary'
 
     name = Column(Text)
     slug = Column(Text, primary_key=True)
     nmembers = Column(BigInteger)
+
+    def check_membership(self, user):
+        return dear_god_why.fetchone("""
+
+        SELECT * FROM current_communities WHERE slug=%s AND participant=%s
+
+        """, (self.slug, user.username)) is not None

templates/base.html

@@ -22,7 +22,7 @@
     <style>@import url("/assets/chosen/chosen.css");</style>
 
     <script src="/assets/{{ __version__ }}/gittip.js"></script>
-    <script>$(document).ready(Gittip.initCSRF);</script>
+    <script>$(document).ready(Gittip.init);</script>
 
     <!-- start Mixpanel -->
     <script type="text/javascript">

www/assets/%version/gittip.js

@@ -517,6 +517,18 @@ Gittip.paymentsResponseHandler = function(response)
     }
 };
 
+Gittip.init = function(username)
+{
+    // username is useful for constructing API endpoints
+    var username = Gittip.getCookie('username');
+    if (username === '')
+        delete Gittip.username;
+    else
+        Gittip.username = username;
+
+    Gittip.initCSRF();
+};
+
 Gittip.initPayment = function(balanced_uri, participantId)
 {
     Gittip.participantId = participantId;
@@ -705,7 +717,7 @@ Gittip.communities.update = function(name, is_member, callback)
 {
     jQuery.ajax(
         { type: 'POST'
-        , url: 'communities.json'
+        , url: '/' + Gittip.username + '/communities.json'
         , data: {name: name, is_member: is_member}
         , dataType: 'json'
         , success: callback

www/for/%slug/index.html

@@ -121,15 +121,41 @@ <h2 class="pad-sign">{{ community.name }}</h2>
 </div>
 {% end %}
 {% block page %}
+<script>
+$(document).ready(function() {
+
+    $('BUTTON.join-leave').click(function()
+    {
+        var button = $(this);
+        var name = button.attr('data-name');
+        var is_member = button.attr('data-is-member') === 'true';
+        Gittip.communities.update(name, !is_member, function()
+        {
+            window.location.reload();
+        });
+    });
+
+});
+</script>
 
 {% if community.nmembers < website.NMEMBERS_THRESHOLD %}
 <div class="col0">
 
-    <h2>{{ website.NMEMBERS_THRESHOLD - community.nmembers }} more members
-    needed!</h2>
-
-    <p>Once this community reaches {{ website.NMEMBERS_THRESHOLD }} members,
-    we'll show top givers and receivers for this community.</p>
+    {% set nneeded = website.NMEMBERS_THRESHOLD - community.nmembers %}
+    <h2>{{ nneeded }} more member
+        {{ '' if nneeded == 1 else 's' }} needed!</h2>
+
+    <p>Once this community reaches {{ website.NMEMBERS_THRESHOLD }}
+    member{{ '' if website.NMEMBERS_THRESHOLD == '1' else 's' }},
+    we'll start showing stats and info here.</p>
+
+    {% set is_member = community.check_membership(user) %}
+    <button class="join-leave"
+            data-name="{{ community.name }}"
+            data-is-member="{{ 'true' if is_member else 'false' }}">
+        <span>{{ "Leave" if is_member else "Join" }}</span>
+        {{ community.name }}
+    </button>
 
 </div>
 {% else %}