How to use the react-redux-firebase.useFirebase 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 / generator-react-firebase / examples / react-firebase-redux / src / routes / Account / components / AccountEditor / AccountEditor.js View on Github external
function AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showSuccess, showError } = useNotifications()

  // Get profile from redux state
  const profile = useSelector(state => state.firebase.profile)

  if (!isLoaded(profile)) {
    return <LoadingSpinner />
  }

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => showSuccess('Profile updated successfully'))
      .catch(error => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        showError('Error updating profile: ', error.message || error)
github prescottprue / generator-react-firebase / examples / react-firebase-redux / src / routes / Projects / components / ProjectTile / ProjectTile.js View on Github external
function ProjectTile({ name, projectId, showDelete }) {
  const classes = useStyles()
  const history = useHistory()
  const firebase = useFirebase()
  const { showError, showSuccess } = useNotifications()

  function goToProject() {
    return history.push(`${LIST_PATH}/${projectId}`)
  }

  function deleteProject() {
    return firebase
      .remove(`projects/${projectId}`)
      .then(() => showSuccess('Project deleted successfully'))
      .catch(err => {
        console.error('Error:', err) // eslint-disable-line no-console
        showError(err.message || 'Could not delete project')
        return Promise.reject(err)
      })
  }
github TryCatchLearn / ReventsAlpha / src / features / user / UserDetailed / UserDetailedPage.jsx View on Github external
const UserDetailedPage = ({match: {params}}) => {
    const dispatch = useDispatch();
    const firebase = useFirebase();
    const isCurrentUser = firebase.auth().currentUser.uid === params.id;
    const userProfileQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        storeAs: 'userProfile'
    }), [params.id]);

    const userPhotosQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        subcollections: [{collection: 'photos'}],
        storeAs: 'photos'
    }), [params.id]);
    useFirestoreConnect(userProfileQuery); // needs to be query object so can either get profile from store
    useFirestoreConnect(userPhotosQuery); // needs to be query object so can store as
github prescottprue / generator-react-firebase / examples / react-firebase-redux / src / routes / Projects / components / ProjectsList / ProjectsList.js View on Github external
function useProjectsList() {
  const { showSuccess, showError } = useNotifications()
  const firebase = useFirebase()

  // Get auth from redux state
  const auth = useSelector(state => state.firebase.auth)
  // Create listeners based on current users UID
  useFirebaseConnect([
    {
      path: 'projects',
      queryParams: [
        'orderByChild=createdBy',
        `equalTo=${auth.uid}`,
        'limitToLast=10'
      ]
    }
  ])

  // Get projects from redux state
github TryCatchLearn / ReventsAlpha / src / features / user / Settings / AboutPage.jsx View on Github external
const AboutPage = ({ pristine, submitting, handleSubmit }) => {
    const dispatch = useDispatch();
    const firebase = useFirebase();
    const handleUpdateProfile = useCallback(
        (user) => {
            return dispatch(updateProfile({firebase}, user))
        }, [firebase, dispatch]
    );
    return (
        <Segment>
            <Header dividing size='large' content='About Me' />
            <p>Complete your profile to get the most out of this site</p>
            <Form onSubmit={handleSubmit(handleUpdateProfile)}>
                <Form.Group inline>
                    <label>Tell us your status: </label>
                    <Field
                        name='status'
                        component={RadioInput}
                        type='radio'
github prescottprue / generator-react-firebase / examples / react-firebase-redux / src / routes / Login / components / LoginPage / LoginPage.js View on Github external
function LoginPage() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showError } = useNotifications()

  function onSubmitFail(formErrs, dispatch, err) {
    return showError(formErrs ? 'Form Invalid' : err.message || 'Error')
  }

  function googleLogin() {
    return firebase
      .login({ provider: 'google', type: 'popup' })
      .catch(err => showError(err.message))
  }

  function emailLogin(creds) {
    return firebase.login(creds).catch(err => showError(err.message))
  }
github prescottprue / generator-react-firebase / examples / react-firebase-redux / src / routes / Signup / components / SignupPage / SignupPage.js View on Github external
function SignupPage() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showError } = useNotifications()

  function onSubmitFail(formErrs, dispatch, err) {
    showError(formErrs ? 'Form Invalid' : err.message || 'Error')
  }

  function googleLogin() {
    return firebase
      .login({ provider: 'google', type: 'popup' })
      .catch(err => showError(err.message))
  }

  function emailSignup(creds) {
    return firebase
      .createUser(creds, {
        email: creds.email,
github TryCatchLearn / ReventsAlpha / src / features / nav / NavBar / NavBar.jsx View on Github external
const NavBar = ({history}) => {
    const firebase = useFirebase();
    const auth = useSelector(state => state.firebase.auth, []);

    const handleLogout = () => {
        firebase.auth().signOut().then(() => {
            history.push('/');
        });

    };

    const authenticated = auth.isLoaded && !auth.isEmpty;
    return (
        <Menu inverted fixed='top'>
            <Container>
                <Menu.Item as={Link} to='/' header>
                    <img src='/assets/logo.png' alt='logo'/>
                    Re-vents Alpha
github prescottprue / react-redux-firebase / examples / complete / firestore / src / NewTodo.js View on Github external
function NewTodo() {
  const [inputVal, changeInput] = useState('')
  const firebase = useFirebase()

  function resetInput() {
    changeInput('')
  }
  function onInputChange(e) {
    return changeInput(e && e.target && e.target.value)
  }
  function addTodo() {
    return firebase.push('todos', { text: inputVal || 'sample', done: false })
  }

  return (
    <div>
      <h4>New Todo</h4>
      <input value={inputVal} onChange={onInputChange} />
      <button onClick={addTodo}>Add</button>
github prescottprue / redux-firestore / examples / complete / src / routes / Signup / components / SignupPage / SignupPage.js View on Github external
function SignupPage() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showError } = useNotifications()

  function onSubmitFail(formErrs, dispatch, err) {
    showError(formErrs ? 'Form Invalid' : err.message || 'Error')
  }

  function googleLogin() {
    return firebase
      .login({ provider: 'google', type: 'popup' })
      .catch(err => showError(err.message))
  }

  function emailSignup(creds) {
    return firebase
      .createUser(creds, {
        email: creds.email,