octopoda v0.1.2

Octopoda (DEPRECATED - DO NOT USE)

Event driven helper allowing events to be dispatched in an organized way for React applications.

$ npm install octopoda

OR

$ yarn add octopoda

Create Tentacle

Create a Tentacle or event stack that your Octopods can trigger on change of status. Within your pod (shown below) you can trigger status changes allowing for the event listeners to be triggered. Click "show code" below to see how this is initialized.

const fetchEvents = new Tentacle();

fetchEvents
  .on(Status.PROGRESS, () => console.log('FETCH STARTED'))
  .on(Status.SUCCESS, () => console.log('FETCH SUCCESSFUL'))
  .on(Status.COMPLETE, (json) => console.info('FETCH COMPLETED:', json));

Create Handler

Create a Handler to trigger the above Tentacle event stacks.

const handler = (pod: Octopod) => (url: string, cb?: (data) => void) => {

  pod.status(Status.PROGRESS);

  fetch(url)
    .then(res => {

      if (!res.ok)
        return pod.status(Status.ERROR, res);

      return res.json();

    })

    .then(json => {

      pod.status(Status.SUCCESS);
      pod.status(Status.COMPLETE, json);

      cb(json);

    });

};

Octopoda instance

Create an Octopoda instance passing in any Tentacle instances (multiple supported) and a Handler function that will be used for dispatching.

const fetcher = new Octopod(fetchEvents, handler);

Export

Finally, export out your Octopoda store exposing your provider and your useOcto hook.

const { Provider, useOcto } = initOcto({

  tentacles: {
    fetchEvents
  },

  octopods: {
    fetcher
  }

});

export {
  Provider,
  useOcto,
};

Full code example

import initOcto, { Tentacle, Octopod, Status } from '../';

const fetchEvents = new Tentacle('fetch');

fetchEvents
  .on(Status.PROGRESS, () => console.log('FETCH STARTED'))
  .on(Status.SUCCESS, () => console.log('FETCH SUCCESSFUL'))
  .on(Status.COMPLETE, (json) => console.info('FETCH COMPLETED:', json));

const handler = pod => (url: string, cb?: (data) => void) => {

  pod.status(Status.PROGRESS);

  fetch(url)
    .then(res => {

      if (!res.ok)
        return pod.status(Status.ERROR, res);

      return res.json();

    })

    .then(json => {

      pod.status(Status.SUCCESS);
      pod.status(Status.COMPLETE, json);

      cb(json);

    });

};

const fetcher = new Octopod('fetcher', fetchEvents, handler);

const { Provider, useOcto } = initOcto({
  tentacles: {
    fetchEvents
  },
  octopods: {
    fetcher
  }
});

export {
  Provider,
  useOcto
};

useOcto Hook

Create a Hook to use the Octopod you created in your initialization. Simply call "useOcto" and then pass in the name of the pod that you have defined. Finally in a useEffect or some sort of event dispatch the action/handler.

const octo = useOcto('fetcher');

const fetchUser = () => {
  octo.dispatch(https://randomuser.me/api/, (data) => {
    dispatch({ ...store, data })
  });
};