Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uxilab/uxi-business
Set of business components built based on UXI
https://github.com/uxilab/uxi-business
Last synced: 12 days ago
JSON representation
Set of business components built based on UXI
- Host: GitHub
- URL: https://github.com/uxilab/uxi-business
- Owner: uxilab
- Created: 2018-05-03T06:32:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T03:30:31.000Z (about 2 years ago)
- Last Synced: 2024-10-08T17:58:36.187Z (3 months ago)
- Language: JavaScript
- Size: 4.4 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://badge.fury.io/js/uxi-business) [](https://circleci.com/gh/uxilab/uxi-business)
---
# 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 = () => (
{console.log(e)}} onSessionExpired={() => {alert('test)}}>
)
```
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 = () => (
Title
{dispatch(showSuccess('Good job!'))}}>Trigger some actions
);
render(, 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,
})
}))
));
```