0

I'm working on a parent component, with conditionally rendered children components. I am simplifying the parent component a bit to help clarify my issue.

Display 1: Display list of "Courses"

The page starts off displaying a list of the user's "Courses"; a "Course" is just a collection inside Firestore. To access these collections, I call the "FirestoreConnect()" at the export default line of the end of this parent component.

However, once the user clicks on one of the Courses that are displayed, the screen enters Display 2.

Display 2: Display list of "Lectures"

Once the user chooses a course, I want it to display a list of that courses "lectures". "Lectures" are simply Firestore sub-collection within that specific courses collection. However, since I already called the "FirestoreConnect()" once already during the initial rendering of this parent, I don't know how to recall it specifically to read the selected sub-collections material. (Since I didn't know before hand which course the user would choose.)

Is there a way to continue recalling a FirestoreConnect() multiple times, for different collections, inside the same parent component?

Andrew B.
  • 245
  • 3
  • 12

1 Answers1

1

Since we don't see your code, I will be guessing how you are passing the parameters for your firestoreConnect(). I'm saying that to clarify that you need to pass the subcollection/subdocument hierarchy information as to firestoreConnect(). So, your code would be something like below:

const enhance = compose(
  firestoreConnect(props => {
    return [{ collection: "Courses", doc: props.uid, subcollections: [{ collection: "Lectures" }], storeAs: `${props.uid}-lectures` }];
  }),
  connect(({ firestore }, props) => {
    return {
      lectures: firestore.ordered[`${props.uid}-lectures`] || []
    };
  })
);

...

const Lectures = ({ firestore, lectures }) => {
    return <YOUR_LECTURES_LIST_UI>
}

While this code is untested, it was based from this tutorial here and I believe it might help you. You just need to know that the subcollection is still referenced in your firestoreConnect(), so the application already has this part of the collection configured.

In case this still doesn't help you, I would recommend you to check this other similar cases below, because they might help you as well.

Let me know if the information helped you!

gso_gabriel
  • 4,199
  • 1
  • 10
  • 22
  • Thanks for the suggestions gso_gabriel. I'll try to implement a couple of these suggestions to see if I'm able to work anything out. – Andrew B. Jul 28 '20 at 15:12
  • gso_gabriel, Thanks for your suggestions. After further investigation I decided that I will redesign the project and focus exclusively on passing data to the parent and children components via Redux. Thanks again :) – Andrew B. Jul 28 '20 at 20:42
  • That's great!! Glad to see that I could help you, @AndrewB. :) – gso_gabriel Jul 29 '20 at 07:32