npm package: @mattermost/mattermost-redux
Description: The project purpose is consolidating the storage, web utilities and logic of the webapp and React Native mobile clients into a single driver. We encourage you to use mattermost-redux to power your own Mattermost clients or integrations.
Latest version: 0.0.1

# Mattermost Redux

The project purpose is consolidating the storage, web utilities and logic of the webapp and React Native mobile clients into a single driver. We encourage you to use mattermost-redux to power your own Mattermost clients or integrations.

[Redux](http://redux.js.org/docs/introduction/) is the backbone for this project and many of the design decisions and patterns stem from it.

Mattermost is an open source Slack-alternative used by thousands of companies around the world in more than 12 languages. Learn more at https://mattermost.com.

# Usage

### Basic Usage

To hook up your application to the mattermost-redux store:

```
import configureServiceStore from 'mattermost-redux/store';

configureServiceStore(yourInitialState, yourAppReducers, yourOfflineOptions);

const store = configureStore();

// use store
```

* `yourInitialState` - any initial state for any extra reducers you may have (set to `{}` if none)
* `yourAppReducers` - any reducers from your app (set to `{}` if none)
* `yourOfflineOptions` - any offline options, specified using [this redux-offline configuration object](https://github.com/jevakallio/redux-offline#configuration-object)

### Web Client Usage

If you're only looking to use the v4 JavaScript web client for the Mattermost server:

With async/await:
```
import {Client4} from 'mattermost-redux/client';

Client4.setUrl('https://your-mattermost-url.com');

async function loginAndGetUser(username, password) {
    try {
        await Client4.login(username, password);
    } catch (error) {
        console.error(error);
        return null;
    }

    let user;
    try {
        user = await Client4.getMe();
    } catch (error) {
        console.error(error);
        return null;
    }

    return user;
}

```

With promises:
```
import {Client4} from 'mattermost-redux/client';

Client4.setUrl('https://your-mattermost-url.com');

function loginAndGetUser(username, password, callback) {
    Client4.login(username, password).then(
        () => {
            Client4.getMe().then(
                (data) => {
                    callback(data);
                }
            ).catch(
                (error) => {
                    console.error(error);
                }
            );
        }
    ).catch(
        (error) => {
            console.error(error);
        }
    );
}
```

If you already have a [personal access token](https://docs.mattermost.com/guides/developer/personal-access-tokens.html) or session token, you can set the token manually instead of logging in:

```
import {Client4} from 'mattermost-redux/client';

Client4.setUrl('https://your-mattermost-url.com');
Client4.setToken(yourToken);
```

### node.js Usage

Running the client from node.js requires making the `fetch` and `WebSocket` packages globally available, and the use of `babel-polyfill`:

```
require('babel-polyfill');
require('isomorphic-fetch');
if (!global.WebSocket) {
    global.WebSocket = require('ws');
}
const Client4 = require('./client/client4.js').default;
const client = new Client4;
const wsClient = require('./client/websocket_client.js').default;
var token;

wsClient.setEventCallback(function(event){
    console.log(event);
});

client.setUrl('https://your-mattermost-url.com');
client.login(username, password)
.then(function(me){
    console.log(`logged in as ${me.email}`);
    token = client.getToken();
})
.then(function(){
    wsClient.initialize(token, {}, {}, {connectionUrl: 'wss://your-mattermost-url.com/api/v4/websocket'});
})
.catch(function(err){
    console.error(err);
});
```

# How to Contribute

### How to Build mattermost-redux

You only need to build mattermost-redux if you are developing it. If your
mattermost-webapp and mattermost-redux are in the same directory, you only need
to run `npm run dev` or `npm run dev:watch`. If you have mattermost-webapp in
other directory or you are developing your own application, you can define the
environment variable `WEBAPP_DIR` to change the destination app
(e. g. `WEBAPP_DIR=/tmp/mattermost-webapp npm run dev`).

### Contribute Code

If you're contributing to help [migrate the webapp to Redux](https://docs.mattermost.com/developer/webapp-to-redux.html) go ahead and submit your PR. If you're just fixing a small bug or adding a small improvement then feel free to submit a PR for it. For everything else, please either work on an issue labeled `[Help Wanted]` or open an issue if there's something else that you'd like to work on.

Feel free to drop by [the Redux channel](https://pre-release.mattermost.com/core/channels/redux) on our Mattermost instance.

### Running the Tests

`make test` will run the tests against a mocked server.

To run the tests against a live server, you must have a system admin user with the email `redux-admin@simulator.amazonses.com` and password `password1`. If you're using a developer copy of the Mattermost server, you can create this user by running:

```
go build ./cmd/platform
./platform user create --email "redux-admin@simulator.amazonses.com" --password "password1" --username "redux-admin" --system_admin
```

If you're using a release binary for the server, just run:
```
./bin/platform user create --email "redux-admin@simulator.amazonses.com" --password "password1" --username "redux-admin" --system_admin
```

The server needs to be available at `http://localhost:8065`. This can be overridden by setting an environment variable named `MATTERMOST_SERVER_URL`.

Finally, set "EnableOpenServer", "EnableCustomEmoji", "EnableLinkPreviews", "EnableUserAccessTokens" and "EnableOAuthServiceProvider" to `true` and "EnableOnlyAdminIntegrations" to `false` in your config.json. If you don't have a config.json yet, create it by copying default.json.

With that set up, you can run the tests against your server with `npm run test-no-mock`.