Mattermost-server: Migrate autocomplete and search actions from user_actions.jsx 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

Part of [https://mattermost.atlassian.net/browse/MM-12581]

• autocompleteUsersInChannel
• autocompleteUsersInTeam
• autocompleteUsers
• searchUsers

---

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>;
\}
\}

[MirlanMaksv]

Hey guys let me help with this issue

[hanzei]

Great, thanks @MirlanMaksv! :tada:

[hanzei]

Hey @MirlanMaksv,

How is your work on this ticket going? Do you have questions?

[MirlanMaksv]

Hi @hanzei, yep I am working on it. Yes, I have a question regarding generic Providers. That class uses an autocompleteUsers action from mm-webapp, which internally uses dispatch and getState from store directly. But using autocompleteUsers from mm-redux means that action should be dispatched, so my question is how an action should be dispatched from a non-component class?

[hanzei]

@MirlanMaksv Thanks for the heads up :+1:

@sudheerDev Would please take a look at the above question?

[sudheerDev]

@MirlanMaksv Sorry for the delay on getting back to you on this. Ya we cannot access dispatch or store in the classes of providers we have as we are trying to move away from the pattern of removing the global usage of those instances.

One way i see is to pass in the redux action autocompleteUsers for these instances from the react component as an argument which will help solve this issue.

so, https://github.com/mattermost/mattermost-webapp/blob/eb037766bf4055a34e228d0e7b93141a3b778ccf/components/suggestion/generic_user_provider.jsx#L64 can take a third argument as action.

which can be passed from https://github.com/mattermost/mattermost-webapp/blob/eb037766bf4055a34e228d0e7b93141a3b778ccf/components/suggestion/suggestion_box.jsx#L555.

Let me know if you have any questions about this

[cometkim]

searchUsers has been done from https://github.com/mattermost/mattermost-webapp/pull/2679

autocomplete series still exist.

[hanzei]

@MirlanMaksv Do the above answer solve your question?

[hanzei]

Making this one available for the public again due to inactivity.

[AGMETEOR]

@hanzei I can pick this up.

[AGMETEOR]

Some comments on this;
1 > Can't findsearchUsers in any actions file.
2 > Looks like autocompleteUsersInChannel is already using the redux pattern