---

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.

$3

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);
`

$3

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

render(, document.getElementById('root'));
`

$3

showSuccess

Show a sucess message

showWarning

Show a warning message

showError

Show an Error message

showInfo

Show an info message

$3

- 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,
})
}))
));
``