How to use the react-redux-firebase.useFirestore function in react-redux-firebase

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)
      })
  }

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

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 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 autocomplete="off" size="large">
            
                </form>

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>
      <input checked="{todo.done}" type="checkbox"></li>

const EventDetailedHeader = ({event, isHost, isGoing, authenticated}) => {
    const firestore = useFirestore();
    const firebase = useFirebase();
    const dispatch = useDispatch();
    const loading = useSelector(state => state.async.loading, []);
    return (
        
            
                <img style="{eventImageStyle}" src="{`/assets/categoryImages/${event.category}.jpg`}">

                
                    
                        

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>
      </div>

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);

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> onInputChange(get(e, 'target.value', null))} type="text" /&gt;
      <button>Submit</button>
    </div>
  )

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);