How to create a component that contains a collection view ?

[sxgfxm]

I can use ComponentKit to create a collection view whose cells display simple views. However, I get into trouble when I create a component which contains a collection view. Is there any demo or tips to do that ? Thanks a lot .

[ryanrhee]

That should work as expected. What do you mean by "get into trouble"?

[sxgfxm]

I initialize the dataSource with one section and insert multiple items. When I scroll the collection view, it works correctly. Then I scroll up and down few times, the cells which contain a collection view show content in the wrong order. When the cell will appear, I check the model that is correct. But when the cell did appear, it shows different content randomly. I think maybe there is something wrong with reusing. I worked on it for a few days but cannot find out the solution. Could you show me how to create a component that contains a collection view ?
Here is my CollectionComponent, the FixedCollectionView is a UIView with a collection view on it.

+(instancetype)newWithMovieListModel:(MovieListModel *)movieListModel{
  CKComponentScope scope(self);
  //  layout
  UICollectionViewFlowLayout *flowLayout =
  [[UICollectionViewFlowLayout alloc] init];
  [flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
  [flowLayout setMinimumLineSpacing:0];
  [flowLayout setMinimumInteritemSpacing:0];
  //  size
  CGSize itemSize = CGSizeMake(100, 150);
  CGSize viewSize = CGSizeMake(355, 150);
  //  items
  NSMutableDictionary<NSIndexPath *, NSObject *> *items =
  [NSMutableDictionary new];
  for (int i = 0; i < movieListModel.movieList.count; i++) {
       [items setObject:movieListModel.movieList[i]
              forKey:[NSIndexPath indexPathForRow:i inSection:0]];
  }
  //  component
  return [super newWithComponent:[CKInsetComponent
                                  newWithView:{[UIView class],{{@selector(setBackgroundColor:),[UIColor grayColor]}}}
                                  insets:{.left = 10,.top = 10,.right = 10,.bottom = 10}
                                  component:[CKComponent newWithView:{
    [FixedCollectionView class],
    {
      {@selector(setupAll:),@(YES)},
      {@selector(setupFlowLayout:),flowLayout},
      {@selector(setupCollectionViewWithViewSize:),[NSValue valueWithCGSize:viewSize]},
      {@selector(setupItemSize:),[NSValue valueWithCGSize:itemSize]},
      {@selector(setupItems:),items},
      {@selector(setupComponentName:),NSStringFromClass([MovieComponent class])},
      {@selector(setupSelector:),NSStringFromSelector(@selector(newWithMovieModel:))},
      {@selector(setupModel:),NSStringFromClass([MovieModel class])}
    }
  } size:{viewSize.width,viewSize.height}]]];
}

Thank you for your help

[ryanrhee]

Just glancing at it, things look fine. If you think there's a bug with the core framework can you show it with a breaking unit test? Thanks!

[ocrickard]

This seems likely an issue inside your collection view code.

cc @gkassabli @lucasr we get requests to have an open-source collection view example every once in awhile. Any interest in providing an example?

[ocrickard]

I opened #810 to track providing an example. Closing this issue since the specific issue here with the code needs more information to be actionable. If you get a failing unit test, feel free to open a new issue!

[sxgfxm]

Thank you for your help. I'm looking forward for the example.