How to display row and section titles in collectionView based on Firestore data?

Question

I'm trying to categorize items in sections in a tableView based on Dates as section titles. I've created two arrays so that I can merge them later for sections and rows like:

var tableViewModel = [TableViewModel]()
var items = [TableViewModel]()

var sectionTableViewModel = [Timestamp]()
var sectionItems = [Timestamp]()

Here's how I load data from Firestore:

ref.addSnapshotListener { documentSnapshot, error in
      guard let data = documentSnapshot else {
          print("Error fetching document: \(error!)")
          return
      }

      let documents = data.documents
      for document in documents {
          let item = TableViewModel(json: document.data())
          let sectionItem: Timestamp = document.data()["date"] as! Timestamp

           self.items.append(item)
          if (!self.sectionItems.contains(sectionItem)) {
              self.sectionItems.append(sectionItem)
          }
      }

      // Display as descending order.
      self.tableViewModel = self.items as [TableViewModel]
      self.sectionTableViewModel = self.sectionItems as [Timestamp]

      self.collectionView.reloadData()
  }

Now I can't figure how to divide my items under sections for tableView. What I've done so far is populate section and rows like:

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return self.tableViewModel.count
}

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return self.sectionTableViewModel.count
}

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "sectionHeader", for: indexPath) as! SectionHeaderCollectionReusableView

    header.headerLabel.text = sectionTableViewModel[indexPath.section]
        return header
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! UpdatesCollectionViewCell

    cell.titleLabel.text =  self.tableViewModel[indexPath.row].title
}

What this does is it displays section titles correctly but each section has all the data displayed over and over again and I can't figure how to filter data based on date. Do I create another array and merge both tableViewModel and sectionTableViewModel togethher? Or do I filter the items in cellForItemAt ? Or do I change the structure of Firestore data?

Answer 1

The problem you are facing is the problem of how you structured your data. You have an array of dates, that define your section, that is good. Then you have an array that defines your rows/items, which is also good, but what you need is for each date/section to have an array of rows/items.

What you have right now is you have all your sections using up the same array, that's why you have your items duplicated.

Now to solve this you could do several things either on the front-end, or backend from firestore.

You can create a data structure on Firestore where the document contains a date and an array of the data.

Another thing you can do is with your current data structure is have a new array for each date. To know which array belongs to which date a Dictionary would do the job.

Now as for me providing code, or giving you the solution directly, I'm not going to do that because that's not how someone learns. If you have any further questions to clarify the problem, I'll gladly answer!