Mattermost-server: [Help Wanted] [MM-12703] Migrate loadDMsAndGMsForUnreads action to redux

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

---

Notes: Jira ticket

Since switching to redux we've been moving all the component actions into the redux stores. There are still a bunch of older actions that need to be migrated. The key change that needs to be made is getting rid of functions (primarily located in the actions directory of the web app code) are directly accessing and dispatching redux actions using the global store instance. Often these functions will be imported by a component and used directly.

If needed convert the action to be a redux action, take a look if the action already exists in mattermost-redux and prefer the use of the library one unless you need to combine it with other actions into one view action.

Then update all the components that makes use of the action and finally add/update/delete the appropriate unit tests

---

Example: you may have a component and activity such as

// actions/foo_actions.js
import * as FooActions from 'mattermost-redux/actions/foo';

import store from 'stores/redux_store';

export function doSomething() {
    return store.dispatch(FooActions.doSomething());
}

// components/my_button.js
import React from 'react';

import {doSomething} from 'actions/foo_actions';

export default class MyButton extends React.PureComponent {
    render() {
        return <button onClick={doSomething}>{'Click me!'}</button>;
    }
}

We should never be importing the global instance of the store directly. Instead, its dispatch method should be accessed through a mapDispatchToProps function passed to react-redux's connect function. Generally, this will also remove the need to have a file like actions/foo_actions.js or at least remove a significant amount of code from it. In this example, the correct code will look like

// components/index.js
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import {doSomething} from 'mattermost-redux/actions/foo';

import MyButton from './my_button';

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators({
            doSomething,
        }),
    };
}

export default connect(null, mapDispatchToProps)(MyButton);

// components/my_button.js
import PropTypes from 'prop-types';
import React from 'react';

export default class MyButton extends React.PureComponent {
    static propTypes = {
        actions: PropTypes.shape({
            doSomething: PropTypes.func,
        }),
    }

    render() {
        return <button onClick={this.props.actions.doSomething}>{'Click me!'}</button>;
    }
}

[zoltanbedi]

Hi, I would like to work on this.

[amyblais]

Thank you @B3zo0!

[zoltanbedi]

It is a shame really but I can't get my head around this. This is a difficult task for me and I don't want to waste your time. So please add up for grabs back. 😞

[esethna]

No worries @B3zo0, feel free to browse our other up for grabs tickets! https://github.com/mattermost/mattermost-server/issues?q=is%3Aopen+is%3Aissue+label%3A%22Up+For+Grabs%22

[JayaKrishnaNamburu]

Hi @esethna I would like to pick this up.

[sudheerDev]

Thanks @JayaKrishnaNamburu. Don't hesitate to reach out to us if you have any questions.

[hanzei]

@JayaKrishnaNamburu How is your working on this ticket going? Can we help with something?

[hanzei]

Making this available for the public again. @JayaKrishnaNamburu Feel free to pick it up when you have the time!

[MirlanMaksv]

I can not find loadDMsAndGMsForUnreads action in the project, could anyone elaborate more on this issue?

[hanzei]

@sudheerDev Can you please take a look at the above questions? :point_up:

[sudheerDev]

@MirlanMaksv Hey ticket is not valid anymore as we moved that functions into another function here at https://github.com/mattermost/mattermost-webapp/pull/1984/files. I am going to close the issue and the ticket associated with this.

Thanks for letting us know.