JTAppleCalendarView: Unable to clear DateCell in prepareForReuse

Question

I am attempting to clear the DateCell in prepareForReuse but my implementation doesn't seem to work when a DateCell containing Activities were selected.

I have the following setup:

1. Dummy data for the date 3 April and 4 April only
2. When there are activities, then a stackView containing dots will be rendered below the date.

My implementation works fine during the following circumstances, ie cells are properly cleaned up and reused:

1. Scrolling up and down when no dateCells are selected
2. Scrolling up and down when dateCells that do not contain activities are selected

Whenever a dateCell that contains activities are selected, the cells are no longer cleaned up, ie the dots starts appearing at random places. See gif:

Code as follows:

//At viewController: JTACMonthViewDelegate
func configureCell(view: JTACDayCell?, cellState: CellState) {
    guard let cell = view as? DateCell  else { return }
    cell.dateLabel.text = cellState.text
    handleCellTextColor(cell: cell, cellState: cellState)
    handleCellSelected(cell: cell, cellState: cellState)
    highlightTodaysDate(cell: cell, cellState: cellState)
    handleCellEvents(cell: cell, cellState: cellState)
}

func highlightTodaysDate(cell: DateCell, cellState: CellState) {
    dateFormatter.dateFormat = "YYYY MM dd"

    if dateFormatter.string(from: cellState.date) == dateFormatter.string(from: Date()) {
        cell.isToday = true
    } else {
        cell.isToday = false
    }
}

func handleCellTextColor(cell: DateCell, cellState: CellState) {
    if cellState.dateBelongsTo == .thisMonth {
        cell.dateLabel.textColor = UIColor.black
    } else {
        cell.dateLabel.textColor = UIColor.gray
    }
}

func handleCellSelected(cell: DateCell, cellState: CellState) {
    if cellState.isSelected {
        cell.selectedView.isHidden = false

        dateFormatter.dateFormat = "dd-MMM-yyyy"
        let dateString = dateFormatter.string(from: cellState.date)

        //a separate tableView is in viewController, here getting dataSource for that TV
        let filtered = calendarDataSource.filter { $0.key == dateString }
        tableViewDataSource = filtered[dateString] ?? []
        tableView.reloadData()

    } else {
        cell.selectedView.isHidden = true
    }
}

func handleCellEvents(cell: DateCell, cellState: CellState) {
    dateFormatter.dateFormat = "dd-MMM-yyyy"
    let dateString = dateFormatter.string(from: cellState.date)

    if calendarDataSource[dateString] == nil {
        cell.activities = []
    } else {
        cell.activities = calendarDataSource[dateString]
    }
}


//At DateCell
var isToday: Bool? {
    didSet {
        if isToday ?? false {
            //setup red selectedView bg
        } else {
            //setup gray selectedView bg
        }
    }
}
var activities: [Activity]? {
    didSet {
        if let activities = activities {
            if activities.count > 0 {
                setupStackView(activities)
            }
        } else {
            stackView.removeFromSuperview()
        }
    }
}

var stackView = UIStackView()

override init(frame: CGRect) {
    super.init(frame: frame)
    //Other setup work
}

func setupStackView(_ activities: [Activity]) {
    var dotViews: [UIView] = activities.map { (activity) -> DotView in
        let dotView = DotView()
        if activity.type == "1" {
            dotView.dotView.backgroundColor = .orange
        } else if activity.type == "2" {
            dotView.dotView.backgroundColor = .purple
        } else {
            dotView.dotView.backgroundColor = .lightGray

        }
        return dotView
    }

    if activities.count > 1 {
        dotViews.insert(UIView(), at: 0)
        dotViews.insert(UIView(), at: activities.count + 1)
    }

    stackView = UIStackView(arrangedSubviews: dotViews)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    addSubview(stackView)

    stackView.topAnchor.constraint(equalTo: dateLabel.bottomAnchor).isActive = true
    stackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    stackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    stackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true

}

override func prepareForReuse() {
    super.prepareForReuse()
    //Other UI reset work here

    stackView.removeFromSuperview()
}

How does one cleaned up the cell such that the dots do not appear at places where it shouldn't be?

Answer 1

I think you need to remove your stackView every time a cell is reloaded. Not just when activities is nil. Each time a cell is loaded you're going to want to wipe the slate clean.

var activities: [Activity]? {
    didSet {
        stackView.removeFromSuperview()
        if let activities = activities {
            if activities.count > 0 {
                setupStackView(activities)
            }
        }
    }
}