# Updating Discourse Plugins, taking the first step

**URL:** https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241
**Category:** Development
**Created:** [March 17, 2016, 11:23pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241 "2016-03-17T23:23:47Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![stevenpslade](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stevenpslade/32/53550_2.png) [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [March 17, 2016, 11:23pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/1 "2016-03-17T23:23:47Z")

</div>

I have to fully read the new plugin api format but my first problem actually has to do with this error:

`The discourse/components/post-menu object has been removed from Discourse and your plugin needs to be updated.`

PostMenu is a pretty important one and as far as I can tell does exist upon searching the Discourse repo on github. This is what is in the plugin:

```
import PostMenu from 'discourse/components/post-menu';
import StringBuffer from 'discourse/mixins/string-buffer';
import { iconHTML } from 'discourse/helpers/fa-icon';
import ComposerController from 'discourse/controllers/composer';

```

…some code inbetween…

```
  PostMenu.reopen({
    buttonForLike() {
      const likeAction = this.get('post.likeAction');
      if (!likeAction) { return; }
      var className = likeAction.get('acted') ? 'has-like fade-out' : 'like';
      var uId = Discourse.User.current().id;

      if (uId%2 == 0) className+= " custom-like"

      const opts = {className: className};

      if (likeAction.get('canToggle')) {
        const descKey = likeAction.get('acted') ? 'post.controls.undo_like' : 'post.controls.like';
        return new Button('like', descKey, 'heart', opts);
      } else if (likeAction.get('acted')) {
        opts.disabled = true;
        return new Button('like', 'post.controls.has_liked', 'heart', opts);
      }
    }
  });

```

Is there no more PostMenu component?

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [March 17, 2016, 11:44pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/2 "2016-03-17T23:44:56Z")

</div>

Can you explain what this plugin is doing? There might be a better (_easier_) way of doing it now 😉

---

<div class="post-metadata">

### Author: ![stevenpslade](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stevenpslade/32/53550_2.png) [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [March 17, 2016, 11:52pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/3 "2016-03-17T23:52:27Z")

</div>

It does a couple of different things. For every other user, the like button style is different. The more important function of the plugin which isn’t shown in what I copied over, is that for logged out users, taking the action of liking or replying will redirect to a specific URL.

```
   //if NOT current user
          PostMenu.reopen({

            buttonForLike() {
              const opts = {className: 'like'};
              return new Button('like', 'post.controls.like', 'heart', opts);
            },

            // Reply button
            buttonForReply() {
              const options = {className: 'create fade-out'};

              if(!Discourse.Mobile.mobileView) {
                options.textLabel = 'topic.reply.title';
              }

              return new Button('reply', 'post.controls.reply', 'reply', options);
            },

            clickLike(post) {
              location.href = this.redirectUrl();
            },

            clickReply(post) {
              location.href = this.redirectUrl();
            },

            redirectUrl() {
              return 'http://website/join/?try=comment'
            }
          });
        }
      }
    }

```

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [March 18, 2016, 12:02am UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/4 "2016-03-18T00:02:29Z")

</div>

Hmm, so you need to override the current behaviour of existing `PostMenu` buttons.

Is that still possible @eviltrout?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 18, 2016, 5:06pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/5 "2016-03-18T17:06:35Z")

</div>

You are going to update to use the new client side [Discourse Plugin API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051). In particular you will want to use [addPostMenuButton](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L196).

For a larger example complete with backwards compatibility, you can [check out the solved button](https://github.com/discourse/discourse-solved/blob/master/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6#L114) plugin code.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [March 18, 2016, 5:58pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/6 "2016-03-18T17:58:43Z")

</div>

> [@eviltrout](#):
>
> In particular you will want to use addPostMenuButton.

I believe he doesn’t want to add a new button but rather change the behavior of an existing one. I guess you could hide the original like button and add a custom one…

---

<div class="post-metadata">

### Author: ![stevenpslade](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stevenpslade/32/53550_2.png) [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [March 18, 2016, 6:24pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/7 "2016-03-18T18:24:20Z")

</div>

so `clickLike` is not a thing anymore?

---

<div class="post-metadata">

### Author: ![joebuhlig](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joebuhlig/32/193054_2.png) [@joebuhlig](https://meta.discourse.org/u/joebuhlig)
#### Post date: [March 18, 2016, 6:57pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/8 "2016-03-18T18:57:03Z")

</div>

I don’t believe so. It moved from a component to a widget.

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/post-menu.js.es6#L32](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/post-menu.js.es6#L32)

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 18, 2016, 7:06pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/9 "2016-03-18T19:06:12Z")

</div>

Ah, thanks for the clarification. You can actually use `api.attachWidgetAction` to overwrite a widget’s action too:

```plaintext
api.attachWidgetAction('post-menu', 'like', () => {
  console.log('new like code goes here');
});

```

---

<div class="post-metadata">

### Author: ![stevenpslade](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stevenpslade/32/53550_2.png) [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [March 22, 2016, 4:12pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/10 "2016-03-22T16:12:40Z")

</div>

```
  api.addPostMenuButton('coffee', () => {
              return {
                action: 'drinkCoffee',
                icon: 'coffee',
                className: 'coffee',
                title: 'coffee.title',
                position: 'first' // can be `first`, `last` or `second-last-hidden`
              };

```

I have a question about the position argument for `addPostMenuButton`. How would one go about positioning the new button as second or third. Seems like if you can choose first or last, you might as well give ful control and be able to choose middle, etc as well.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 22, 2016, 4:14pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/11 "2016-03-22T16:14:21Z")

</div>

Those positions are based on existing plugin behaviours I needed to duplicate. It turned out that they only needed those three options!

It is more complicated than it seems at first because there is a hidden chunk of icons in the middle. So if you said “middle” does that mean in the hidden section?

As for second, I’d happily accept a PR that adds that 🙂

---

<div class="post-metadata">

### Author: ![stevenpslade](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stevenpslade/32/53550_2.png) [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [March 22, 2016, 4:21pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/12 "2016-03-22T16:21:47Z")

</div>

I’d be happy to try 🙂

Would you mind pointing me in the direction of where the `position: first` logic currently lives in the Discourse repo? 😁

Edit: found it

---

<div class="post-metadata">

### Author: ![stevenpslade](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stevenpslade/32/53550_2.png) [@stevenpslade](https://meta.discourse.org/u/stevenpslade)
#### Post date: [March 22, 2016, 9:32pm UTC](https://meta.discourse.org/t/updating-discourse-plugins-taking-the-first-step/41241/13 "2016-03-22T21:32:28Z")

</div>

Made the PR 😄

[https://github.com/discourse/discourse/pull/4108](https://github.com/discourse/discourse/pull/4108)
