How to use the react-redux-firebase.useFirestore 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 / redux-firestore / src / routes / Projects / components / ProjectTile / ProjectTile.js View on Github external
function ProjectTile({ name, projectId, showDelete }) {
  const classes = useStyles()
  const history = useHistory()
  const firestore = useFirestore()
  const { showError, showSuccess } = useNotifications()

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

  function deleteProject() {
    return firestore
      .delete(`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 / Settings / Photos / PhotosPage.jsx View on Github external
const PhotosPage = () => {
        const dispatch = useDispatch();
        const firestore = useFirestore();
        const firebase = useFirebase();

        const auth = useSelector(state => state.firebase.auth, []);

        const userPhotosQuery = useMemo(() => ({
            collection: 'users',
            doc: auth.uid,
            subcollections: [{collection: 'photos'}],
            storeAs: 'photos'
        }), [auth.uid]);

        // firestoreConnect equivalent
        useFirestoreConnect(userPhotosQuery);

        // mapstate equivalent
github prescottprue / generator-react-firebase / examples / redux-firestore / src / routes / Projects / components / ProjectsList / ProjectsList.js View on Github external
function useProjectsList() {
  const { showSuccess, showError } = useNotifications()
  const firestore = useFirestore()

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

  useFirestoreConnect([
    {
      collection: 'projects',
      where: ['createdBy', '==', auth.uid]
    }
  ])

  // Get projects from redux state
  const projects = useSelector(state => state.firestore.ordered.projects)

  // New dialog
  const [newDialogOpen, changeDialogState] = useState(false)
github TryCatchLearn / ReventsAlpha / src / features / auth / Login / LoginForm.jsx View on Github external
const LoginForm = ({handleSubmit, error, submitting}) => {
    const dispatch = useDispatch();
    const firebase = useFirebase();
    const firestore = useFirestore();
    const handleLogin = useCallback(
        (user) => {
            return dispatch(login({firebase}, user))
        }, [firebase, dispatch]
    );
    const handleSocialLogin = useCallback(
        (provider) => {
            return dispatch(socialLogin({firebase, firestore}, provider))
        }, [firebase, firestore, dispatch]
    );
    return (
        <Form size='large' onSubmit={handleSubmit(handleLogin)} autoComplete='off'>
            <Segment>
                <Field
                    name='email'
                    component={TextInput}
github prescottprue / react-redux-firebase / examples / complete / firestore / src / TodoItem.js View on Github external
function TodoItem({ id }) {
  const todo = useSelector(({ firestore: { data } }) => data.todos && data.todos[id])
  const firestore = useFirestore()

  function toggleDone() {
    firestore.update(`todos/${id}`, { done: !todo.done })
  }
  function deleteTodo() {
    return firestore.remove(`todos/${id}`)
  }

  return (
    <li className="Todo">
      <input
        className="Todo-Input"
        type="checkbox"
        checked={todo.done}
        onChange={toggleDone}
      />
github TryCatchLearn / ReventsAlpha / src / features / event / EventDetailed / EventDetailedHeader.jsx View on Github external
const EventDetailedHeader = ({event, isHost, isGoing, authenticated}) => {
    const firestore = useFirestore();
    const firebase = useFirebase();
    const dispatch = useDispatch();
    const loading = useSelector(state => state.async.loading, []);
    return (
        <Segment.Group>
            <Segment basic attached='top' style={{padding: '0'}}>
                <Image
                    src={`/assets/categoryImages/${event.category}.jpg`}
                    fluid
                    style={eventImageStyle}
                />

                <Segment basic style={eventImageTextStyle}>
                    <Item.Group>
                        <Item>
                            <Item.Content>
github prescottprue / redux-firestore / examples / basic / src / Todos.js View on Github external
function Todos() {
  const todoIds = useSelector(state => state.firestore.ordered.todos)
  const firestore = useFirestore()
  const listenerSettings = {
    collection: 'todos',
    orderBy: ['createdAt', 'asc'],
    limit: 10
  }

  useEffect(() => {
    firestore.setListener(listenerSettings)
    return function cleanup() {
      firestore.unsetListener(listenerSettings)
    }
  }, [])

  return (
    <div>
      <NewTodo />
github TryCatchLearn / ReventsAlpha / src / features / event / EventDashboard / EventDashboard.jsx View on Github external
const EventDashboard = () => {
    const dispatch = useDispatch();
    const firestore = useFirestore();
    const [loadingInitial, setLoadingInitial] = useState(true);

    const events = useSelector(state => objectToArray(state.firestore.data.events) || []);
    const moreEvents = useSelector(state => state.events.moreEvents);
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        const getEvents = async () => {
            await dispatch(getPagedEvents({firestore}));
        };
        if (events.length === 0) {
            getEvents().then(() => {
                setLoadingInitial(false);
            })
        } else {
            setLoadingInitial(false);
github prescottprue / redux-firestore / examples / basic / src / NewTodo.js View on Github external
function NewTodo() {
  const [inputValue, onInputChange] = useState(null)
  const firestore = useFirestore()

  function onNewClick() {
    return firestore.add('todos', {
      text: inputValue,
      done: false,
      owner: 'Anonymous',
      createdAt: firestore.FieldValue.serverTimestamp()
    })
  }

  return (
    <div style={styles.container}>
      <input onChange={(e) => onInputChange(get(e, 'target.value', null))} type="text" />
      <button onClick={onNewClick}>Submit</button>
    </div>
  )
github TryCatchLearn / ReventsAlpha / src / features / event / EventForm / EventForm.jsx View on Github external
const EventForm = ({change, history, match: {params}, invalid, submitting, pristine, handleSubmit}) => {
    const dispatch = useDispatch();
    const firebase = useFirebase();
    const firestore = useFirestore();
    const [cityLatLng, setCityLatLng] = useState({});
    const [venueLatLng, setVenueLatLng] = useState({});
    useFirestoreConnect(`events/${params.id}`);
    const event = useSelector(state => (state.firestore.ordered.events && state.firestore.ordered.events.filter(e => e.id === params.id)[0]) || {});

    useEffect(() => {
        if (Object.keys(event).length > 0) {
            dispatch(initialize('eventForm', event))
        }
    }, [dispatch, event]);

    const handleCitySelect = (selectedCity) => {
        geocodeByAddress(selectedCity)
            .then(results => getLatLng(results[0]))
            .then(latlng => {
                setCityLatLng(latlng);