@mqschwanda/firebase-containers

* @name databaseContainer
* @type {Function}
* @description This container listens to a database reference and injects the
* snapshot into the sub-component.
* @since 0.0.15
* @param  {firebase.database.Reference} reference database reference which we can read or listen to
* @see {@link https://firebase.google.com/docs/reference/js/firebase.database.Reference}
* @param  {Object} options options object
* @return {Function} composable function that accepts react components as params
* @returns container(Component, Loading)
*/
const container = databaseContainer(query[, options]);
// we are currying the arguments so the above container is the same as...
// const container = (Component[, Loading]) =>
//   databaseContainer(query[, options])(Component[, Loading])

```jsx
/**
 * @description database reference which we can read or listen to
 * @param  {firebase.database.Reference}
 * @see {@link https://firebase.google.com/docs/reference/js/firebase.database.Reference}
 */
const reference = firebase.database().ref('cities/SF');
```

```jsx
const options = {
  /**
   * @name mapData
   * @type {Function}
   * @description access the snapshot to map the prop injected into the sub-component
   * @since 0.0.1
   * @param {firebase.database.DataSnapshot} snapshot database snapshot
   * @see {@link https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot}
   * @return {Object} prop that is merged into sub-component's props
   * @default (snapshot) => ({ snapshot })
   */
  mapData: (snapshot) => ({ snapshot }),
  // or, lets say you want to map the data to a different name...
  // mapData: (labledSnapshot) => ({ labledSnapshot }),
  /**
   * @name once
   * @type {Boolean}
   * @description if you only want the first value and dont want reactive updates
   * @since 0.0.11
   * @default false
   */
  once: false,
};
```

```jsx
/**
 * @name Component
 * @description sub-component we are injecting the snapshot into
 * @type {[React.Component, function]}
 * @since 0.0.1
 * @param {Object} props react props
 * @returns {React.Element}
 */
const Component = (props) => (
  <div id={props.snapshot.id}>
    {JSON.stringify(props.snapshot.data())}
  </div>
);
```

```jsx
/**
 * @name Loading
 * @description component displayed while loading the query snapshot
 * @type {[React.Component, function]}
 * @since 0.0.1
 * @param {Object} props react props
 * @returns {React.Element}
 * @default (props) => <div>loading...</div>
 */
const Loading = (props) => <div>loading...</div>
```
#### Examples

- reference single document
  ```jsx
  // ./examples/databaseContainer/reference-single-document.js
  import React from 'react'; // peer dependency
  import firebase from 'firebase'; // peer dependency
  import { databaseContainer } from '@mqschwanda/firebase-containers';

  const reference = firebase.database().ref('cities/SF');
  const container = databaseContainer(reference);

  const ComponentWithData = container((props) =>
    <div id={props.snapshot.key}>
      {JSON.stringify(props.snapshot.val())}
    </div>
  );
  ```
- reference multiple documents
  ```jsx
  // ./examples/databaseContainer/reference-multiple-documents.js
  import React from 'react'; // peer dependency
  import firebase from 'firebase'; // peer dependency
  import { databaseContainer } from '@mqschwanda/firebase-containers';

  const reference = firebase.database().ref('cities');
  /**
   * Firebase refs do not return a mappable array of documents that we can easily
   * use with react. Instead we need to map the data ourselves by iterating
   * through each document.
   */
  const mapData = (snapshot) => {
    const docs = [];
    snapshot.forEach(docs.push);
    // inject docs array alongside the original snapshot
    return { docs, snapshot };
  }
  const container = databaseContainer(reference, { mapData });

  const ComponentWithData = container((props) => props.docs.map(doc =>
    doc.exists &&
    <div key={doc.key}>
      {JSON.stringify(doc.val())}
    </div>
  );
  ```
- reference composition
  ```jsx
  // ./examples/databaseContainer/reference-composition.js
  import React from 'react'; // peer dependency
  import firebase from 'firebase'; // peer dependency
  import { databaseContainer, compose } from '@mqschwanda/firebase-containers';

  const db = firebase.database();
  const SF = db.ref('cities/SF');
  const LA = db.ref('cities/LA');

  // use compose to apply multiple higher order components
  const container = compose(
    databaseContainer(SF, { mapData: (sfSnapshot) => ({ sfSnapshot }) }),
    databaseContainer(LA, { mapData: (laSnapshot) => ({ laSnapshot }) }),
  );

  const ComponentWithData = container((props) =>
    <div>
      <div className='san-francisco'>
        {JSON.stringify(props.sfSnapshot.val())}
      </div>
      <div className='los-angeles'>
        {JSON.stringify(props.laSnapshot.val())}
      </div>
    </div>
  );

  ```

userContainer