@drieam/common/docs/apiWrapper.md

Default Drieam api wrapper

---
menu: '@drieam/common'
name: withApiWrapper
route: /common/wrapper
---

## `withApiWrapper(...) => React.Component`

High order Component who renders a loading or an error page depending of an single entity or a collection. The entities can be `ListState` or `EntityState`. 

#### Arguments

1. `fetch` (`() => void`): Execute a group of actions to fetch the related state.
1. `state` (`ReduxState[] | ReduxState`): Representation one or many entity state.
1. `nextPage` (`() => void`): Handler for Infinite Scroll in case of ListState.
1. `showNoneFoundMessage` (`boolean`): Shows an Empty State in case of ListState.
1. `modelName` (`string`): Shows a message in case of ListState empty.

#### Example

```jsx
import { connect } from 'react-redux';

const MyComponent = (props) => 
  <button onClick={() => props.delete({ id: 1 })} />

export default compose(
  connect(
    (state: MainAppState): StateProps => ({
      user: state.api.eduframeUser.entity.value,
      state: [state.api.eduframeUser.entity],
    }),
    (dispatch: Dispatch): StateProps => {
      const getUser = actions.api.eduframeUser.fetchEntity;
      return {
        fetch: () => {
          dispatch(getUser('current', { proxy_include: ['launches'] }));
        },
      };
    },
  ),
  withApiWrapper(),
)(MyComponent),
```