@bizico/react-promise

wrap your component to work with side effects easier

Install

npm install --save @bizico/react-promise

Demo

Usage React hooks

// Change global config for useQuery
useQuery.updateConfig(config)

// Get global config
useQuery.config

useQuery(promise, config) -> [state, action]

possible configuration

• skip: true/false, default false - if you want to skip firs query
• variables: any, default null - if you want to call refetch when som data is changed
• defaultData: any, default null - data for initial state

useManipulate(promise) -> [state, action]

// Check if there are loading in some states
useLoadingForStates(state1, state2, ...) -> true/false

state

• loading: true/false, default false
• data: any, default == defaultData from configuration
• error: error, default null

action - special function to call your promise with first argument variables (if you use useQuery) and update the state

Example

import React, { useState, useCallback } from 'react';
import { List, Input, Button } from 'antd';
import { useQuery, useManipulate, useLoadingForStates } from 'bizico-react-promise';

const ListData = {
  data: [
    { id: 1, label: 'Item 1' },
    { id: 2, label: 'Item 2' },
    { id: 3, label: 'Item 3' },
  ],
  load: function() {
    return Promise.resolve([...this.data]);
  },
  add: function (label) {
    const id = Math.floor((Math.random() * 1000) + 1)
    this.data.push({ label, id });
    return Promise.resolve(id);
  },
  remove: function (id) {
    this.data = this.data.filter((item) => item.id !== id);
    return Promise.resolve(id);
  },
};

const ListExample = () => {
  const [state, refetch] = useQuery(
    () => ListData.load(),
    { defaultData: [] },
  );
  const [addState, add] = useManipulate(
    (d) => ListData.add(d),
  );
  const [removeState, remove] = useManipulate(
    (id) => ListData.remove(id),
  );
  const loading = useLoadingForStates(state, addState, removeState);

  const [value, setValue] = useState('');
  
  const handleChange = useCallback((e) => {
    setValue(e.target.value);
  }, [setValue]);

  const handleAdd = useCallback((label) => {
    if (label) {
      add(label)
        .then(() => refetch())
        .then(() => setValue(''));
    }
  }, [add, refetch, setValue]);

  const handleRemove = useCallback((id) => {
    remove(id).then(() => refetch());
  }, [remove, refetch]);

  return (
    <React.Fragment>
      <List loading={loading}>
        {state.data.map((item) => (
          <List.Item
            key={item.id}
            actions={[
              <a href="/" onClick={(e) => { e.preventDefault(); handleRemove(item.id); }}>delete</a>,
            ]}
          >
            {item.label}
          </List.Item>
        ))}
      </List>
      {!loading && (
        <React.Fragment>
          <br />
          <Input
            value={value}
            onChange={handleChange}
            placeholder="new item label"
          />
          <Button onClick={() => handleAdd(value)}>Add</Button>
          <Button onClick={refetch}>Refetch</Button>
        </React.Fragment>
      )}
    </React.Fragment>
  )
};

Usage Query (query hoc)

import React from 'react';
import { Query } from '@bizico/react-promise';
import Button from '../components/Button';
import Loader from '../components/Loader';
import Error from '../components/Error';

const promise = () => new Promise((resolve) => {
  setTimeout(() => resolve('Loaded Data'), 2000);
});

const Example = () => (
  <Query
    name="data"
    defaultData="Loading ..."
    promise={promise}
    loading={(props) => <Loader {...props} />}
    error={(props) => <Error {...props} />}
  >
    {({ data: { data, refetch } }) => (
      <div>
        <div>{data}</div>
        <Button onClick={refetch}>Refresh</Button>
      </div>
    )}
  </Query>
)

import React from 'react';
import { query, PromisePropTypes } from '@bizico/react-promise';
import Button from '../components/Button';
import Loader from '../components/Loader';
import Error from '../components/Error';

const promise = () => new Promise((resolve) => {
  setTimeout(() => resolve('Loaded Data'), 2000);
});

const Example = ({ data: { data, refetch } }) => (
  <div>
    <div>{data}</div>
    <Button onClick={refetch}>Refresh</Button>
  </div>
)

Example.propTypes = {
  data: PromisePropTypes.isRequired,
};

const Component = query({
  name: 'data',
  defaultData: 'Loading ...',
  promise,
  loading: (props) => <Loader {...props} />,
  error: (props) => <Error {...props} />,
})(Example);

Props

Name	Description	Type	Default
promise	Get promise to load data	({...props, ...variables}, ...args): Promise	-
skip	If true then promise will not be called immediately	(props): Boolean	props => false
complete	Map data if Promise is fulfilled	(data): any	data => data
loading	Loader component when Promise is pending	({...props, ...variables}): Component	null
error	Error component when Promise is rejected	({...props, ...variables}): Component	null
variables	Refetch promise if variables are changed (shallow compare)	(props): Object or Object	null
name	Prop Name	String	data
defaultData	Default data if promise is not loaded	(props): any or any	null

PromisePropTypes

Name	Description	Type
refetch	Refetch promise with extra args	(props, ...args): Promise
data	Response data	any
loading	Promise state	Boolean
error	if promise is rejected	Error

Usage Manipulation (manipulation hoc)

import React from 'react';
import { Manipulation } from '@bizico/react-promise';
import Button from '../components/Button';
import Loader from '../components/Loader';
import Error from '../components/Error';

const promises = {
  updateFirst: (props, ...args) => (
    new Promise((resolve) => {
      setTimeout(() => resolve('Loaded: First Data'), 1000);
    })
  ),
  updateSecond: (props, ...args) => (
    new Promise((resolve) => {
      setTimeout(() => resolve('Loaded: Second Data'), 1000);
    })
  ),
};

const Example = () => (
  <Manipulation
    name="manipulation"
    promises={promises}
    loading={(props) => <Loader {...props} />}
    error={(props) => <Error {...props} />},
  >
    {({ manipulation: { updateFirst, updateSecond } }) => (
      <div>
        {updateFirst.data && <div>{updateFirst.data}</div>}
        {updateSecond.data && <div>{updateSecond.data}</div>}
        <Button onClick={() => updateFirst.manipulate('First action')}>Update First</Button>
        <Button onClick={() => updateSecond.manipulate('Second action')}>Update Second</Button>
      </div>
    )}
  </Manipulation>
);

import React from 'react';
import { manipulation, manipulationPropTypes } from '@bizico/react-promise';
import Button from '../components/Button';
import Loader from '../components/Loader';
import Error from '../components/Error';

const promises = {
  updateFirst: () => (
    new Promise((resolve) => {
      setTimeout(() => resolve('Loaded: First Data'), 1000);
    })
  ),
  updateSecond: () => (
    new Promise((resolve) => {
      setTimeout(() => resolve('Loaded: Second Data'), 1000);
    })
  ),
};

const Example = ({ manipulation: { updateFirst, updateSecond } }) => (
  <div>
    {updateFirst.data && <div>{updateFirst.data}</div>}
    {updateSecond.data && <div>{updateSecond.data}</div>}
    <Button onClick={() => updateFirst.manipulate('First action')}>Update First</Button>
    <Button onClick={() => updateSecond.manipulate('Second action')}>Update Second</Button>
  </div>
);

Example.propTypes = {
  manipulation: manipulationPropTypes('updateFirst', 'updateSecond').isRequired,
};

const Wrapper = manipulation({
  name: 'manipulation',
  promises,
  loading: (props) => <Loader {...props} />,
  error:(props) => <Error {...props} />,
})(Example);

Props

Name	Description	Type	Default
promises	Get promises to load/manipulate data	(props, ...args): Object	-
loading	Loader component when Promise is pending	(props): Component	null
error	Error component when Promise is rejected	(props): Component	null
name	Prop Name	String	manipulation

manipulationPropTypes(...)

Name	Description	Type
loading	Promise state	Boolean
error	if promise is rejected	Error

License

MIT © Bizico