atomic-canvas
v3.0.1
Published
Client side canvas api for Atomic Jolt
Downloads
374
Keywords
Readme
Atomic Canvas
This package contains all of the front-end canvas api code for Atomic Jolt apps. It includes all front-end code that was previously in the client/libs/canvas
directory.
Installation
You should install atomic canvas into each individual app not in the client directory. Just add as a regular dependency.
yarn add atomic-canvas
Usage
All of the code is found in the libs folder which has the following structure
libs/
-- constants/
-- action.js
-- helper_contants.js
-- middleware.js
-- reducer.js
-- urls.js
If you wanted to use, for example, libs/canvas/constants/accounts.js
you would write the following:
import { connect } from 'react-redux';
import {constantName} from 'atomic-canvas/libs/constants/my_constant_file.js';
import canvasRequest from 'atomic-canvas/libs/action';
class MyComponent extends React.Component {
...
// Dispatch a request action
this.props.canvasRequest(constantName, params, body);
};
connect({}, {canvasRequest})(MyComponent);
Inspection Script
Because you will often need to inspect the canvas constants you are using to determing what the type and required params are, an inspection script has been provided
Script Useage
We recommend adding a script to your package.json that looks like this.
{
"scripts": {
"ac": "atomic-canvas",
}
}
Then you can run yarn ac -- [options]
. You can also just reference the script in your package.json:
{
"scripts": {
"ac": "node ./node_modules/atomic-canvas/inspect.js",
}
}
The script accepts 0, 1, or 2 arguments. If no arguments are provided it will print out a list of all of the modules that contain the canvas constants, eg the names of the files in the libs/constants
folder.
The first optional argument is the name of a file (without the extension) you want to inspect, for example you could run yarn ac -- accounts
and it would print out the contents of that file.
The second optional argument is the name of the constant you want to inspect, for example: yarn ac -- accounts listAccounts
. This will print out the information about that constant and give a code snippit to import it:
{
type: 'LIST_ACCOUNTS',
method: 'get',
key: 'list_accounts',
required: []
}
import { listAccounts } from 'atomic-canvas/libs/constants/accounts';