README
npm version">
uxi-business
Common business component that are 'ready' to use and follow UX best practises.
- signin ok
- forgot ok
- find client by id : ok
- save url : ok
- signup user :
- reset pwd : ok
Provider
In order to use uxi-business component library you need to se the UxiBusinessProvider component.
It comes with a default context which does 'nothing'. It is up to the consumer to configue how the list of component should behave.
Example:
import { UxiBusinessProvider } from 'uxi-business';
const MyApp = () => (
<UxiBusinessProvider log={(e) => {console.log(e)}} onSessionExpired={() => {alert('test)}}>
<Application />
</UxiBusinessProvider>
)
Here are the list of contextual props that you can override:
- log: used when you want to log something
- onSessionExpired: used when the session of the user has overidden or because a defualt handler throws a 401 in a REST API request.
- logoutUrl: the URL used to logout the user.
- loginUrl: the URL used to redirect ot a signin page.
Error Handling
Module related on how to handle errors in your application.
withDefaultErrorHandler
HOC which decorates any component and show an Error Message if the component throw a JS exception. This component has the duty to avoid having the whole page breaking due to an violation error.
You can use it this way:
import { withDefaultErrorHandler } from 'uxi-business/errorHandling';
const MyComponent = () => {
throw new Error("Oh snap");
};
export default withDefaultErrorHandler(MyComponent);
withDefaultCatch
Takes a promise and add a default catch for a fetch
method.
const fetchUser = withDefaultCatch(fetch('/users.json'));
The defaultCatch provides a default behaviors in terms of error for a fetch
request.
Used from the action withDefaultErrorHandlingActions
from User Message module, it will give you a set of default messages for common succes/error messages.
User Message
Module related to the Message you want to send to your user (success/warning/error/info).
import {
reducer as userMessage,
UserMessageProvider,
} from 'uxi-business/userMessage';
import { showSuccess, showWarning, showError, showInfo } from 'uxi-business/userMessage/actions';
const rootReducer = combineReducers({
form: formReducer,
userMessage,
});
const store = createStore(rootReducer)
const App = () => (
<Provider store={store}>
<UserMessageProvider>
<h1>Title</h1>
<button onClick={() => {dispatch(showSuccess('Good job!'))}}>Trigger some actions</button>
</UserMessageProvider>
</Provider>
);
render(<App />, document.getElementById('root'));
Redux Actions
showSuccess
Show a sucess message
showWarning
Show a warning message
showError
Show an Error message
showInfo
Show an info message
Default REST error handling
- HTTP Status : 200 => success message
- HTTP Status : 202 => warning queue message
- HTTP Status : 403 => access denied error message
- HTTP Status : 404 => entity notfound error message
- HTTP Status : 409 => conflict error message
- HTTP Status : 5xx => unknow error message
- HTTP Status : 4xx => unknow error message
How to decorate my action to receive the default User Message behavior?
- User the method
withDefaultCatch
- Decorate your thunk (redux) with
withDefaultErrorHandlingActions
Example:
import { withDefaultCatch } from 'uxi-business/errorHandling';
import { withDefaultErrorHandlingActions } from 'uxi-business/userMessage/actions';
export const shouldFetchUser = withDefaultErrorHandlingActions((dispatch) => (
withDefaultCatch(fetch('/users.json')).then((data) => {
dispatch({
type: 'RECEIVE_USER',
data,
})
}))
));