Add async for manage_subscriptions

This commit is contained in:
Omar Roth 2018-11-21 13:35:37 -06:00
parent e80884cfce
commit cdd916f51d
2 changed files with 47 additions and 3 deletions

View file

@ -1438,6 +1438,12 @@ get "/subscription_ajax" do |env|
user = env.get? "user"
referer = get_referer(env)
redirect = env.params.query["redirect"]?
redirect ||= "false"
redirect = redirect == "true"
count_text = ""
if user
user = user.as(User)
@ -1500,9 +1506,18 @@ get "/subscription_ajax" do |env|
PG_DB.exec("UPDATE users SET subscriptions = array_remove(subscriptions,$1) WHERE id = $2", channel_id, sid)
end
end
count_text = PG_DB.query_one?("SELECT cardinality(subscriptions) FROM users WHERE id = $1", [sid], as: Int64)
count_text ||= 0
count_text = "#{number_with_separator(count_text)} subscriptions"
end
if redirect
env.redirect referer
else
env.response.content_type = "application/json"
{"countText" => count_text}.to_json
end
end
get "/delete_account" do |env|

View file

@ -4,7 +4,7 @@
<div class="pure-g h-box">
<div class="pure-u-2-3">
<h3><%= subscriptions.size %> subscriptions</h3>
<h3 id="count"><%= subscriptions.size %> subscriptions</h3>
</div>
<div class="pure-u-1-3" style="text-align:right;">
<h3>
@ -24,7 +24,12 @@
<div class="pure-u-2-5"></div>
<div class="pure-u-1-5" style="text-align: right;">
<h3>
<a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">unsubscribe</a>
<a onclick="remove_subscription(this)"
data-id="<%= channel.id %>"
onmouseenter='this["href"]="javascript:void(0)"'
href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">
unsubscribe
</a>
</h3>
</div>
</div>
@ -34,3 +39,27 @@
<% end %>
</div>
<% end %>
<script>
function remove_subscription(target) {
var row = target.parentNode.parentNode.parentNode.parentNode;
row.style.display = "none";
var url = "/subscription_ajax?action_remove_subscriptions=1&redirect=false&c=" + target.getAttribute("data-id");
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.timeout = 20000;
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("count").innerHTML = xhr.response.countText;
} else {
row.style.display = "";
}
}
}
}
</script>