How to use the react-redux-firebase.useFirestoreConnect 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 TryCatchLearn / ReventsAlpha / src / features / user / UserDetailed / UserDetailedPage.jsx View on Github external
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

    const profile = useSelector(state => (state.firestore.ordered.userProfile && state.firestore.ordered.userProfile[0]) || {});
    const photos = useSelector(state => state.firestore.ordered.photos && state.firestore.ordered.photos);
    const userEvents = useSelector(state => state.user.events) || [];
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        dispatch(getUserEvents(params.id));
    }, [dispatch, params]);

    const handleChangeTab = async (e, data) => {
        console.log(data);
        dispatch(getUserEvents(params.id, data.activeIndex));
    };
github TryCatchLearn / ReventsAlpha / src / features / user / UserDetailed / UserDetailedPage.jsx View on Github external
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

    const profile = useSelector(state => (state.firestore.ordered.userProfile && state.firestore.ordered.userProfile[0]) || {});
    const photos = useSelector(state => state.firestore.ordered.photos && state.firestore.ordered.photos);
    const userEvents = useSelector(state => state.user.events) || [];
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        dispatch(getUserEvents(params.id));
    }, [dispatch, params]);

    const handleChangeTab = async (e, data) => {
        console.log(data);
        dispatch(getUserEvents(params.id, data.activeIndex));
    };

    return (
github TryCatchLearn / ReventsAlpha / src / features / event / EventActivity / EventActivity.jsx View on Github external
const EventActivity = ({contextRef}) => {
    const query = useMemo(() => ({
        collection: 'activity',
        orderBy: ['timestamp', 'desc'],
        limit: 5,
        storeAs: 'activity'
    }), []);
    useFirestoreConnect(query);
    // useSelector case, to memoize a selector.  This ensure the useSelector will have exactly same selector every time the component re-render
    const activitySelector = useCallback(state => state.firestore.ordered.activity, []);
    const activities = useSelector(activitySelector);

    return (
        <Sticky context={contextRef} offset={100} styleElement={{zIndex: 0}}>
            <Header attached='top' content='Recent Activity'/>
            <Segment attached>
                <Feed>
                    {activities && activities.map(activity => (
                        <EventActivityItem key={activity.id} activity={activity}/>
                    ))}
                </Feed>
            </Segment>
        </Sticky>
    );
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)
  const toggleDialog = () => changeDialogState(!newDialogOpen)

  function addProject(newInstance) {
    if (!auth.uid) {
      return showError('You must be logged in to create a project')
github prescottprue / react-redux-firebase / examples / complete / firestore / src / Todos.js View on Github external
function Todos() {
  // Attach todos listener
  useFirestoreConnect(() => [
    todosQuery
  ])
  
  // Get todos from redux state
  const todos = useSelector(({ firestore: { ordered } }) => ordered.todos)

  // Show a message while todos are loading
  if (!isLoaded(todos)) {
    return 'Loading'
  }
  
  // Show a message if there are no todos
  if (isEmpty(todos)) {
    return 'Todo list is empty'
  }
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

        const profile = useSelector(state => state.firebase.profile, []);
        const loading = useSelector(state => state.async.loading, []);
        const photos = useSelector(state => state.firestore.ordered.photos, []);

        // actions equivalent
        const [files, setFiles] = useState([]);
        const [cropResult, setCropResult] = useState('');
        const [image, setImage] = useState(null);


        useEffect(() => {
            return () => {
                files.forEach(file => URL.revokeObjectURL(file.preview));
github TryCatchLearn / ReventsAlpha / src / features / user / PeopleDashboard / PeopleDashboard.jsx View on Github external
const PeopleDashboard = () => {
    const auth = useSelector(state => state.firebase.auth);
    const followingQuery = useMemo(() => ({
        collection: 'following',
        doc: auth.uid,
        subcollections: [{collection: 'following'}],
        storeAs: 'following'
    }), [auth.uid]);
    const followerQuery = useMemo(() => ({
        collection: 'followers',
        doc: auth.uid,
        subcollections: [{collection: 'followers'}],
        storeAs: 'followers'
    }), [auth.uid]);
    useFirestoreConnect(followerQuery);
    useFirestoreConnect(followingQuery);
    const followers = useSelector(state => state.firestore.ordered.followers);
    const followings = useSelector(state => state.firestore.ordered.following);

    return (
        <Grid>
            <Grid.Column width={16}>
                <Segment>
                    <Header dividing content="People following me" />
                    <Card.Group itemsPerRow={8} stackable>
                        {followers &&
                        followers.map(follower => <PersonCard key={follower.id} user={follower} />)}
                    </Card.Group>
                </Segment>
                <Segment>
                    <Header dividing content="People I'm following" />
github prescottprue / react-redux-firebase / examples / complete / typescript / src / List.tsx View on Github external
function List() {
  useFirestoreConnect([{
    collection: "todos",
  }]);
  const todos = useSelector((state: SystemState) => state.firebase.data.todos);
  if (!isLoaded(todos)) { return "Loading..."; }
  if (isEmpty(todos)) { return null; }
  return (
    <ul>
      {todos.map((todo: any) => (
        <li key={todo.id}>{todo.name}</li>
      ))}
    </ul>
  );
}
github TryCatchLearn / ReventsAlpha / src / features / user / PeopleDashboard / PeopleDashboard.jsx View on Github external
const PeopleDashboard = () => {
    const auth = useSelector(state => state.firebase.auth);
    const followingQuery = useMemo(() => ({
        collection: 'following',
        doc: auth.uid,
        subcollections: [{collection: 'following'}],
        storeAs: 'following'
    }), [auth.uid]);
    const followerQuery = useMemo(() => ({
        collection: 'followers',
        doc: auth.uid,
        subcollections: [{collection: 'followers'}],
        storeAs: 'followers'
    }), [auth.uid]);
    useFirestoreConnect(followerQuery);
    useFirestoreConnect(followingQuery);
    const followers = useSelector(state => state.firestore.ordered.followers);
    const followings = useSelector(state => state.firestore.ordered.following);

    return (
        <Grid>
            <Grid.Column width={16}>
                <Segment>
                    <Header dividing content="People following me" />
                    <Card.Group itemsPerRow={8} stackable>
                        {followers &&
                        followers.map(follower => <PersonCard key={follower.id} user={follower} />)}
                    </Card.Group>
                </Segment>
                <Segment>
                    <Header dividing content="People I'm following" />
                    <Card.Group itemsPerRow={8} stackable>