Web App Plugins : profile popover

Troubleshooting
1

Hi !

I’m trying to create a web app plugin, to overwrite the profile popover.

I’ve followed this example on github (jwilander/hovercardexample).

I have some questions :

Thanks you in advance, thanks you again for this awesome product !

2

Hi @clark42,

Thanks for your question! We’re so pleased you’re enjoying using Mattermost!

I’ll ask one of our engineers for help with your issue :slight_smile:

1 Like
3

Hi @clark42,

  1. You should be able to import react-router and use a Link component with a to prop of “//messages/”. You can get the team name by passing it in from the redux store in your profile_popover/index.js file.
  2. You can pass it in as a prop in your profile_popover/index.js. Something like this should work:
function mapDispatchToProps(state) {
  return {
    currentUserId: state.entities.users.currentUserId
  };
}

Let me know if that helps :slight_smile:

1 Like
4

Hi @jwilander !

And thanks for your answer.

To be honnest, I’m not a front end developer, either a backend one :smiley:

I’m just an ops/devops, mattermost enthusiast, trying to override the profile popover.
I’ve already succeeded to create a server plugin in Go (my first dev in Go), but frontend … is not my cup of tea!

I think I understand the most part of your message, except how to get the team name.

Can you explain me a little more how can I get/import the redux store ? Is it the TeamStore like in the original popover ?

Thanks for your support!

5

No problem! You have direct access to the redux store’s state in your index.js file (the connect() bit at the bottom will connect your component to redux). To get the team name, you can use a selector in your mapDispatchToProps function. Should look something like this:

const {connect} = window['react-redux'];

import {getCurrentTeam} from 'mattermost-redux-beta/selectors/entities/teams';

import ProfilePopover from './profile_popover.jsx';

function mapStateToProps(state) {
    const team = getCurrentTeam(state) || {};
    return {
        currentUserId: state.entities.users.currentUserId,
        teamName: team.name
    };
}

export default connect(mapStateToProps)(ProfilePopover);

Then if you just add the prop in profile_popover.jsx you’ll have access to it