Hassan Ben Chafi
Hassan Ben Chafi

Reputation: 43

How to retrieve collection and subcollection in my case

I wanna try to retrieve all data and subcollections from my data base using react-firebase-redux enter image description here

That's my code I'm using firestoreConnect(()

import React, { Component } from "react";
import { Progress, Table } from "reactstrap";
import { connect } from "react-redux";
import { compose } from "redux";
import { firestoreConnect } from "react-redux-firebase";
class coachsTab extends Component {
  render() {
    return (
      <Table hover responsive className="table-outline mb-0 d-none d-sm-table">
        <thead className="thead-light">
          <tr>
            <th className="text-center">
              <i className="icon-people"></i>
            </th>
            <th>User</th>
            <th className="text-center">Country</th>
            <th>Usage</th>
            <th className="text-center">Payment Method</th>
            <th>Activity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="text-center">
              <div className="avatar">
                <img
                  src={"assets/img/avatars/6.jpg"}
                  className="img-avatar"
                  alt="[email protected]"
                />
                <span className="avatar-status badge-danger"></span>
              </div>
            </td>
            <td>
              <div>Friderik Dávid</div>
              <div className="small text-muted">
                <span>New</span>| Registered: Jan 1, 2015
              </div>
            </td>
            <td className="text-center">
              <i
                className="flag-icon flag-icon-pl h4 mb-0"
                title="pl"
                id="pl"
              ></i>
            </td>
            <td>
              <div className="clearfix">
                <div className="float-left">
                  <strong>43%</strong>
                </div>
                <div className="float-right">
                  <small className="text-muted">
                    Jun 11, 2015 - Jul 10, 2015
                  </small>
                </div>
              </div>
              <Progress className="progress-xs" color="success" value="43" />
            </td>
            <td className="text-center">
              <i
                className="fa fa-cc-amex"
                style={{
                  fontSize: 24 + "px",
                }}
              ></i>
            </td>
            <td>
              <div className="small text-muted">Last login</div>
              <strong>Yesterday</strong>
            </td>
          </tr>
        </tbody>
      </Table>
    );
  }
}
const mapStateToProps = (state) => {
  console.log("state", state);
  const coach = state.firestore.data;
  console.log("coach", coach);
  return {
    coach: coach,
  };
};
export default compose(
  connect(mapStateToProps),
  firestoreConnect(() => [
    {
      collection: "coach",
    },
  ])
)(coachsTab);

Upvotes: 0

Views: 56

Answers (1)

Tarik Huber
Tarik Huber

Reputation: 7418

To get the subcollections you can rewrite this part of your code to:

firestoreConnect(props => {
    return [
      {
        collection: "coach",
        doc: coachId,
        subcollection: [{ collection: "album" },{ collection:"default"}]
      }
    ];
  })

Upvotes: 0

Related Questions