How to load firestore subcollection to redux store?

Question

I'm having trouble loading firestore subcollection in redux store. I'm trying to load respective subcollection inside the child component.

The component structure looks like this:

Dashboard --Project list --project summary --comments

I have loaded collection named Projects using firestoreConnect inside Dashboard component passing data to Project list mapping data to Project Summary. comments is a child component of project summary

My firestore collection structure looks like this:

Projects --project1 --comments

Dashboard:

class Dashboard extends Component {
  render() {
    const { projects, auth, notifications } = this.props
    if (!auth.uid) return <Redirect to='/signin' />
    return(
      <div className="dashboard container">
        <div className="row">
          <div className="col s12 m8 offset-m2 l8">
            <ProjectList projects={projects} />
          </div>
          <div className="col s12 offset-m1 hide-on-med-and-down l4">
            <Notification notifications={notifications} />
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  // console.log("ref: ",state)
  return {
    projects: state.firestore.ordered.projects,
    initials: state.firebase.profile.initials,
    auth: state.firebase.auth,
    notifications: state.firestore.ordered.notifications
  }
}

export default compose (
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'projects', orderBy: ['createdAt', 'desc'] },
    { collection: 'notifications', limit: 3, orderBy: ['time', 'desc'] }
  ])
)(Dashboard)

Project list Component:

const ProjectList = ({ projects }) => {
  return(
    <div className="project-list section">
      {projects && projects.map((project) => {
        return(
          <div key={project.id}>
              <ProjectSummary project={project}/>
          </div>
        )
      })}
    </div>
  )
}

export default ProjectList

Project summry:

const ProjectSummary = ({ project }) => {
    return(
      <div className="card z-depth-0 project-summary show-up post">

        <div className="name">
          <div className="">
            <span className="btn btn-floating z-depth-0 black user-indicator">
              {project.authorFirstName && project.authorFirstName[0]}{project.authorSecondName && project.authorSecondName[0]}
            </span>
             <span> {project.authorFirstName {project.authorSecondName} </span>
             <span className="right options"> <i className="material-icons">more_vert</i> </span>
          </div>
        </div>

        <div className="card-image">
          <img src={project.imageUrl} alt="art" />
          <PostCredits />
        </div>

        <div className="card-reveal">
          <Comments id={project.id} />
        </div>

        <div className="card-content">
          <Link to={'/projectdetails/' + project.id} className="black-text">
            <p className="post-title"> {project.title} </p>
          </Link>
          <p className="grey-text lighten-3 load-comments activator"> Load comments </p>
          <p className="grey-text date-format">
            {project.createdAt && project.createdAt
              .toDate()
              .toLocaleDateString('indian', {
                year: "numeric", month: "short", day: "numeric"
            })}
          </p>
        </div>
        <div className="add-comment">
          <AddComment projectId={project.id} />
        </div>

      </div>
    )
}

export default ProjectSummary

Comment:

const Comment = (props) => {
    return(
      <div>
        <div className="loaded-comments">
          <span className="card-title grey-text text-darken-4"> Comments <i className="material-icons right">close</i> </span>
          <p> <span className="commentor"> Joe </span>  </p>
        </div>
      </div>
    )
}

const mapStateToProps = (state, ownProps) => {
  console.log("state: ", state)
  return {

  }
}

export default compose (
  connect(mapStateToProps),
  firestoreConnect(props => {
    return [
      { collection: 'projects',
        doc: props.id,
        subcollections: [
          {
            collection: 'comments'
          }
        ]
      }
    ]
  })
)(Comment)

Expected Result:

*Want to load Project collection's subcollection named Comments

Actual Result:

*No error occurs but still no data is loaded.

Thanks in advance!

Answer 1

There is a possibility that you just don't see that sub-collection. If you look under in your browser console, navigate to firebase > ordered > prjoects > comments. you should be able to see an array of your comment

Example:

|-firestore
|--ordered:
|---projects: Array(1)
|----0:
|-----id: *uid*
|------comments: Array(2)
|-------0: {*comment details*}
|-------1: {*comment details*}
|------length: 2
|-----__proto__: Array(0)

After you can map your data based on your key.

const mapStateToProps = (state) => {
  return {
    projects: state.firestore.ordered.projects.comments,
  }
}

Once connected you will be able to use your data.