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

const mapStateToProps = state => ({
  authError: state.auth.authError,
  auth: state.firebase.auth,
});

const mapDispatchToProps = dispatch => ({
  signIn: authData => dispatch(signIn(authData)),
});

// We need firebaseConnect function to provide to this component
// firebase object with auth method.
// You can find more information on the link below
// http://docs.react-redux-firebase.com/history/v3.0.0/docs/auth.html
export default compose(
  firebaseConnect(),
  connect(mapStateToProps, mapDispatchToProps),
)(SignIn);

{/* Drawer menu */}
         this.closeDrawer()}>
          <div role="button"> this.closeDrawer()}&gt;
            
          </div>
        

        <div>
          {this.props.children}
        </div>
      
    )
  }
}

export default compose(withStyles(styles), firebaseConnect(), connect(state =&gt; state))(FriendlyPixLayout);

pathToJS,
  isLoaded,
  isEmpty
} from 'react-redux-firebase'
import { LIST_PATH } from 'constants/paths'
import ProjectTile from 'components/ProjectTile/ProjectTile'
import NewProjectTile from 'components/NewProjectTile/NewProjectTile'
import NewProjectDialog from 'components/NewProjectDialog/NewProjectDialog'
import LoadingSpinner from 'components/LoadingSpinner'
import classes from './ProjectsContainer.scss'

const populates = [
  { child: 'owner', root: 'users', keyProp: 'uid' }
]

@firebaseConnect([
  { path: 'projects', populates }
  // 'projects#populate=owner:users' // string equivalent
])
@connect(
  ({ firebase }, { params }) => ({
    auth: pathToJS(firebase, 'auth'),
    projects: populatedDataToJS(firebase, '/projects', populates)
  })
)
export default class Projects extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  static propTypes = {
    projects: PropTypes.object,

import { connect } from 'react-redux'
import { UserIsNotAuthenticated } from 'utils/router'
import {
  firebaseConnect,
  isLoaded,
  isEmpty,
  pathToJS
} from 'react-redux-firebase'

import { SIGNUP_PATH } from 'constants'
import LoginForm from '../components/LoginForm'

import classes from './LoginContainer.scss'

@UserIsNotAuthenticated // redirect to list page if logged in
@firebaseConnect()
@connect(({ firebase }) => ({
  authError: pathToJS(firebase, 'authError')
}))
export default class Login extends Component {
  static propTypes = {
    firebase: PropTypes.shape({
      login: PropTypes.func.isRequired
    }),
    authError: PropTypes.shape({
      message: PropTypes.string // eslint-disable-line react/no-unused-prop-types
    })
  }

  state = {
    snackCanOpen: false
  }

{
        navigation: ownProps.navigation,
        results: state.results,
    }
);

const mapDispatchToProps = dispatch => (
    {
        onCommitGroup(groupInfo) {
            dispatch(commitGroup(groupInfo));
        },
    }
);

export default compose(
    firebaseConnect(),
    connect(
        mapStateToProps,
        mapDispatchToProps,
    ),
)(_LoadMoreCard);

AfterLoginContainer.propTypes = {
  hackerApplication: PropTypes.object.isRequired,
  storeHackerApplication: PropTypes.func.isRequired,
};

const mapDispatchToProps = (dispatch) => {
  return {
    storeHackerApplication: (application) => {
      dispatch(addHackerApplication(application));
    },
  };
};

export default compose(
  firebaseConnect(),
  firestoreConnect((props) => {
    const { firebase } = props;
    const auth = firebase.auth();
    const { currentUser: { uid } } = auth;
    return [
      {
        collection: 'applications_hacker',
        doc: uid,
        storeAs: 'hackerApplication',
      },
    ];
  }),
  connect(mapStateToProps, mapDispatchToProps),
)(AfterLoginContainer);

import PropTypes from 'prop-types'
import { map } from 'lodash'
import { connect } from 'react-redux'
import { firebaseConnect, populatedDataToJS, pathToJS, isLoaded, isEmpty } from 'react-redux-firebase'
import { LIST_PATH } from 'constants'
import LoadingSpinner from 'components/LoadingSpinner'
import ProjectTile from '../components/ProjectTile'
import NewProjectTile from '../components/NewProjectTile'
import NewProjectDialog from '../components/NewProjectDialog'
import classes from './ProjectsContainer.scss'

const populates = [
  { child: 'createdBy', root: 'users' }
]

@firebaseConnect(({ params, auth }) => ([
  {
    path: 'projects',
    populates
  }
]))
@connect(({ firebase }, { params }) => ({
  projects: populatedDataToJS(firebase, 'projects', populates),
  auth: pathToJS(firebase, 'auth')
}))
export default class Projects extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  static propTypes = {
    children: PropTypes.object,

];

const boxPlotValues = [14,15,16,16,17,17,17,17,17,18,18,18,18,18,18,19,19,19,20,20,20,20,20,
	20,21,21,22,23,24,24,29,]
  
const mapStateToProps = (state, ownProps) => ({
    uid: state.firebase.auth.uid,
    completedActivities : state.firebase.ordered.completedActivities,
    publicPaths : state.firebase.ordered.publicPaths,
    unsolvedPublicActivities : state.problem.unsolvedPublicActivities || [],
    publicActivitiesFetched : state.problem.publicActivitiesFetched
  });


export default compose(
    firebaseConnect((ownProps, store) => {
      const state = store.getState();
      const firebaseAuth = state.firebase.auth;

      if (!firebaseAuth.uid) {
        return [];
      }

      return [
        {
          path: "/rechartDemo",
          storeAs: "rechartDemoPath",
          queryParams: ["orderByChild=owner", `equalTo=${firebaseAuth.uid}`]
        }
      ];
    }),
    connect(mapStateToProps)

import defaultUserImage from 'static/User.png'

const buttonStyle = {
  color: 'white',
  textDecoration: 'none',
  alignSelf: 'center'
}

const avatarStyles = {
  wrapper: { marginTop: 0 },
  button: { marginRight: '.5rem', width: '200px', height: '64px' },
  buttonSm: { marginRight: '.5rem', width: '30px', height: '64px', padding: '0' }
}

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

  static propTypes = {
    auth: PropTypes.object,
    account: PropTypes.object,

const mapStateToProps = (state, ownProps) => ({
  uid: state.firebase.auth.uid,
  completedActivities : state.firebase.ordered.completedActivities,
  publicPaths : state.firebase.ordered.publicPaths,
  unsolvedPublicActivities : state.problem.unsolvedPublicActivities || [],
  publicActivitiesFetched : state.problem.publicActivitiesFetched
});

const mapDispatchToProps = {
  fetchPublicPathActivies : fetchPublicPathActivies
};

export default compose(
  withStyles(styles),
  withRouter,
  firebaseConnect((ownProps, store) => {
    const state = store.getState();
    const uid = state.firebase.auth.uid;

    if (!uid) {
      return false;
    }
    return [
      `/completedActivities/${uid}`,
      {
        path: "/paths",
        queryParams: ["orderByChild=isPublic", `equalTo=${true}`],
        storeAs : 'publicPaths'
      },
    ];
  }),
  connect(