How to use the react-redux-firebase.firebase 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 Venryx / DebateMap / src / routes / Login / containers / LoginContainer.js View on Github external
import Paper from 'material-ui/Paper'
import CircularProgress from 'material-ui/CircularProgress'
import Snackbar from 'material-ui/Snackbar'
import LoginForm from '../components/LoginForm/LoginForm'
import { LIST_PATH } from 'constants/paths'

// styles
import classes from './LoginContainer.scss'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { isLoaded, isEmpty, pathToJS } = helpers

// Props decorators
@firebase()
@connect(
  // Map state to props
  ({firebase}) => ({
    authError: pathToJS(firebase, 'authError'),
    account: pathToJS(firebase, 'profile')
  })
)

export default class Login extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  static propTypes = {
    account: PropTypes.object,
    firebase: PropTypes.object,
github Venryx / DebateMap / src / routes / Account / containers / AccountContainer.js View on Github external
import AccountForm from '../components/AccountForm/AccountForm'
import CircularProgress from 'material-ui/CircularProgress'
import Paper from 'material-ui/Paper'

// styles
import classes from './AccountContainer.scss'

const defaultUserImageUrl = 'https://s3.amazonaws.com/kyper-cdn/img/User.png'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { pathToJS, isLoaded } = helpers

// Props decorators
@firebase()
@connect(
  // Map state to props
  ({firebase}) => ({
    authError: pathToJS(firebase, 'authError'),
    account: pathToJS(firebase, 'profile')
  })
)
export default class Account extends Component {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  static propTypes = {
    account: PropTypes.object,
    firebase: PropTypes.shape({
github transmute-industries / eth-faucet / src / containers / Projects / Project / ProjectContainer.js View on Github external
import React, { Component } from 'react'
import { PropTypes }  from 'prop-types';
import classes from './ProjectContainer.scss'
import CircularProgress from 'material-ui/CircularProgress'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { isLoaded, dataToJS } = helpers

@firebase(
  // Get paths from firebase
  ({ params }) => ([
    `projects/${params.projectname}`
  ])
)
@connect(
  // Map state to props
  ({ firebase }, { params }) => ({
    project: dataToJS(firebase, `projects/${params.projectname}`)
  })
)
export default class Project extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }
github prescottprue / generator-react-firebase / examples / react-firebase-redux / src / routes / Projects / containers / Projects / Projects.js View on Github external
// Components
import ProjectTile from '../../components/ProjectTile/ProjectTile'
import NewProjectTile from '../../components/NewProjectTile/NewProjectTile'
import NewProjectDialog from '../../components/NewProjectDialog/NewProjectDialog'
import SharingDialog from 'components/SharingDialog/SharingDialog'
import CircularProgress from 'material-ui/CircularProgress'
import classes from './Projects.scss'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { pathToJS, dataToJS, isLoaded, isEmpty } = helpers

// Decorators
@firebase(
  ({ params }) =>
    ([
      `projects/${params.username}`,
      // TODO: Use population instead of loading whole usernames list
      'usernames'
      // `projects/${params.username}#populate=collaborators:users`,
    ])
)
@connect(
  ({ firebase }, { params }) => ({
    projects: toArray(dataToJS(firebase, `projects/${params.username}`))
    .map(project =>
      (project.collaborators && dataToJS(firebase, 'usernames'))
        ? Object.assign(project, {
          collaborators: project.collaborators.map(id => ({ username: dataToJS(firebase, 'usernames')[id] }))
        })
github prescottprue / react-redux-firebase / examples / complete / material / src / containers / Signup / Signup.js View on Github external
// Components
import SignupForm from '../../components/SignupForm/SignupForm'
import Paper from 'material-ui/Paper'
import CircularProgress from 'material-ui/CircularProgress'
import Snackbar from 'material-ui/Snackbar'
import RaisedButton from 'material-ui/RaisedButton'

// Styles
import './Signup.css'

// react-redux-firebase
import { firebase, helpers } from 'react-redux-firebase'
const { pathToJS } = helpers

@firebase()
@connect(
  // Map state to props
  ({firebase}) => ({
    authError: pathToJS(firebase, 'authError'),
    account: pathToJS(firebase, 'profile')
  })
)
export default class Signup extends Component {

  static propTypes = {
    account: PropTypes.object,
    authError: PropTypes.object
  }

  state = {
    snackCanOpen: false,
github prescottprue / react-redux-firebase / examples / complete / material / src / containers / Login / Login.js View on Github external
// Components
import LoginForm from '../../components/LoginForm/LoginForm'
import Paper from 'material-ui/Paper'
import CircularProgress from 'material-ui/CircularProgress'
import Snackbar from 'material-ui/Snackbar'
import RaisedButton from 'material-ui/RaisedButton'

// Styling
import './Login.css'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { pathToJS } = helpers

@firebase()
@connect(
  // Map state to props
  ({firebase}) => ({
    authError: pathToJS(firebase, 'authError'),
    profile: pathToJS(firebase, 'profile')
  })
)
export default class Login extends Component {

  static propTypes = {
    profile: PropTypes.object,
    authError: PropTypes.shape({
      message: PropTypes.string.isRequired
    }),
    firebase: PropTypes.shape({
      login: PropTypes.func.isRequired
github Venryx / DebateMap / src / containers / Navbar / Navbar.js View on Github external
const originSettings = { horizontal: 'right', vertical: 'top' }
const buttonStyle = { color: 'white', textDecoration: 'none' }
const avatarSize = 50

const avatarStyles = {
  icon: { width: avatarSize, height: avatarSize },
  button: { marginRight: '1.5rem', width: avatarSize, height: avatarSize },
  wrapper: { marginTop: 45 - avatarSize }
}

import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { pathToJS } = helpers

// Props decorators
@firebase()
@connect(
  ({firebase}) => ({
    authError: pathToJS(firebase, 'authError'),
    auth: pathToJS(firebase, 'auth'),
    account: pathToJS(firebase, 'profile')
  })
)
export default class Navbar extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  static propTypes = {
    auth: PropTypes.object,
    firebase: PropTypes.object.isRequired
  }
github Venryx / DebateMap / src / routes / Projects / routes / Project / containers / ProjectContainer.js View on Github external
import React, { Component, PropTypes } from 'react'

import classes from './ProjectContainer.scss'
import CircularProgress from 'material-ui/CircularProgress'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { isLoaded, dataToJS } = helpers

@firebase(
	// Get paths from firebase
	({ params }) => ([
		`projects/${params.projectname}`
	])
)
@connect(
	// Map state to props
	({ firebase }, { params }) => ({
		project: dataToJS(firebase, `projects/${params.projectname}`)
	})
)
export default class Project extends Component {
	static contextTypes = {
		router: React.PropTypes.object.isRequired
	}
github Venryx / DebateMap / src / routes / Projects / containers / ProjectsContainer.js View on Github external
// Components
import ProjectTile from "../components/ProjectTile/ProjectTile"
import NewProjectTile from "../components/NewProjectTile/NewProjectTile"
import NewProjectDialog from "../components/NewProjectDialog/NewProjectDialog"
import CircularProgress from "material-ui/CircularProgress"

import classes from "./ProjectsContainer.scss"

// redux/firebase
import { connect } from "react-redux"
import { firebase, helpers } from "react-redux-firebase"
const { dataToJS, pathToJS, isLoaded, isEmpty } = helpers

// Decorators
@firebase(({params, auth})=> ([
	{
		path: "projects",
		populates: [
			{ child: "owner", root: "users" }
		]
	}
	// "projects#populate=owner:users" // string equivalent
]))
@connect(({ firebase }, { params }) => ({
	projects: dataToJS(firebase, "projects"),
	auth: pathToJS(firebase, "auth")
}))
export default class Projects extends Component {
	static contextTypes = {
		router: React.PropTypes.object.isRequired
	};
github Venryx / DebateMap / src / routes / Signup / containers / SignupContainer.js View on Github external
// Components
import Paper from 'material-ui/Paper'
import CircularProgress from 'material-ui/CircularProgress'
import Snackbar from 'material-ui/Snackbar'
import { LIST_PATH } from 'constants/paths'
import SignupForm from '../components/SignupForm/SignupForm'

import classes from './SignupContainer.scss'

// redux/firebase
import { connect } from 'react-redux'
import { firebase, helpers } from 'react-redux-firebase'
const { isLoaded, isEmpty, pathToJS } = helpers

@firebase()
@connect(
  // Map state to props
  ({firebase}) => ({
    authError: pathToJS(firebase, 'authError'),
    account: pathToJS(firebase, 'profile')
  })
)
export default class Signup extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  static propTypes = {
    account: PropTypes.object,
    firebase: PropTypes.object,
    authError: PropTypes.object