A partial archive of meta.discourse.org as of Tuesday July 18, 2017.

Retort - a reaction-style plugin for Discourse

gdpelican

Hey folks,

I had a hack weekend and came up with a pretty cool plugin; it allows you to add slack-style reactions to posts via the normal emoji picker menu.

Feel free to pull it down and have a play (http://www.github.com/gdpelican/retort), keeping in mind that it was thrown together quickly and may still have a rough edge or two (let me know what sucks!).

Enjoy!

KazWolfe

This looks awesome!

Though, would it be possible to limit the usable retorts (so only whitelisted, approved can be used), similar to how Xenforo does it?

gdpelican

Seems like a possibility, sure.

erlend_sh

One thing I couldn't tell just by looking at your demo: Is there a way to see who gave which reaction? If you hover over a posted reaction on Slack, you'll see that "bob and alice reacted with :gasp:

Is there an equivalent to that here?

gdpelican

Yes, it supports that:

Although the thing that it doesn't do yet is group the reactions by type (so 3 people reacting with heart face will render out three separate heart face reactions); I'll likely do this at some point soon though.

gdpelican

FYI I've updated this to work with the new compatibility layer changes outlined here:

ivanrlio

Hey James.

Just wondering if you've made any progress on getting the reactions to tally up according to the type of reaction?

gdpelican

Well, the quick answer is, I haven't done anything.

The slightly longer answer is that if I get bugged enough by a few people interested in putting this on their instance, and feeling the need for this functionality, I'd be happy to spend a little more time on it.

Unknwon

Hi, I've added line git clone https://github.com/gdpelican/retort.git to my container/app.yml, and added retort to Basic Setup -> post menu, also enabled Plugins -> retort enabled.

But when I visit the topic/post, the smile icon does not appear anyway.

Running latest Discourse v1.5.0.beta11 +187.

Any suggestions? Thanks!

cpradio

Chances are you are on a version that needs the new plugin API and this hasn't been updated to utilize it yet.

Unknwon

Ah... OK, thank you though!

cpradio

I've got the initializer working, but I'm struggling to figure out how to deal with the new post after cooked connector. Primarily because I don't have a lot of experience with the new API yet, so I'm still trying to learn it by examples.

gdpelican

Super appreciate the help @cpradio. Discourse pulling the rug out from the plugin APIs has come at a bit of an inconvenient time, heh, but will definitely commit to getting everything back up and running as soon as I'm able.

cpradio

No problem. I have commited the initializer changes here

github.com

cpradio/retort/blob/master/assets/javascripts/discourse/initializers/retort-button.js.es6

import { withPluginApi } from 'discourse/lib/plugin-api';
import PostMenuComponent from 'discourse/components/post-menu';
import { Button } from 'discourse/components/post-menu';
import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
import { showSelector } from "discourse/lib/emoji/emoji-toolbar";
import

function priorToApi(container)
{
  PostMenuComponent.registerButton(function(visibleButtons) {
    if (!Discourse.User.current() || !this.siteSettings.retort_enabled) { return }
    return visibleButtons.splice(0, 0, new Button('retort', 'retort.title', 'smile-o'))
  })

  PostMenuComponent.reopen({
    clickRetort: function(post) {
      const self = this
      showSelector({
        container: self.container,
        onSelect: function(retort) {

This file has been truncated. show original

@eviltrout, do you mind giving me a helping hand so I can learn this a bit better, I know I need to use decorateWidget, I think, for the post-contents:after-cooked, but it complains that retorts is not defined. Which makes me feel I either need to include it, or change how it is being accessed. (also, talk to me like I'm a 2 year old, as JavaScript frameworks are still not my fortray and my experience with it is still only via Discourse).

@gdpelican, if you have any ideas too, more than willing to take advice as I keep pushing on figuring out how to get this operational again.

cpradio

Sweet, I'm making progress, I now have accecss to the retorts in the decorateWidget post-contents:after-cooked call. This shouldn't take too much longer (I don't think).

I'm placing the retorts in the PostSerializer, this can probably be refactored/refined to be better, but it works.

github.com

cpradio/retort/blob/master/plugin.rb#L128-L137


require_dependency 'post_serializer'
class ::PostSerializer
  attributes :retorts


  def retorts
    topic = (topic_view && topic_view.topic) || object.topic
    return Retort::Retort.where(topic: topic).where(post_id: id)
  end
end
end

cpradio

And done!

@gdpelican, I haven't updated the version in the plugin.rb, not sure how you want to do that, but I'll submit a PR here shortly.

PR Submitted

I didn't update the version in the PR, so feel free to update it accordingly.

cpradio

So there is one bug, I can't get it to refresh the post when a retort is added... I even tried manually calling appEvents.trigger('post-stream:refresh', { id: post.id});, but that didn't do it either...

So right now it requries you to reload the topic or the post to see the retorts that were added.

cpradio

So through trial and error this rerenders the retort for the current user, but it doesn't force a rerender for viewing users.

Edit: More Corrections
- Anonymous do not see the retort button anymore
- Anonymous can see the retorts
- Fixed all outstanding issues on GitHub (including the hard coding of the Emoji URL)

cpradio

I also started grouping the retorts, but I don't really like this approach, it should be done at a model/database level and sent down already goruped, otherwise, it becomes very costly.

github.com

cpradio/retort/blob/group-by-retort/assets/javascripts/discourse/initializers/retort-button.js.es6#L39-L67


var html = '<div class="post-retorts">';


var sortedRetorts = post.retorts.sortBy(['emoji']);
var priorRetort = '';
for (var i = 0; i < sortedRetorts.length; i++) {
  var item = sortedRetorts[i];
  var isFirstRetort = priorRetort === '';
  var isDifferentRetort = priorRetort !== item.emoji;


  if (isFirstRetort)
    html += '<div class="post-retort">';


  if (isDifferentRetort && !isFirstRetort) {
    html = html.substring(0, html.length - 2);
    html += '</span></div>';
    html += '<div class="post-retort">';
  }


  if (isFirstRetort || isDifferentRetort)
    html += `<img src="${Discourse.Emoji.urlFor(item.emoji)}" class="emoji" alt=":${item.emoji}:"><span class="post-retort-tooltip">`;

This file has been truncated. show original

gdpelican

Whoa, this is great! Thanks for the spike, @cpradio! It'll help me out a bunch to have a reference for when I make the adjustment for Babble as well.

For the grouping, I've actually re-implemented this for Loomio (here) in a way that caters better to that use case; instead of hashes which look like this

{
  bob: "smiley",
  alice: "smiley"
}

We really want hashes which look like this:

{
  smiley: ["bob", "alice"] 
}

Which makes the clientside rendering pretty trivial. It may be backwards incompatible, but I think we'll have to do it that way to get the grouping functionality working in a way that isn't horrible.