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

To help you get started, we’ve selected a few react-redux-firebase examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github prescottprue / fireadmin / src / routes / Projects / components / SharingDialog / SharingDialog.enhancer.js View on Github external
import {
  withHandlers,
  withStateHandlers,
  withProps,
  setPropTypes
} from 'recompose'
import { withNotifications } from 'modules/notification'
import * as handlers from './SharingDialog.handlers'

export default compose(
  // Add props.firestore
  withFirestore,
  // Add props.showSuccess and props.showError
  withNotifications,
  // Attach/Detach RTDB listeners on mount/unmount
  firebaseConnect(['displayNames']),
  // Set proptypes used in HOCs
  setPropTypes({
    firestore: PropTypes.shape({
      doc: PropTypes.func.isRequired // used in handlers
    }).isRequired,
    showSuccess: PropTypes.func.isRequired, // used in handlers
    showError: PropTypes.func.isRequired // used in handlers
  }),
  connect(({ firebase: { data: { displayNames } } }) => ({
    displayNames
  })),
  // State handlers as props
  withStateHandlers(
    ({ initialDialogOpen = false }) => ({
      sharingDialogOpen: initialDialogOpen,
      selectedCollaborators: [],
github prescottprue / react-redux-firebase / examples / complete / material / src / routes / Projects / components / ProjectsPage / ProjectsPage.enhancer.js View on Github external
import { spinnerWhileLoading } from 'utils/components'
import { UserIsAuthenticated } from 'utils/router'
import { LIST_PATH } from 'constants/paths'
import styles from './ProjectsPage.styles'

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
  firebaseConnect(({ uid }) => [
    {
      path: 'projects',
      queryParams: ['orderByChild=createdBy', `equalTo=${uid}`]
    }
  ]),
  // Map projects from state to props
  connect(({ firebase: { ordered } }) => ({
    projects: ordered.projects
  })),
  // Show loading spinner while projects and collabProjects are loading
  spinnerWhileLoading(['projects']),
  // Add props.router
  withRouter,
  // Add props.showError and props.showSuccess
  withNotifications,
  // Add state and state handlers as props
github prescottprue / fireadmin / src / routes / Projects / routes / Project / routes / Permissions / components / PermissionsTable / PermissionsTable.enhancer.js View on Github external
import { withNotifications } from 'modules/notification'
import { withStyles } from '@material-ui/core/styles'
import { spinnerWhileLoading, renderWhileEmpty } from 'utils/components'
import {
  getPopulatedProjectPermissions,
  getDisplayNames,
  getProject
} from 'selectors'
import * as handlers from './PermissionsTable.handlers'
import NoPermissionsFound from './NoPermissionsFound'
import styles from './PermissionsTable.styles'

export default compose(
  setDisplayName('EnhancedPermissionsTable'),
  withNotifications,
  firebaseConnect(['displayNames']),
  withFirestore,
  // Map redux state to props
  connect((state, props) => ({
    // map permissions object into an object with displayName
    permissions: getPopulatedProjectPermissions(state, props),
    displayNames: getDisplayNames(state, props),
    project: getProject(state, props)
  })),
  // Show loading spinner until project and displayNames load
  spinnerWhileLoading(['project', 'displayNames']),
  withStateHandlers(
    () => ({
      anchorEl: null,
      deleteDialogOpen: false
    }),
    {
github prescottprue / fireadmin / src / components / VersionChangeReloader / VersionChangeReloader.enhancer.js View on Github external
import { get } from 'lodash'
import { compose } from 'redux'
import firebaseConnect from 'react-redux-firebase/lib/firebaseConnect'
import {
  withHandlers,
  pure,
  lifecycle,
  renderNothing,
  setDisplayName
} from 'recompose'
import { connect } from 'react-redux'

export default compose(
  setDisplayName('VersionChangeReloader'),
  firebaseConnect(['versionInfo']),
  connect(({ firebase: { data: { versionInfo } } }) => ({ versionInfo })),
  withHandlers({
    setVersionToStorage: props => refreshVersion => {
      window.sessionStorage.setItem('fireadminVersion', refreshVersion)
    },
    // Call page reload page and set refreshed version to session storage
    refreshPage: props => refreshVersion => {
      window.location.reload(true)
    }
  }),
  lifecycle({
    // props change is use to set version on state change
    componentWillReceiveProps(np) {
      const currentRemoteVersion = get(np, 'versionInfo.current')
      const currentClientVersion = window.version
      const sessionVersion = window.sessionStorage.getItem('fireadminVersion')
github prescottprue / react-redux-firebase / examples / complete / material / src / routes / Projects / routes / Project / components / ProjectPage / ProjectPage.enhancer.js View on Github external
withRouter,
  // Set proptypes of props used in HOCs
  setPropTypes({
    // From react-router
    match: PropTypes.shape({
      params: PropTypes.shape({
        projectId: PropTypes.string.isRequired
      }).isRequired
    }).isRequired
  }),
  // Map projectId from route params (projects/:projectId) into props.projectId
  withProps(({ match: { params: { projectId } } }) => ({
    projectId
  })),
  // Create listener for projects data within Firebase
  firebaseConnect(({ projectId }) => [{ path: `projects/${projectId}` }]),
  // Map projects data from redux state to props
  connect(({ firebase: { data } }, { projectId }) => ({
    project: get(data, `projects.${projectId}`)
  })),
  // Show loading spinner while project is loading
  spinnerWhileLoading(['project']),
  // Add styles as props.classes
  withStyles(styles)
)
github prescottprue / fireadmin / src / routes / Projects / routes / Project / routes / ProjectEvents / components / ProjectEventsPage / ProjectEventsPage.enhancer.js View on Github external
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']),