Switch to thin and fix some ajax bugs

Author: saurabhsharan

Gemfile

@@ -5,3 +5,4 @@ gem 'sqlite3'
 gem 'rake'
 
 gem 'sinatra_more'
+gem 'thin'

Gemfile.lock

@@ -16,6 +16,8 @@ GEM
       tzinfo (~> 1.1)
     arel (6.0.3)
     builder (3.2.2)
+    daemons (1.2.3)
+    eventmachine (1.0.9.1)
     i18n (0.7.0)
     json (1.8.3)
     minitest (5.8.3)
@@ -37,6 +39,10 @@ GEM
       thor (>= 0.11.8)
       tilt (>= 0.2)
     sqlite3 (1.3.11)
+    thin (1.6.4)
+      daemons (~> 1.0, >= 1.0.9)
+      eventmachine (~> 1.0, >= 1.0.4)
+      rack (~> 1.0)
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (2.0.2)
@@ -51,6 +57,7 @@ DEPENDENCIES
   sinatra-activerecord
   sinatra_more
   sqlite3
+  thin
 
 BUNDLED WITH
    1.10.6

app.rb

@@ -2,6 +2,7 @@
 require 'active_record'
 require 'sinatra'
 require 'sinatra/activerecord'
+# require 'sinatra/json'
 
 set :database, { adapter: 'sqlite3', database: 'treeyak.sqlite3' }
 
@@ -46,20 +47,25 @@ class Yak < ActiveRecord::Base
   redirect to('/')
 end
 
+get '/wtf' do
+  'hi'
+end
+
 post '/upvote' do
+  yak_id = params['yak_id']
+  
   # BEGIN YOUR CODE HERE
 
-  # In this section, you should increement the yak's upvotes by 1 and return the new number of upvotes in json.
+  # In this section, you should increment the yak's upvotes by 1 and return the new number of upvotes in json.
   # (Note: This will be called via AJAX, so you don't need to render any html or redirect to any other page.)
 
   # END YOUR CODE HERE
 
   # SOLUTION
-  yak = Yak.where(id: params['yak_id']).first
+  yak = Yak.where(id: yak_id).first
   yak.upvotes += 1
-  puts yak.upvotes
   yak.save
-  yak.upvotes # return new number of upvotes to client
+  yak.upvotes.to_s
   # END SOLUTION
 end
 
@@ -68,21 +74,16 @@ class Yak < ActiveRecord::Base
 
   # BEGIN YOUR CODE HERE
 
-  # In this section, you should decrement the yak's upvotes by 1. If the yak has less than -2 votes, then you should delete the yak and return JSON indicating that the yak has been deleted. Otherwise, return the new number of upvotes this yak has.
-  # This will be called via AJAX, so you don't need to render any html or redirect to any other page.
-  # Hint: You should be able to reuse some code from the '/upvote' method.
+  # In this section, you should decrement the yak's upvotes by 1 and return the new number of upvotes in json.
+  # (Note: This will be called via AJAX, so you don't need to render any html or redirect to any other page.)
 
   # END YOUR CODE HERE
 
   # SOLUTION
-  yak = Yak.where(id: params['yak_id']).first
+  yak = Yak.where(id: yak_id).first
   yak.upvotes -= 1
-  if yak.upvotes <= -2
-    yak.destroy!
-    # render json to indicate yak has been flagged/deleted
-  end
   yak.save
-  yak.upvotes # return new number of upvotes to client
+  yak.upvotes.to_s
   # END SOLUTION
 end
 
@@ -97,6 +98,8 @@ class Yak < ActiveRecord::Base
   # SOLUTION
   yaks = Yak.order(upvotes: :desc)
   # END SOLUTION
+  
+  erb :index, locals: { yaks: yaks }
 end
 
 get '/new' do
@@ -110,4 +113,6 @@ class Yak < ActiveRecord::Base
   # SOLUTION
   yaks = Yak.order(created_at: :desc)
   # END SOLUTION
+  
+  erb :index, locals: { yaks: yaks }
 end

treeyak.sqlite3

@@ -54,7 +54,7 @@
 
     <div id="subwelcome">
       <p><a href="/new_yak">Create a new yak</a></p>
-      Sort by: <a href="/?order=new">New</a> | <a href="/?order=hot">Hot</a>
+      Sort by: <a href="/new">New</a> | <a href="/hot">Hot</a>
     </div>
 
 
@@ -66,8 +66,13 @@
               <p><%= yak.contents %></p>
             </div>
             <div class="card-action">
-              <a href="#">Upvote</a>
-              <a href="#">Downvote</a>
+              <span style="color: yellow;">
+                <span id="<%= yak.id %>-upvotes"><%= yak.upvotes %></span> upvotes
+              </span>
+              <span style="float: right;">
+                <a href="#" class="upvote" data-yakid="<%= yak.id %>">Upvote</a>
+                <a href="#" class="downvote" data-yakid="<%= yak.id %>">Downvote</a>
+              </span>
             </div>
           </div>
         </div>
@@ -77,21 +82,37 @@
 
     <script type="text/javascript">
       $(document).ready(function() {
+        
         $('.upvote').on('click', function(e) {
-          console.log("got upvote");
-          console.log($(this).get('yakid'));
+          e.preventDefault();
 
-          // $.ajax({
-          //   method: "POST",
-          //   url: "/upvote?yak_id=<%= yak.id %>"
-          // })
-          //   .done(function(msg) {
-          //     console.log(msg);
-          //   });
+          var yak_id = $(this).data('yakid');
 
-          // /upvote?yak_id=<%= yak.id %>
-          // /downvote?yak_id=<%= yak.id %>
+          $.ajax({
+            method: "POST",
+            url: "/upvote?yak_id=" + yak_id
+          })
+          .done(function(msg) {
+            // console.log(msg);
+            $("#" + yak_id + "-upvotes").text(msg);
+          });
         });
+        
+        $('.downvote').on('click', function(e) {
+          e.preventDefault();
+          
+          var yak_id = $(this).data('yakid');
+          
+          $.ajax({
+            method: "POST",
+            url: "/downvote?yak_id=" + yak_id
+          })
+          .done(function(msg) {
+            // console.log(msg);
+            $("#" + yak_id + "-upvotes").text(msg);
+          });
+        });
+        
       });
     </script>
   </body>