How to use the react-redux-firebase/lib/firestoreConnect function in react-redux-firebase

import { compose } from 'redux'
import { connect } from 'react-redux'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import firebaseConnect from 'react-redux-firebase/lib/firebaseConnect'
import { withStyles } from '@material-ui/core/styles'
import { spinnerWhileLoading } from 'utils/components'
import { getProjectEventsGroupedByDate } from 'selectors/projectSelectors'
import styles from './ProjectEventsPage.styles'

export default compose(
  // Attach RTDB listeners
  firebaseConnect(['displayNames']),
  // Attach Firestore listeners
  firestoreConnect(({ projectId }) => [
    {
      collection: 'projects',
      doc: projectId,
      subcollections: [{ collection: 'events' }],
      orderBy: ['createdAt', 'desc'],
      storeAs: `projectEvents-${projectId}`,
      limit: 100
    }
  ]),
  connect((state, props) => ({
    projectEvents: getProjectEventsGroupedByDate(state, props)
  })),
  // Show spinner while project events are loading
  spinnerWhileLoading(['projectEvents']),
  // Add styles as props.classes
  withStyles(styles)

import { compose } from 'redux'
import { connect } from 'react-redux'
import firebase from 'firebase/app'
import { PROJECTS_COLLECTION } from '@fireadmin/core/lib/constants/firestorePaths'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import { withStyles } from '@material-ui/core/styles'
import { withHandlers, withStateHandlers } from 'recompose'
import { setStringToClipboard } from 'utils/browser'
import styles from './TokensPage.styles'

export default compose(
  // Map auth uid from state to props
  connect(({ firebase: { auth: { uid } } }) => ({ uid })),
  // create listener for tokens, results go into redux
  firestoreConnect(({ params: { projectId }, uid }) => {
    return [
      {
        collection: PROJECTS_COLLECTION,
        doc: projectId,
        subcollections: [{ collection: 'tokens' }],
        where: ['createdBy', '==', uid],
        storeAs: `${projectId}-tokens`
      }
    ]
  }),
  // map redux state to props
  connect(({ firestore: { data } }, { params: { projectId } }) => ({
    tokens: data[`${projectId}-tokens`]
  })),
  withStateHandlers(
    {

export default compose(
  withNotifications,
  withRouter,
  setPropTypes({
    match: PropTypes.shape({
      params: PropTypes.shape({
        templateId: PropTypes.string.isRequired
      }).isRequired
    }).isRequired
  }),
  withProps(({ match: { params: { templateId } } }) => ({
    templateId
  })),
  // Set listeners for Firestore
  firestoreConnect(({ templateId }) => [
    {
      collection: ACTION_TEMPLATES_PATH,
      doc: templateId
    }
  ]),
  // map redux state to props
  connect(({ firestore: { data: { actionTemplates } } }, { templateId }) => ({
    template: get(actionTemplates, templateId)
  })),
  // Show spinner while template is loading
  spinnerWhileLoading(['template']),
  // Render Error page if there is an error loading the action template
  renderIfError(
    (state, { templateId }) => [`${ACTION_TEMPLATES_PATH}.${templateId}`],
    TemplateLoadingError
  ),

import { ACTION_TEMPLATES_PATH } from 'constants/firebasePaths'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import { withRouter } from 'react-router-dom'
import { spinnerWhileLoading } from 'utils/components'
import { withNotifications } from 'modules/notification'
import * as handlers from './ActionTemplatesList.handlers'

export default compose(
  withNotifications,
  withRouter,
  // Map auth uid from state to props
  connect(({ firebase: { auth: { uid } } }) => ({ uid })),
  // Show spinner while uid is loading
  spinnerWhileLoading(['uid']),
  // Set listeners for Firestore
  firestoreConnect(({ uid }) => [
    {
      collection: ACTION_TEMPLATES_PATH,
      where: ['public', '==', true],
      limit: 30
    },
    // Listener for projects current user collaborates on
    {
      collection: ACTION_TEMPLATES_PATH,
      where: [['createdBy', '==', uid], ['public', '==', false]],
      storeAs: 'myTemplates'
    }
  ]),
  // map redux state to props
  connect(({ firestore: { ordered: { actionTemplates, myTemplates } } }) => ({
    actionTemplates,
    myTemplates

import { compose } from 'redux'
import { connect } from 'react-redux'
import { withHandlers, renderNothing, branch } from 'recompose'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import { withRouter } from 'utils/components'

export default compose(
  // Map auth uid from state to props
  connect(({ firebase: { auth: { uid } } }) => ({ uid })),
  // Wait for uid to exist before going further
  branch(({ uid }) => !uid, renderNothing),
  // Create listeners based on current users UID
  firestoreConnect(({ params, uid }) => [
    // Listener for projects the current user created
    {
      collection: 'projects',
      where: ['createdBy', '==', uid]
    },
    // Listener for projects current user collaborates on
    {
      collection: 'projects',
      where: [`collaborators.${uid}`, '==', true],
      storeAs: 'collabProjects'
    }
  ]),
  // Map projects from state to props (populating them in the process)
  connect(({ firestore: { ordered: { projects, collabProjects } } }) => ({
    projects,
    collabProjects

USER_API_KEYS_SUBCOLLECTION
} from '@fireadmin/core/lib/constants/firestorePaths'
import User from '@fireadmin/core/lib/User'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import { withStyles } from '@material-ui/core/styles'
import { withHandlers } from 'recompose'
import styles from './ApiKeysSection.styles'
import { withNotifications } from 'modules/notification'
import { spinnerWhileLoading } from 'utils/components'

export default compose(
  withNotifications,
  // Map auth uid from state to props
  connect(({ firebase: { auth: { uid } } }) => ({ uid })),
  // create listener for tokens, results go into redux
  firestoreConnect(({ uid }) => {
    return [
      {
        collection: USERS_COLLECTION,
        doc: uid,
        subcollections: [{ collection: USER_API_KEYS_SUBCOLLECTION }],
        orderBy: ['createdAt'],
        storeAs: `${uid}-apikeys`
      }
    ]
  }),
  // map redux state to props
  connect(({ firestore: { ordered } }, { uid }) => ({
    tokens: ordered[`${uid}-apikeys`]
  })),
  spinnerWhileLoading(['tokens']),
  withHandlers({

import { spinnerWhileLoading } from 'utils/components'
import { UserIsAuthenticated } from 'utils/router'
import { getAllCurrentUsersProjects } from 'selectors'
import * as handlers from './ProjectsPage.handlers'

export default compose(
  // Set component display name (more clear in dev/error tools)
  setDisplayName('EnhancedProjectsPage'),
  // redirect to /login if user is not logged in
  UserIsAuthenticated,
  // Map auth uid from state to props
  connect(({ firebase: { auth: { uid } } }) => ({ uid })),
  // Wait for uid to exist before going further
  spinnerWhileLoading(['uid']),
  // Create listeners based on current users UID
  firestoreConnect(({ uid }) => [
    // Listener for projects the current user created
    {
      collection: 'projects',
      where: ['createdBy', '==', uid]
    },
    // Listener for projects current user collaborates on
    {
      collection: 'projects',
      where: [`collaborators.${uid}`, '==', true],
      storeAs: 'collabProjects'
    }
  ]),
  // Map projects from state to props
  connect((state, props) => ({
    projects: getAllCurrentUsersProjects(state, props)
  })),

import { compose } from 'redux'
import { connect } from 'react-redux'
import { renderNothing, branch, withHandlers } from 'recompose'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import { spinnerWhileLoading, renderWhileEmpty } from 'utils/components'
import NoTemplatesFound from './NoTemplatesFound'

export default compose(
  // Map auth uid from state to props
  connect(({ firebase: { auth: { uid } } }) => ({ uid })),
  // Wait for uid to exist before going further
  branch(({ uid }) => !uid, renderNothing),
  // create listener for privateactiontemplates, results go into redux
  firestoreConnect(({ uid }) => [
    {
      collection: 'actionTemplates',
      where: [['createdBy', '==', uid], ['public', '==', false]],
      storeAs: 'privateTemplates'
    }
  ]),
  // map redux state to props
  connect(({ firestore: { ordered: { privateTemplates } } }) => ({
    templates: privateTemplates
  })),
  // Show spinner while template is loading
  spinnerWhileLoading(['templates']),
  renderWhileEmpty(['templates'], NoTemplatesFound),
  withHandlers({
    itemClickHandler: props => item =>
      function onItemClick(e) {

import ProjectNotFoundPage from './ProjectNotFoundPage'
import ProjectErrorPage from './ProjectErrorPage'
import { withNotifications } from 'modules/notification'

export default compose(
  // Map auth uid from state to props
  connect(({ firebase: { auth } }, { match: { params } }) => {
    return {
      projectId: params.projectId,
      uid: auth.uid,
      auth
    }
  }),
  // Wait for uid to exist before going further
  spinnerWhileLoading(['uid']),
  firestoreConnect(({ projectId }) => {
    return [
      // Project
      {
        collection: 'projects',
        doc: projectId
      },
      // Project environments
      {
        collection: 'projects',
        doc: projectId,
        subcollections: [{ collection: 'environments' }],
        orderBy: ['createdAt', 'desc'],
        storeAs: `environments-${projectId}`
      },
      // Service Account Uploads
      {

import { compose, withProps, setPropTypes } from 'recompose'
import firestoreConnect from 'react-redux-firebase/lib/firestoreConnect'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles'
import { spinnerWhileLoading, renderWhileEmpty } from 'utils/components'
import NoRecentActions from './NoRecentActions'
import { databaseURLToProjectName } from 'utils'
import styles from './RecentActions.styles'

export default compose(
  // Set proptypes of props used in HOCs
  setPropTypes({
    projectId: PropTypes.string.isRequired
  }),
  // Map redux state to props
  firestoreConnect(({ projectId }) => [
    // Recent actions
    {
      collection: 'projects',
      doc: projectId,
      subcollections: [{ collection: 'events' }],
      where: ['eventType', '==', 'requestActionRun'],
      orderBy: ['createdAt', 'desc'],
      limit: 3,
      storeAs: `recentActions-${projectId}`
    }
  ]),
  // Map redux state to props
  connect(({ firebase, firestore }, { projectId }) => ({
    displayNames: get(firebase, 'data.displayNames'),
    recentActions: get(firestore, `ordered.recentActions-${projectId}`),
    environments: get(firestore, `data.environments-${projectId}`)