# vuex-helpers

## Overview

`vuex-helpers` is a client-side Javascript library for ShelfNetwork distributed auction platform.
Contains ready-for-use \***\*entity\*\*** `Vuex` modules and some helpful utils.

Entity modules:

- User
- Lot
- Lots
- I18n
- Notifications
- TbcPayments

## Requirements

- [node](~nodejs.org~) (version 10+)

## Local development

Install dependencies:

```bash
npm install
```

Run a local dev server:

```bash
npm run serve
```

`vuex-helpers` can be connected to `platform-web-app` using `npm link`.

1. Link `vuex-helpers`: run `npm link`
2. In `platform-web-app` repo run `npm link @shelf.network/vuex-helpers`

## Troubleshooting

1. If run `npm install` or `npm update` while dev server is running it’ important to delete
   `.cache` dir in `node_modules`

## Connecting entity modules to another module

This approach should be used when you want some shared functionality from entity module to be present in another vuex module.

The idea is to connect submodules in place where you need them to have a context.

If you would like to interact with a lot retrieval functionality you can add `Lots` submodule to the store where you want the interaction to happen.

Your resulting module tree will look like this:
`%somePreceedingPath%/yourUiModule/lots`

This way you can connect as many independent submodules as you need.

### Usage example

For example you have a separate page in your app, e.g. LotPage and you have a corresponding vuex module for it.

Consider the following page store structure

[image:6E90E6FE-CE56-4D40-B375-2FFED3749FB3-29927-0001135F77F2B922/Screen Shot 2019-06-07 at 3.54.59 PM.png]

1. Connecting the Lot submodule

To use `Lot` submodule here to fetch data about the item you should add this submodule to your module first.

It should be added to the `index.js` file like this:

```js
import {
  generateLotModule,
  generateLotsModule,
  withSubModules
} from "@shelf.network/vuex-helpers";

import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";

const insideModule = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

const moduleCreator = withSubModules({
  lot: generateLotModule,
  similarLots: generateLotsModule
})(insideModule);

export default moduleCreator;
```

You can spot `lot: generateLotModule` which will lead to `inside/lot` module being registered in vuex.

The key of this object sets the name of submodule in vuex.

2. Registering the ui module of a page

We created a `moduleCreator` function which will adds submodules to the module passed `insideModule`

In order to create the UI module itself you need to call the `moduleCreator` with the following parameters:
`moduleCreator({Vue, sdk})`

`Vue` - Vue instance of the app
`sdk` - [SDK](https://gitlab.com/eAuction/js-sdk) instance which is used in the app

`moduleCreator` returns an object which is a usual vuex module

```js
{
	namespaced: true,
	state: ...,
	actions: ...,
	getters: ...,
	mutations: ...
}
```

3. Interacting with entity submodule

You can interact with connected module in usual vuex way through `dispatch` and `getters`

Just remember that you are working with nested module, which implies changing the path of the `action` or `getter`

A helper function is available in this package - `createSubModuleAliaser`

You should pass a name that you used in step 1 to create a correct module path

It returns a function which accepts action or getter name and appends it to the submodule path

```js
const lotSubmodule = createSubModuleAliaser('lot')`
lotSubmodule('GET_LOT') // returns 'lot/GET_LOT'
```

```js
// Mapping of submodule in step 1 (index.js)
const moduleCreator = withSubModules({
  lot: generateLotModule,
  similarLots: generateLotsModule
})(insideModule)

// Creating an aliaser for submodule in actions.js
import {
  LotTypes,
  createSubModuleAliaser
} from '@shelf.network/vuex-helpers'

const lotSubmodule = createSubModuleAliaser('lot')

// Dispatching action to lot submodule
// Usual dispatch(actionName, payload)
await dispatch(
  lotSubmodule(LotTypes.actions.TOGGLE_WATCHLIST), {
    lotId: lotId || getters.data.id
	})
)

// Getting data from submodule via getters
// Usual getter, just from nested module
const { details } = getters[lotSubmodule(LotTypes.getters.lot)]
```