README
Bento
🍱🍚🍣🍤🍡🍥🍛🍢🍙🍘 alwayss be hangry...
Usage
Box
Javascript utility belt
import box from 'bentoo/box';
dig
box.dig({ a: { b: { c: '🍖' } } }, 'a', 'b', 'c');
=> 🍖
box.dig({ a: { b: { d: '🍖' } } }, 'a', 'b', 'c');
=> null
except
box.except({ corn: '🌽', pizza: '🍅', bagel: '🥑' }, ['corn', 'bagel']);
=> { pizza: '🍅' }
intersection
box.intersection(['🍖', '🍅', '🍥', '🥑'], ['🍥', '🌽', '🥑', '🍘']);
=> ['🍥', '🥑']
pad
box.pad('5', 3, '*');
=> '**5'
slice
box.slice({ corn: '🌽', pizza: '🍅', bagel: '🥑' }, ['corn', 'bagel']);
=> { corn: '🌽', bagel: '🥑' }
HOCs
Custom React higher order components.
import {
createContainer,
createAutoloadingContainer,
mergeActions
} from "bentoo/hocs";
createContainer
createContainer
is a HOC used for calling promise actions that we don't
require to update Redux. createContainer
uses its own reducer, and passes back
it's own specific state associated with the API call.
In the following example, a container is created around the editPassword
promiseAction. When the user calls the submit
function, the callApi
function
created by createContainer will run the promiseAction.
CreateContainer will inject the following props to your component:
data
: the data that is returned.isLoading
: a boolean used to determine whether the API call is still loading.error
: the error returned by the backend.errorType
: a string of one of the following:['client_timeout', 'unauthorized', 'illegal', 'expired', 'network_error', 'not_found', 'invalid']
validationErrors
: an object that returns validations on a set of fields. For example, if your password is invalid, validationErrors would return back an object like this:validationError: { password: "This password is invalid", passwordConfirmation: "This doesn't match the password" }
Example
export default compose(
createContainer(editPassword),
mergeActions(({ actions, token, email }) => ({
submit: async model => {
await actions.callApi({ ...model, resetPasswordToken: token, email });
window.location = "/contractors/dashboard";
}
}))
)(ChangePassword);
createAutoloadingContainer
createAutoloadingContainer
is a variation on createContainer
, except that
the promise action is called when the component mounts.
export default compose(
createAutoloadingContainer(contractorAutologin, ({ email, token }) => [
email,
token
]),
withRouter
)(Autologin);
mergeActions
mergeActions
is a HOC that merges a collection of actions into a new actions
object.
actions = {
signup: () => {}
}
compose(
mergeActions(({ actions }) => ({
submit: async () => {
await actions.signup();
},
}))
);
=> {
actions: {
signup: () => {},
submit: async () => {
await actions.signup();
}
}
}
Hooks
useContainer
The useContainer
hook is a copy of the createContainer
HOC. The only
difference is that there will no longer be an 'actionName' parameter.
const result = useContainer(promiseAction);
// Call the API
result.callApi();
// The result has the following attributes:
const result = { isLoading: false,
error: AuthorizationError { message: 'bar', type: 'unauthorized' },
errorType: 'unauthorized',
validationErrors: {},
isSuccessful: false,
callApi: [Function: callApi] }
Contributing
Bento currently supports Node version 10.15.3. Make sure when setting up:
nvm install 10
yarn install
Release
yarn release
select next version.
Test
yarn test